JessyBruyneel
/
FrontEnd
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge commit '85a70b34acdee359474e2fbbc398ec3a9bb0d39f'

master
Jessy Bruyneel 4 years ago
parent
b69f8495ea 85a70b34ac
commit
39f8e1ebcd
8 changed files with 386 additions and 1 deletions
Split View Show Diff Stats
  1. 27
    1
      11-EX05/index.html
  2. 59
    0
      11-EX05/scripts/main.js
  3. 36
    0
      11-EX05/styles/main.css
  4. 6
    0
      12-array_methods/.prettierrc
  5. 12
    0
      12-array_methods/index.html
  6. 75
    0
      12-array_methods/scripts/help.js
  7. 171
    0
      12-array_methods/scripts/main.js
  8. 0
    0
      12-array_methods/styles/main.css

+ 27
- 1
11-EX05/index.html View File

@@ -3,7 +3,33 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<title>11-EX05</title>
</head>
<body></body>
<body>
<header>
<h1>Calculator</h1>
</header>

<form action="#" id="input">
<div id="input-container">
<div class="input-field">
<input type="number" /><input type="button" value="X" />
</div>
<div class="input-field">
<input type="number" /><input type="button" value="X" />
</div>
</div>
<div id="submit-container">
<input type="button" name="calculate" value="calculate" />
<input type="button" name="add-input" value="add input" />
</div>
</form>

<div class="container" id="result">
<p id="sum">sum:</p>
<p id="product">product:</p>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

+ 59
- 0
11-EX05/scripts/main.js View File

@@ -0,0 +1,59 @@
const form = document.getElementById('input');
const inputContainer = document.getElementById('input-container');
const submitContainer = document.getElementById('submit-container');
let sumResult = document.getElementById('sum');
let productResult = document.getElementById('product');
let input = form.querySelectorAll('.input-field');

function addInputField(event) {
let newField = document.createElement('div');
newField.classList.add('input-field');
newField.innerHTML =
'<input type="number" /><input type="button" value="X" />';
inputContainer.appendChild(newField);
}

function removeInputField(event) {
if (event.target.matches('input[type=button]')) {
let element = event.target.closest('div');
if (element.parentNode.childElementCount > 2) {
// https://www.w3schools.com/jsref/prop_element_childelementcount.asp
element.parentNode.removeChild(element);
// https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript
}
}
}

function calculateSum(array) {
let result = 0;
array.forEach(element => {
result += parseInt(array[element].value);
});
sumResult.innerHTML = 'sum: ' + result;
}

function calculateProduct(array) {
let result = 0;
array.forEach(element => {
result *= parseInt(array[element].value);
});
productResult.innerHTML = 'product: ' + result;
}

function updateResults(event) {
if (
event.target.matches('input[type="number"]') ||
event.target.matches('input[name="calculate"]')
) {
let input = form.querySelectorAll('.input-field');
calculateSum(input);
calculateProduct(input);
}
if (event.target.matches('input[name="add-input"]')) {
addInputField();
}
}

form.addEventListener('input', updateResults);
form.addEventListener('click', updateResults);
submitContainer.addEventListener('click', removeInputField);

+ 36
- 0
11-EX05/styles/main.css View File

@@ -0,0 +1,36 @@
html {
font-family: sans-serif;
margin: 0;
width: 100%;
}

header {
background-color: rgb(255, 120, 0);
margin: 0 0 2rem 0;
height: 6rem;
}

h1 {
padding: 2rem;
color: blue;
}

p {
margin 0;
}

form {
display: flex;
flex-direction: column;
width: 30%;
}

input {
margin: 2px;
}

.container {
padding: 0 0 0 5px;
margin-top: 5px;
border: 1px solid black;
}

+ 6
- 0
12-array_methods/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 12
- 0
12-array_methods/index.html View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<title>12-array_methods</title>
</head>
<body>
<script src="scripts/main.js"></script>
</body>
</html>

+ 75
- 0
12-array_methods/scripts/help.js View File

@@ -0,0 +1,75 @@
let array = [4, 8, 12, 16];

// foreach
// array.forEach(function(item) {
// console.log(item);
// });

Array.prototype.selfForEach = function(callback) {
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
};

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

array.selfForEach(forEachCallback);

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

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

function mapCallback(item, index, originalArray) {
return item * 2;
}

let newArray = array.selfMap(mapCallback);
console.log(newArray);

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

// let filteredArray = otherArray.filter(funtion(item, index, originalArray) {
// return item > 2;
// });

Array.prototype.selfFilter = function(callback) {
let filtered = [];

for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
filtered.push(this[i]);
}
}
return filtered;
};

let filteredArray = otherArray.selfFilter(filterCallback);

Array.prototype.selfReduce = function(callback, init) {
let result = init;

for (let i = 0; i < this.length; i++) {
result = callback(result, this[i], i, this);
}
return result;
};

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

let result = array.selfReduce(function(result, item) {
return result + item;
}, 0);

console.log(result);

+ 171
- 0
12-array_methods/scripts/main.js View File

@@ -0,0 +1,171 @@
// oef 1
// [1, 2, 3, 4, 5, 6, 7] => [2, 4, 6]

let array = [1, 2, 3, 4, 5, 6, 7];

array = array.filter(function(item) {
return item % 2 === 0;
});

console.log(array);

// oef 2
// ['a', 'b', 'c'] => ['A', 'B', 'C']

array = ['a', 'b', 'c'];

array = array.map(function(item) {
return item.toUpperCase();
});

console.log(array);

// oef 3
// [1, 2, 3] => ['1', '2', '3']

array = [1, 2, 3];

array = array.map(function(item) {
return item.toString();
});

console.log(array);

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

array = [
{ name: 'Tom', age: 5 },
{ name: 'Ben', age: 6 },
{ name: 'Charly', age: 2 },
];

array = array.map(function(item) {
return item.name;
});

console.log(array);

// oef 5
// enkel ouder dan 4
// [
// {name: 'Tom', age: 5},
// {name: 'Ben', age: 6},
// {name: Charly, age: 2},
// ];

array = [
{ name: 'Tom', age: 5 },
{ name: 'Ben', age: 6 },
{ name: 'Charly', age: 2 },
];

array = array.filter(function(item) {
return item.age > 4;
});

console.log(array);

// oef 6
// enkel de namen van wie ouder is dan 4
// [
// {name: 'Tom', age: 5},
// {name: 'Ben', age: 6},
// {name: Charly, age: 2},
// ];

array = [
{ name: 'Tom', age: 5 },
{ name: 'Ben', age: 6 },
{ name: 'Charly', age: 2 },
];

array = array
.filter(function(item) {
return item.age > 4;
})
.map(function(item) {
return item.name;
});

console.log(array);

// oef 7
// voor plus 18 add naam + "can go to the matrix!"
// min 18 add naam + "is under age!!
// [
// {
// 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
// }
// ];

array = [
{ 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 },
];

array = array.map(function(item) {
if (item.age > 18) {
return item.name + ' can go to the matrix!';
} else {
return item.name + ' is under age!';
}
});

console.log(array);

// oef 8
// een join schrijven met array reduce functie

array = ['ik', 'ben', 'toffer', 'dan', 'Senne'];

array = array.reduce(function(result, item) {
if (!result) {
return item;
}
return result + ' ' + item;
}, false);

console.log(array);

// oef 9
// de som van de leeftijden van oefening 7

array = [
{ 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 },
];

array = array.reduce(function(result, item) {
return result + item.age;
}, false);

console.log(array);

+ 0
- 0
12-array_methods/styles/main.css View File


Write Preview
Loading…
Cancel
Save