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('');
    }
});

//https://youtu.be/lfmg-EJ8gm4?si=78bU7V4mL7MVoYw_&t=14391


//Callback functions!!!

function sum(callback, a, b) {
    let suma = a + b;
    callback(suma);
}

function summa(b, a) {
    return b + a
}

function displaynum(num) {
    console.log("The number: ", num);
}

function displaytxt(num) {
    console.log("The Text: ", num);
}

sum(displaynum, 5, 8);
sum(displaytxt, "alma", "fa");
sum(console.log, 5, 7 )


let numberok = [1, 2, 3, 4, 5]

numberok.forEach(displaynum)                    //!!! <array>.forEach() METHOD!!!!!!


let numbbb = numberok.map(doubler);         //map()
console.log(numbbb);
function doubler(params) {
    return params**2;
}




let nummb = numberok.filter(ifeven)             //filterer()
console.log(nummb);
function ifeven(n){
    return n % 2 === 0;
}

let total = numberok.reduce(summa)          //reduce()
console.log(total)


//https://youtu.be/lfmg-EJ8gm4?feature=shared&t=17107



//Funcion Expressions

const hello = function(){
    console.log("HELLO");
}
hello();


setTimeout(function(){
    console.log("HOLA");
}, 3000);


//Arrow functions

const squaros = numberok.map((element) => Math.pow(element, 2));