Kilokem/BroCodeJS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE!

Browse Source
This commit is contained in:
Kilokem
2024-09-20 11:02:04 +02:00
parent 7fa0b67119
commit 65972c5e9a
8 changed files with 89 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
FunctionalFun/IMG/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 556 KiB

BIN
FunctionalFun/IMG/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 460 KiB

BIN
FunctionalFun/IMG/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

BIN
FunctionalFun/IMG/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB

BIN
FunctionalFun/IMG/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

BIN
FunctionalFun/IMG/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

42
FunctionalFun/index.html
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#formimage {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 10px;
display: inline-block;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s;
}
#formimage:hover {
transform: scale(1.1);
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
</style>
<body>
<label for="" id="theArray"></label>
<p id="outputter"></p>
<div>
<h1>Roll the dice!</h1>
<label for="">Dice Roller:</label>
<input type="number" value="1" id="numberofimages">
<input type="button" value="Roll Dice!" id="dicerollerimageloader">
<div id="diceimages" class="container"></div>
</div>
<script src="script.js"></script>
</body>
</html>

47
FunctionalFun/script.js
View File

@ -0,0 +1,47 @@
document.addEventListener("DOMContentLoaded", function(){
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 11, 12, 34, 10, 4, 656, 234, 31, 1, 2, 3, 43, 1, 10,23, 42, 12];
document.getElementById("theArray").textContent = "The array we are working on: " + numbers;
let out = document.getElementById("outputter");
out.innerHTML += "Maximum of the array: " + Math.max(...numbers) + "<br/>"; //The spread operator!!!!! With ... you can "unpack" a list and call the function with the parameters of single elements, not with the list
out.innerHTML += "Minimum of the array: " + Math.min(...numbers) + "<br/><br/>";
let text = "This is a complex text with words!";
let textarray = [...text];
out.innerHTML += "The text I'll use for an array: " + text + "<br/>";
out.innerHTML += "The text array: " + textarray + "<br/>";
out.innerHTML += "The text with dashes " + textarray.join("-") + "<br/><br/>";
let fruits = ["Apple", "Preal", "Plum", "Banana", "Orange"];
let vegetables = ["Carrot", "pepper", "Celery", "Potatos"];
out.innerHTML += "Fruit list: " + fruits + "<br/>";
out.innerHTML += "Fruit list: " + vegetables + "<br/>";
out.innerHTML += "Combined list: " + [...vegetables, ...fruits, "pearl"] + "<br/><br/>";
function mergedfruit(...elements) { //Get varying amount of elements and merge it with the "spread out" operator or !! rest operator !!
out.innerHTML += "Collection: " + elements + "<br/>";
}
mergedfruit("sth1", "sth2", "sth3");
function summariser(...numbers){
let sum = 0;
for(let item in numbers){
sum += Number(item);
}
return sum;
}
out.innerHTML += "Some Sum: " + summariser(1,2,3,4,5,6,7,8) + "<br/>";
document.getElementById("dicerollerimageloader").onclick = function(){ //Imageloader
const res = document.getElementById("diceimages");
const imagenumber = document.getElementById("numberofimages").value;
let images = [];
for(i = 0; i < imagenumber; i++){
let rand = Math.floor(Math.random() * 6)+1;
images.push(`<img src="./IMG/${rand}.jpg" id="formimage">`);
}
res.innerHTML = images.join('');
}
});