senneDM
/
Frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

finished

11-EX05
senne 4 years ago
parent
6f8b91a02f
commit
b3b16bb8ec
6 changed files with 234 additions and 9 deletions
Split View Show Diff Stats
  1. 2
    2
      11-EX05/index.html
  2. 8
    7
      11-EX05/scripts/main.js
  3. 6
    0
      12-array_methods/.prettierrc
  4. 18
    0
      12-array_methods/index.html
  5. 200
    0
      12-array_methods/scripts/main.js
  6. 0
    0
      12-array_methods/styles/main.css

+ 2
- 2
11-EX05/index.html View File

@@ -13,8 +13,8 @@
</header>

<form action="submit" id="form">
<span>number: <input type="number" value="0"><button class="xButton">x</button></span><br>
<span>number: <input type="number" value="0"><button class="xButton">x</button></span><br>
<span>number: <input type="number" value="0"><button class="xButton">x</button><br></span>
<span>number: <input type="number" value="0"><button class="xButton">x</button><br></span>
</form>
<button id="addButton" class="submit">add input</button>
<div id="banner">

+ 8
- 7
11-EX05/scripts/main.js View File

@@ -2,6 +2,11 @@ const form = document.getElementById('form');
const addButton = document.getElementById('addButton');
const textField = document.getElementById('textField');

let xButtons = document.querySelectorAll('.xButton');
xButtons.forEach(function(element) {
element.style.display = 'none';
});

function addInput(event){
event.preventDefault();
//elementen aanmaken
@@ -16,9 +21,9 @@ function addInput(event){
var newBreak = document.createElement('br');
//child toevoegen
newButton.appendChild(buttonText);
newSpan.append(spanText,newInput,newButton);
newSpan.append(spanText,newInput,newButton,newBreak);
form.appendChild(newSpan);
form.appendChild(newBreak);
}

@@ -26,12 +31,8 @@ function deleteInput(event){
event.preventDefault();
if(event.target.matches('.xButton')){
if(form.children.length > 2){
console.log(form.children.length);
event.target.closest('span').remove();
}else{
xButtons = document.getElementsByClassName('.xButton');
xButtons.forEach(element => {
element.style.display = 'none';
});
}
}

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

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

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

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/main.css">
<title>array_methods</title>
</head>
<body>
</div>

<script src="scripts/main.js"></script>
</body>
</html>

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

@@ -0,0 +1,200 @@
let array = [1,2,3,4];

//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);
}
}
array.selfForEach(function(item, index, originalArray){
console.log(item);
console.log(index);
console.log(originalArray);
})

//map

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

Array.prototype.selfMap = function(callback){
let ziekeArray = [];
for(let i = 0; i < this.length; i++){
ziekeArray.push(callback(this[i],i,this)); //callback is eigenlijk de uitkomst van een functie.
}
return ziekeArray;
}

//filter

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

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

Array.prototype.selfFilter = function(callback){
let ziekeArray = [];
for(let i = 0; i < this.length;i++){
if(callback(this[i],i,this)){ //kijken of de conditie van de callback true is
ziekeArray.push(this[i]);
}
}
return ziekeArray;
}
// oef 1 [1,2,3,4,5,6] => [2,4,6]
let evenArray = otherArray.filter(function(item,index,originalArray){
return item % 2 == 0;
})

console.log(evenArray);

//oef 2 ['a','b','c'] => ['A','B','C']
let letterArray = ['a','b','c'];
let capitalArray = letterArray.map(function(item,index,originalArray){
return item.toUpperCase();
});
console.log(capitalArray);

//oef 3 [1,2,3] => ['1','2','3']
let simpeleArray = [1,2,3];
let stringArray = simpeleArray.map(function(item,index,originalArray){
return item.toString();
});
console.log(stringArray);
//oef4 [
// {name: 'tom', age: 5},
// {name: 'ben', age: 6},
// {name: 'charly', age: 2},
// ];
// => ['tom','ben','charly']
let objectArray = [
{name: 'tom', age: 5},
{name: 'ben', age: 6},
{name: 'charly', age: 2},
];
let nameArray = objectArray.map(function(item,index,originalArray){
return item.name;
});
console.log(nameArray);
//oef 5
// enkel ouder dan 4
// {name: 'tom', age: 5},
// {name: 'ben', age: 6},
// {name: 'charly', age: 2},
// ];
// =>
// [
// {name: 'tom', age: 5},
// {name: 'ben', age: 6},
//]
let objectArray2 = [
{name: 'tom', age: 5},
{name: 'ben', age: 6},
{name: 'charly', age: 2},
];
let nameArray2 = objectArray2.filter(function(item,index,originalArray){
return item.age > 4;
});
console.log(nameArray2);
// oef 6
// combinatie van vorige 2
// [
// { name: 'Tom', age: 5 },
// { name: 'Ben', age: 6 },
// { name: 'Charly', age: 2 },
// ];
// =>
//[ 'Tom', 'Ben' ];
let nameArray3 = nameArray2.map(function(item,index,originalArray){
return item.name;
});
console.log(nameArray3);
//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
// }
// ];
// =>
// [
// "Angelina Jolie can go to The Matrix",
// "Eric Jones is under age!!",
// "Paris Hilton is under age!!",
// "Kayne West is under age!!",
// "Bob Ziroll can go to The Matrix"
// ]
let ex7 = [
{
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
}
].map(function(item){
if(item.age >= 18){
return item.name + ' can go to the matrix';
}
return item.name + ' is under age!!!';
});

console.log(ex7);


//reduce

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

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

//oef 8 join van stringarray

let ex8 = ['ik','ben','tof'].reduce(function(result,item){
if(result.length === 0){
return item;
}
return result + item;
},"");
console.log(ex8);

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


Write Preview
Loading…
Cancel
Save