4 years ago · c6f9fd8aaa
--- a/12-array_methods/index.html
+++ b/12-array_methods/index.html
@@ -8,10 +8,6 @@
        <title>Array Methods</title>
    </head>
    <body>
        <header>
            <h1>Array Methods</h1>
        </header>

        <script src="scripts/main.js"></script>
    </body>
 </html>
--- a/12-array_methods/scripts/main.js
+++ b/12-array_methods/scripts/main.js
@@ -1,69 +1,168 @@
 let numberContainer = document.getElementById('numberContainer');
 let resultContainer = document.getElementById('resultContainer');
 let array = [4, 8, 12, 16];

 let sumResult = document.getElementById('sumResult');
 let productResult = document.getElementById('productResult');
 // array.forEach(function(item) {
 //     console.log(item);
 // });

 let main = document.querySelector('main');

 function sum(event) {
    let numbers = document.querySelectorAll('.number');
    let sum = 0;
    for (let i = 0; i < numbers.length; i++) {
        sum += parseInt(numbers.item(i).value);
 Array.prototype.selfForEach = function(callback) {
    for (let i = 0; i < this.length; i++) {
        callback(this[i], i, this);
    }
    sumResult.innerHTML = sum;
 }

 function product(event) {
    let numbers = document.querySelectorAll('.number');
    let product = 1;
    for (let i = 0; i < numbers.length; i++) {
        product *= parseInt(numbers.item(i).value);
 };

 array.selfForEach(function(item, index, originalArray) {
    // console.log(item);
    // console.log(index);
    // console.log(originalArray);
 });

 Array.prototype.selfMap = function(callback) {
    let newArray = [];
    for (let i = 0; i < this.length; i++) {
        newArray.push(callback(this[i], i, this));
    }
    productResult.innerHTML = product;
 }

 function addInput(event) {
    let d = document.createElement('p');
    d.innerHTML =
        'number: <input type="number" name="number" class="number" value="0" /><button class="xButton">X</button> </br>';
    numberContainer.appendChild(d);
    updateResults(event);
 }

 function remove(event) {
    if (event.target.matches('.xButton')) {
        if (numberContainer.children.length > 2) {
            event.target.parentNode.remove();
    return newArray;
 };

 let newArray = array.selfMap(function(item, index, originalArray) {
    return item * index;
 });

 //console.log(newArray);

 // let otherArray = [1, 2, 3, 4, 5, 6];

 Array.prototype.selfFilter = function(callback) {
    let newArray = [];
    for (let i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            newArray.push(this[i]);
        }
    }
    updateResults(event);
 }
    return newArray;
 };

 function addMultipleInputs(event) {
    let amountOfInputs = document.getElementById('multipleInputs');
    for (let i = 0; i < amountOfInputs.value; i++) {
        addInput(event);
    }
 }
 // let filteredArray = otherArray.selfFilter(function(item, index, originalArray) {
 //     return item > 2;
 // });

 function updateResults(event) {
    sum(event);
    product(event);
 }
 //oef 1
 let otherArray = [1, 2, 3, 4, 5, 6];

 function buttonClicked(event) {
    if (event.target.matches('#addMultipleInput')) {
        addMultipleInputs(event);
    }
    if (event.target.matches('#addInput')) {
        addInput(event);
 let filteredArray = otherArray.selfFilter(function(item, index, originalArray) {
    return item % 2 === 0;
 });
 console.log(filteredArray);

 //oef 2
 let letterArray = ['a', 'b', 'c'];
 let newLetter = letterArray.selfMap(function(item, index, originalArray) {
    return item.toUpperCase();
 });
 console.log(newLetter);

 //oef 3
 let numberArray = [1, 2, 3];
 let letters = numberArray.selfMap(function(item, index, originalArray) {
    return item.toString();
 });
 console.log(letters);

 //oef 4
 let personArray = [
    { name: 'Tom', age: 5 },
    { name: 'Ben', age: 6 },
    { name: 'Charly', age: 2 },
 ];

 let newPersonArray = personArray.selfMap(function(item, index, originalArray) {
    return item.name;
 });

 console.log(newPersonArray);

 //oef 5
 let newPersonFilteredArray = personArray.selfFilter(function(
    item,
    index,
    originalArray
 ) {
    return item.age > 4;
 });
 console.log(newPersonFilteredArray);

 //oef 6

 let combination = newPersonFilteredArray.map(function(
    item,
    index,
    originalArray
 ) {
    return item.name;
 });
 console.log(combination);

 //oef 7

 let actorArray = [
    {
        name: 'Angelina Jolie',
        age: 80,
    },
    {
        name: 'Eric Jones',
        age: 2,
    },
    {
        name: 'Paris Hilton',
        age: 5,
    },
    {
        name: 'Kayne West',
        age: 16,
    },
    {
        name: 'Bob Ziroll',
        age: 100,
    },
 ];

 let actorsChanged = actorArray.selfMap(function(item, index, originalArray) {
    if (item.age > 18) {
        return item.name + 'can go to The Matrix';
    }
    if (event.target.matches('.xButton')) {
        remove(event);
    return item.name + 'is under age!!';
 });
 console.log(actorsChanged);

 let reduceArray = [1, 2, 3, 4];

 let sumOfArray = reduceArray.reduce(function(result, item) {
    return result + item;
 }, 0);

 console.log(sumOfArray);

 Array.prototype.selfReduce = function(callback, initialValue) {
    let result = initialValue;
    for (let i = 0; i < this.length; i++) {
        result = callback(result, this[i], index, this);
    }
 }
    return result;
 };

 let randomWordArray = ['hier', 'is', 'een', 'array', 'met', 'woorden'];

 let reducedString = randomWordArray.reduce(function(result, item) {
    if (!result) return item;

    return result + ' ' + item;
 }, '');

 console.log(reducedString);

 let reducedNumber = actorArray.reduce(function(result, item) {
    return result + item.age;
 }, 0);

 main.addEventListener('input', updateResults);
 main.addEventListener('click', buttonClicked);
 console.log(reducedNumber);
--- a/12-array_methods/styles/main.css
+++ b/12-array_methods/styles/main.css
@@ -1,41 +0,0 @@
 body {
    margin: 0;
 }

 header {
    background-color: lightseagreen;
    height: 140px;
 }

 main {
    padding-left: 15%;
    padding-right: 15%;
 }

 header h1 {
    padding-left: 15%;
    padding-top: 50px;
    margin: 0;
    color: beige;
    font-weight: bold;
    font-size: 30px;
 }

 form p {
    float: right;
    margin-top: 0;
    padding-left: 10px;
 }

 textarea {
    margin-top: 50px;
    width: 100%;
    height: 300px;
 }

 .resultBlock {
    margin-top: 20px;
    padding-left: 15px;
    border: thin grey solid;
    height: 50px;
 }