diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js
index fcea7032e..290a10745 100644
--- a/Week1/exercise/w1/index.js
+++ b/Week1/exercise/w1/index.js
@@ -1,19 +1,34 @@
console.log('Hack your future Belgium!');
+function changeHeader() {
+ console.log('test');
+ header.innerHTML = 'ramzi';
+}
+const header = document.querySelector('h1');
+
+header.addEventListener('click', changeHeader);
+document.getElementById('btn-header').addEventListener('click', changeHeader);
// EXERCISE 1
-// 1a: create a function called "changeHeader", put a console.log() inside this function to test
+// 1a: create a functi[on called "changeHeader", put a console.log() inside this function to test
-// 1d: add an event listener to the "Change header" button
+// 1d: add an event listener to the "Change header" button
// and call the "changeHeader" function when clicked ( you should see your console.log() )
// 1b: inside this function: select the header element and assign that to a variable called "header"
// 1c: change the inner html of the header element to your name
-
// ====================================== //
+function changeImage() {
+ var imageInputValue = document.getElementById('imageInput');
+ var imageToChange = document.querySelector('img');
+ console.dir(imageInputValue);
+ imageToChange.src = imageInputValue.value;
+}
+
+document.getElementById('btn-changeImage').addEventListener('click', changeImage);
// EXERCISE 2
@@ -29,9 +44,19 @@ console.log('Hack your future Belgium!');
// 2e: to change the image: assign the imageInputValue to the image src
-
// ====================================== //
+function addTodo() {
+ var todolist = document.getElementById('todoList');
+ var todo_input = document.querySelector('#todoInput');
+ //the above one its the same of document.getElementById ('todoInput')
+ console.log(todoInput.value);
+ var element_li = document.createElement('li');
+ element_li.innerHTML = todo_input.value;
+ todolist.appendChild(element_li);
+}
+
+document.getElementById('btn-addTodo').addEventListener('click', addTodo);
// Exercise 3:
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
index a9b5f75d8..df5ee07f9 100644
--- a/Week1/homework/app.js
+++ b/Week1/homework/app.js
@@ -3,9 +3,103 @@
{
const bookTitles = [
// Replace with your own book titles
- 'harry_potter_chamber_secrets',
+ 'brave_new_world',
+ 'the_moonstone',
+ 'little_women',
+ 'three_men_in_boat',
+ 'the_sign_of_four',
+ 'new_grub_street',
+ 'jude_the_obscure',
+ 'heart_of_darkness',
+ 'sister_carrie',
+ 'the_rainbow',
];
+ const bookData = {
+ brave_new_world: {
+ title: 'Brave new world',
+ author: 'Aldous Huxley',
+ language: 'English',
+ image: './images/brave_new_world.jpg',
+ },
+ the_moonstone: {
+ title: 'The moonstone',
+ author: 'Wilkie Collins',
+ language: 'Italian',
+ image: './images/the_moonstone.jpg',
+ },
+ little_women: {
+ title: 'Little women',
+ author: 'Louisa May Alcott',
+ language: 'French',
+ image: './images/little_women.jpg',
+ },
+ three_men_in_boat: {
+ title: 'Three men in a boat',
+ author: 'Jerome K Jerome',
+ language: 'English',
+ image: './images/three_men_in_boat.jpg',
+ },
+ the_sign_of_four: {
+ title: 'The sign of four',
+ author: 'Arthur Conan Doyle',
+ language: 'French',
+ image: './images/the_sign_of_four.jpg',
+ },
+ new_grub_street: {
+ title: 'New grub street',
+ author: 'George Gissing',
+ language: 'English',
+ image: './images/new_grub_street.jpg',
+ },
+ jude_the_obscure: {
+ title: 'Jude the obscure',
+ author: 'Thomas Hardy',
+ language: 'Dutch ',
+ image: './images/jude_the_obscure.jpg',
+ },
+ heart_of_darkness: {
+ title: 'Heart of darkness',
+ author: 'Joseph Conrad',
+ language: 'Turkish',
+ image: './images/heart_of_darkness.jpg',
+ },
+ sister_carrie: {
+ title: 'Sister carrie',
+ author: 'Theodore Dreiser',
+ language: 'English',
+ image: './images/sister_carrie.jpg',
+ },
+ the_rainbow: {
+ title: 'The rainbow',
+ author: 'DH Lawrence',
+ language: 'Spanish',
+ image: './images/the_rainbow.jpg',
+ },
+ };
+
// Replace with your own code
- console.log(bookTitles);
+ function book_data() {
+ const book_ul = document.createElement('ul');
+
+ for (let i in bookTitles) {
+ const book_li = document.createElement('li');
+ const book_title = document.createElement('h1');
+ const book_author = document.createElement('p');
+ const book_language = document.createElement('p');
+ const book_cover = document.createElement('img');
+ book_title.innerHTML = bookData[bookTitles[i]].title;
+ book_author.innerHTML = bookData[bookTitles[i]].author;
+ book_language.innerHTML = bookData[bookTitles[i]].language;
+ book_cover.src = bookData[bookTitles[i]].image;
+ book_li.appendChild(book_cover);
+ book_li.appendChild(book_title);
+ book_li.appendChild(book_author);
+ book_li.appendChild(book_language);
+ book_ul.appendChild(book_li);
+ }
+ document.body.appendChild(book_ul);
+ }
+
+ book_data();
}
diff --git a/Week1/homework/images/brave_new_world.jpg b/Week1/homework/images/brave_new_world.jpg
new file mode 100644
index 000000000..e32998e80
Binary files /dev/null and b/Week1/homework/images/brave_new_world.jpg differ
diff --git a/Week1/homework/images/heart_of_darkness.jpg b/Week1/homework/images/heart_of_darkness.jpg
new file mode 100644
index 000000000..10f5d8f93
Binary files /dev/null and b/Week1/homework/images/heart_of_darkness.jpg differ
diff --git a/Week1/homework/images/jude_the_obscure.jpg b/Week1/homework/images/jude_the_obscure.jpg
new file mode 100644
index 000000000..e90c6e0cc
Binary files /dev/null and b/Week1/homework/images/jude_the_obscure.jpg differ
diff --git a/Week1/homework/images/little_women.jpg b/Week1/homework/images/little_women.jpg
new file mode 100644
index 000000000..cffc42a00
Binary files /dev/null and b/Week1/homework/images/little_women.jpg differ
diff --git a/Week1/homework/images/new_grub_street.jpg b/Week1/homework/images/new_grub_street.jpg
new file mode 100644
index 000000000..75f3f5c7f
Binary files /dev/null and b/Week1/homework/images/new_grub_street.jpg differ
diff --git a/Week1/homework/images/sister_carrie.jpg b/Week1/homework/images/sister_carrie.jpg
new file mode 100644
index 000000000..93265853e
Binary files /dev/null and b/Week1/homework/images/sister_carrie.jpg differ
diff --git a/Week1/homework/images/the_moonstone.jpg b/Week1/homework/images/the_moonstone.jpg
new file mode 100644
index 000000000..6ba36f30b
Binary files /dev/null and b/Week1/homework/images/the_moonstone.jpg differ
diff --git a/Week1/homework/images/the_rainbow.jpg b/Week1/homework/images/the_rainbow.jpg
new file mode 100644
index 000000000..36a78b010
Binary files /dev/null and b/Week1/homework/images/the_rainbow.jpg differ
diff --git a/Week1/homework/images/the_sign_of_four.jpg b/Week1/homework/images/the_sign_of_four.jpg
new file mode 100644
index 000000000..73bbd75b4
Binary files /dev/null and b/Week1/homework/images/the_sign_of_four.jpg differ
diff --git a/Week1/homework/images/three_men_in_boat.jpg b/Week1/homework/images/three_men_in_boat.jpg
new file mode 100644
index 000000000..b29ade9a8
Binary files /dev/null and b/Week1/homework/images/three_men_in_boat.jpg differ
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
index b22147cd1..3d827503c 100644
--- a/Week1/homework/index.html
+++ b/Week1/homework/index.html
@@ -1 +1,14 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+ My books list
+
+
+
+
+
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
index bab13ec23..aba0b36c4 100644
--- a/Week1/homework/style.css
+++ b/Week1/homework/style.css
@@ -1 +1,35 @@
-/* add your styling here */
\ No newline at end of file
+body {
+ width: 1440px;
+ margin: 0 auto;
+ background-color: #fafafa;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+img {
+ width: 150px;
+ height: 200px;
+ position: absolute;
+}
+ul {
+ list-style: none;
+ display: flex;
+ flex-flow: wrap;
+}
+li {
+ display: flex;
+ flex-flow: wrap;
+ background-color: white;
+ flex-direction: column;
+ width: 40%;
+ position: relative;
+ margin: 50px;
+ height: 200px;
+ box-shadow: 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.11);
+ border: 1px solid #ededed;
+}
+
+p,
+h1 {
+ margin-left: 200px;
+ color: #585858;
+}
diff --git a/Week2/homework/JSON & Arrays/exercises.html b/Week2/homework/JSON & Arrays/exercises.html
new file mode 100644
index 000000000..299cfd3a1
--- /dev/null
+++ b/Week2/homework/JSON & Arrays/exercises.html
@@ -0,0 +1,10 @@
+
+
+
+
+
+ Exercises
+
+
+
+
diff --git a/Week2/homework/JSON & Arrays/script.js b/Week2/homework/JSON & Arrays/script.js
new file mode 100644
index 000000000..2727f8489
--- /dev/null
+++ b/Week2/homework/JSON & Arrays/script.js
@@ -0,0 +1,90 @@
+'use strict';
+// First exercise
+{
+ const fruits = ['Banana', 'Apple', 'Kiwi', 'Orange', 'Lemon', 'Strawberry'];
+
+ function first(no) {
+ var first_items = fruits.splice(0, no);
+ console.log('ARRAYS 1st exercise:', first_items);
+ }
+ // Here we are displaying the first 2 items of the array
+ first(2);
+
+ // Second exercise
+
+ var number = [2, 8, 0, 5, 7, 8, 6, 3];
+ var array = [];
+
+ function put_dash() {
+ for (var i = 0; i < number.length; i++) {
+ if (number[i] % 2 === 0 && number[i + 1] % 2 === 0) {
+ array.push(number[i], '-');
+ } else {
+ array.push(number[i]);
+ }
+ }
+ console.log('ARRAYS 2nd exercise:', array.join(''));
+ }
+ put_dash();
+}
+
+// Third exercise
+const fruits2 = ['Banana', 'Apple', 'Kiwi', 'Banana', 'Lemon', 'Banana'];
+var counts = {};
+var compare = 0;
+var mostFrequent;
+(function(array) {
+ for (var i = 0, len = array.length; i < len; i++) {
+ var word = array[i];
+
+ if (counts[word] === undefined) {
+ counts[word] = 1;
+ } else {
+ counts[word] = counts[word] + 1;
+ }
+ if (counts[word] > compare) {
+ compare = counts[word];
+ mostFrequent = fruits2[i];
+ }
+ }
+ console.log('ARRAYS 3rd exercise:', mostFrequent);
+
+ return mostFrequent;
+})(fruits2);
+
+// Fourth exercise
+
+const text = 'The Quick Brown Fox';
+let transformed_text = '';
+function swap(letter) {
+ for (let i = 0; i < letter.length; i++) {
+ if (letter[i] === letter[i].toLowerCase()) {
+ transformed_text += letter[i].toUpperCase();
+ } else {
+ transformed_text += letter[i].toLowerCase();
+ }
+ }
+ console.log('ARRAYS 4th exercise:', transformed_text);
+}
+swap(text);
+
+// Json exercises
+
+// First exercise
+const fruits3 = { Name: 'Apple', Country: 'Belgium' };
+const object_length = Object.keys(fruits3).length;
+console.log('JSON 1st exercise:', object_length);
+
+// Second exercise
+
+function clock() {
+ const day = new Date();
+ const hour = day.getHours();
+ const minute = day.getMinutes();
+ const second = day.getSeconds();
+ const time = hour + ':' + minute + ':' + second;
+ console.log('JSON 2nd exercise:', time);
+}
+
+setInterval(clock, 1000);
+clock();
diff --git a/Week2/homework/maartjes-work.js b/Week2/homework/maartjes-work.js
index 49772eb44..ea6400bf9 100644
--- a/Week2/homework/maartjes-work.js
+++ b/Week2/homework/maartjes-work.js
@@ -42,24 +42,23 @@ const tuesday = [
},
];
-const maartjesTasks = monday.concat(tuesday);
-const maartjesHourlyRate = 20;
+const tasks = monday.concat(tuesday);
-function computeEarnings(tasks, hourlyRate) {
- // Replace this comment and the next line with your code
- console.log(tasks, hourlyRate);
-}
+const durationInHours = tasks.map(x => {
+ return x.duration / 60;
+});
+console.log('Duration in hours: ' + durationInHours);
-// eslint-disable-next-line no-unused-vars
-const earnings = computeEarnings(maartjesTasks, maartjesHourlyRate);
+const moreThanTwoHours = durationInHours.filter(x => {
+ if (x >= 2) {
+ return x;
+ }
+});
+console.log('Durations more than 2 hours: ' + moreThanTwoHours);
-// add code to convert `earnings` to a string rounded to two decimals (euro cents)
-
-console.log(`Maartje has earned €${'replace this string with the earnings rounded to euro cents'}`);
-
-// Do not change or remove anything below this line
-module.exports = {
- maartjesTasks,
- maartjesHourlyRate,
- computeEarnings,
-};
+const perHourRate = moreThanTwoHours.map(x => {
+ return x * 20;
+});
+console.log('Earnings: ' + perHourRate);
+const earnings = '€' + perHourRate.reduce((a, b) => a + b, 0).toFixed(2);
+console.log('Maartje has earned: ' + earnings);
diff --git a/Week2/homework/map-filter.js b/Week2/homework/map-filter.js
index c8e8a88c1..f96a1ead0 100644
--- a/Week2/homework/map-filter.js
+++ b/Week2/homework/map-filter.js
@@ -1,15 +1,13 @@
'use strict';
-function doubleOddNumbers(numbers) {
- // Replace this comment and the next line with your code
- console.log(numbers);
-}
-
const myNumbers = [1, 2, 3, 4];
-console.log(doubleOddNumbers(myNumbers));
-// Do not change or remove anything below this line
-module.exports = {
- myNumbers,
- doubleOddNumbers,
-};
+const filtered_numbers = myNumbers.filter(x => {
+ return x % 2 !== 0;
+});
+
+const doubleOddNumbers = filtered_numbers.map(x => {
+ return x * 2;
+});
+
+console.log(doubleOddNumbers); // ==> [2, 6]