Week2 homework

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:
 

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

Week1/homework/index.html

@@ -1 +1,14 @@
-<!-- replace this with your HTML content -->
+<!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="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My books list</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body></body>
+  <script src="app.js"></script>
+</html>

Week1/homework/style.css

@@ -1 +1,35 @@
-/* add your styling here */
+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;
+}

Week2/homework/JSON & Arrays/exercises.html

@@ -0,0 +1,10 @@
+<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" />
+    <title>Exercises</title>
+  </head>
+  <body></body>
+  <script src="./script.js"></script>
+</html>

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

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);

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]