HackYourFuture · whiteststar · Mar 17, 2019 · Mar 17, 2019 · Mar 17, 2019 · Apr 27, 2019
diff --git a/Week1/JS2-1.key b/Week1/JS2-1.key
diff --git a/Week1/JS2-1.pdf b/Week1/JS2-1.pdf
diff --git a/Week1/exercise/w1/index.html b/Week1/exercise/w1/index.html
@@ -0,0 +1,38 @@
+<!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" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    <h1>Hack your future</h1>
+    <h2>JS2 - exercise 1</h2>
+
+    <div>
+      <div>
+        <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="lights" id="imageToChange" />
+      </div>
+
+      <div>
+        <input type="text" id="imageInput" />
+        <button id="btn-changeImage">Change Image</button>
+      </div>
+
+      <div>
+        <h3>Todos:</h3>
+        <ul id="todoList">
+          <li>Hack the future</li>
+          <li>Learn javascript</li>
+          <li>Take over the world</li>
+        </ul>
+        <input type="text" id="todoInput" />
+        <button id="btn-addTodo">Add todo</button>
+      </div>
+    </div>
+  </body>
+
+  <script src="index.js"></script>
+</html>
diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js
@@ -0,0 +1,65 @@
+console.log('Hack your future, right?!');
+
+const header = document.querySelector('h1');
+console.log('header: ', header);
+
+// document.querySelector('button id="btn-changeImage"');
+//exercise 1:
+const botton1 = document.getElementById("btn-changeImage")
+
+botton1.addEventListener('click', function() {
+    console.log('it is selected');
+    }
+)
+
+const changeIt = () => {
+    const old = document.getElementById("imageToChange");
+    console.log(old);
+    const newurl = document.getElementById("imageInput").value;
+    console.log(newurl);
+    old.src = newurl;
+}
+
+botton1.addEventListener('click' , changeIt)
+
+// Exercise 2:
+
+const botton2 = document.querySelector('#btn-addTodo');
+
+const addtodo = () => {
+    var todoList = document.getElementById('todoList');
+    const todoInput = document.querySelector('#todoInput');
+    console.log(todoInput.value);   
+    var todoElement = document.createElement('li');
+    todoElement.innerHTML = todoInput.value;
+    todoList.appendChild(todoElement);
+    todoInput.value = ''; //after clicking' the text input should disappear, i think...
+}
+
+botton2.addEventListener('click' , addtodo)
+
+
+// EXERCISE:
+// select "change image" button (querySelector)
+// add click event listener
+// execute changeImage() function on click event
+// define changeImage() function
+// in this function:
+//    get image element
+//    get imageInput element
+//    log input value
+//    set image src to imageInput element value
+
+// BONUS:
+// select "add todo" button (querySelector)
+// add click event listener
+// execute addTodo() function on click event
+// define addTodo() function
+// in this function:
+//    get todoList element
+//    get todoInput element
+//    log todoInput element value
+//    create <li> element
+//    set <li> element innerHtml to todoInput value
+//    add <li> element to todoList
+// ====================================== //
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -3,9 +3,31 @@
 {
   const bookTitles = [
     // Replace with your own book titles
-    'harry_potter_chamber_secrets',
+    'the_great_gatsby',
+    'to_kill_a_mockingbird', 
+    'harry_potter_and_the_sorcerers_stone', 
+    '1984', 
+    'the_catcher_in_the_rye', 
+    'the_hobbit', 
+    'fahrenheit_451', 
+    'pride_and_prejudice', 
+    'brave_new_world', 
+    'a_wrinkle_in_time', 
   ];
 
-  // Replace with your own code
-  console.log(bookTitles);
+
+  var listContainer = document.createElement('div');
+  document.getElementsByTagName('body')[0].appendChild(listContainer);
+
+  var booklist = document.createElement('ul');
+
+
+  var itemCount = bookTitles.length;
+  for (var i = 0; i < itemCount; ++i) {
+    var listItem = document.createElement('li');
+    listItem.innerText = bookTitles[i];
+    booklist.appendchild(listItem);
+  }
+ listContainer.appendChild(booklist);  
+
 }
diff --git a/Week2/JS2-2.key b/Week2/JS2-2.key
diff --git a/Week2/JS2-2.pdf b/Week2/JS2-2.pdf
diff --git a/Week2/homework/maartjes-work.js b/Week2/homework/maartjes-work.js
@@ -1,61 +1,69 @@
 'use strict';
 
-const monday = [
-  {
-    name: 'Write a summary HTML/CSS',
-    duration: 180,
-  },
-  {
-    name: 'Some web development',
-    duration: 120,
-  },
-  {
-    name: 'Fix homework for class10',
-    duration: 20,
-  },
-  {
-    name: 'Talk to a lot of people',
-    duration: 200,
-  },
-];
-
-const tuesday = [
-  {
-    name: 'Keep writing summary',
-    duration: 240,
-  },
-  {
-    name: 'Some more web development',
-    duration: 180,
-  },
-  {
-    name: 'Staring out the window',
-    duration: 10,
-  },
-  {
-    name: 'Talk to a lot of people',
-    duration: 200,
-  },
-  {
-    name: 'Look at application assignments new students',
-    duration: 40,
-  },
-];
-
-const maartjesTasks = monday.concat(tuesday);
-const maartjesHourlyRate = 20;
-
-function computeEarnings(tasks, hourlyRate) {
-  // Replace this comment and the next line with your code
-  console.log(tasks, hourlyRate);
-}
+//exercise 2
 
-// eslint-disable-next-line no-unused-vars
-const earnings = computeEarnings(maartjesTasks, maartjesHourlyRate);
-
-// 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'}`);
+const monday = [
+    {
+      name: 'Write a summary HTML/CSS',
+      duration: 180
+    },
+    {
+      name: 'Some web development',
+      duration: 120
+    },
+    {
+      name: 'Fix homework for class10',
+      duration: 20
+    },
+    {
+      name: 'Talk to a lot of people',
+      duration: 1.0
+    }
+  ];
+
+  const tuesday = [
+    {
+      name: 'Keep writing summary',
+      duration: 1.0
+    },
+    {
+      name: 'Some more web development',
+      duration: 180
+    },
+    {
+      name: 'Staring out the window',
+      duration: 10
+    },
+    {
+      name: 'Talk to a lot of people',
+      duration: 1.0
+    },
+    {
+      name: 'Look at application assignments new students',
+      duration: 40
+    }
+  ];
+
+     const allTasks = monday.concat(tuesday);
+
+    const MaartjesHourlyPayment = 20;
+
+    function salary(tasks, hourlyPayment) {
+
+      const taskDuration = tasks.map(x =>x.duration);
+      const payableHours = taskDuration.filter(y => y > 119);  //exclude less then 2 hours. No special codding added for 1.0 hours format, because there are no 2.0 hours:)
+      const total = (accumulator, currentValue) => accumulator + currentValue;
+      const totalInHours = payableHours.reduce(total);
+      const paymentRaw = totalInHours/60*20;
+      var payment = paymentRaw.toFixed(2);
+      return payment;
+    }
+
+    const earned = salary(allTasks, MaartjesHourlyPayment);
+
+    console.log(`Maartje has made €${earned}. Good Job.`);
+
+
 
 // Do not change or remove anything below this line
 module.exports = {

diff --git a/Week2/homework/map-filter.js b/Week2/homework/map-filter.js
@@ -1,15 +1,14 @@
 'use strict';
 
-function doubleOddNumbers(numbers) {
-  // Replace this comment and the next line with your code
-  console.log(numbers);
-}
+// exercise 1, double odd 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 oddNumbers = myNumbers.filter(n => n % 2 !==0);
+
+const newNumbers = oddNumbers.map(x => x * 2);
+
+console.log(newNumbers); // => [2, 6]
+
+
+
diff --git a/Week3/JS2-3.key b/Week3/JS2-3.key
diff --git a/Week3/JS2-3.pdf b/Week3/JS2-3.pdf