Week3

Week1/exercise/w1/index.js

@@ -3,13 +3,17 @@ console.log('Hack your future Belgium!');
 // EXERCISE 1
 
 // 1a: create a function called "changeHeader", put a console.log() inside this function to test
-
+// 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
 // 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 changeHeader(){
+    console.log("change Header function");
+    header.innerHTML = "SALIHA";
+}
+var header = document.querySelector('h1');
+header.addEventListener('click', changeHeader);
 
 
 // ====================================== //
@@ -18,33 +22,46 @@ console.log('Hack your future Belgium!');
 // EXERCISE 2
 
 // 2a: create a function called "changeImage", put a console.log() inside this function to test
-
 // 1b: add an event listener to the "Change image" button and call the "changeImage" function when clicked
-
 // inside this function:
-
 // 2c: select the "imageInput" element and assign to a variable called "imageInputValue"
-
 // 2d: select the image element and assign to a variable called "imageToChange"
-
 // 2e: to change the image: assign the imageInputValue to the image src
 
+function changeImage(){
+    console.log("change Image function");
+    var imageInputValue = document.querySelector('#imageInput');
+    var imageToChange = document.querySelector('#imageToChange');
+    imageToChange.src = imageInputValue.value;
+}
+
+var buttonChangeImage = document.querySelector('#btn-changeImage');
+buttonChangeImage.addEventListener('click', changeImage);
+
+
 
 // ====================================== //
 
 
 // Exercise 3:
 
 // 3a: select "add todo" button & add click event listener to execute addTodo() function on click event
-
 // 3b: define addTodo() function, in this function:
-
 // 3c: get todoList element
-
 // 3d: get todoInput element & log todoInput value
-
 // 3e: create a <li> element
-
 // 3f: set created <li> element innerHtml to todoInput value
-
 // 3g: add <li> element to todoList
+
+
+var toDoButton = document.querySelector('#btn-addTodo');
+toDoButton.addEventListener('click', addTodo);
+
+function addTodo(){
+    var toDoList = document.querySelector('#todoList');
+    var newToDo = document.querySelector('#todoInput');
+    var newLi = document.createElement("li");
+    newLi.innerHTML = newToDo.value;
+    toDoList.appendChild(newLi);
+}
+

Week1/homework/app.js

@@ -1,11 +1,62 @@
 'use strict';
 
+
+
 {
   const bookTitles = [
     // Replace with your own book titles
-    'harry_potter_chamber_secrets',
+    'sapiens', 'hyde_and_jekyll', 'chess', 'les_miserables', 'frankenstein', 'the_little_prince', 'anne_of_green_gables', 'the_kite_runner', 'son_ada', 'calikusu'
   ];
+
+  const bookTitlesObj = { sapiens: {title:'Sapiens', language:'English', author:'Yuval Noah Harari'},
+                          hyde_and_jekyll: {title: "Dr Jekyll and Mr Hyde", language: "English", author: "Robert Louis Stevenson"},
+                          chess: {title: "Chess", language: "German", author: "Stefan Zweig"},
+                          les_miserables: {title: "Les Miserables", language: "French", author: "Victor Hugo"},
+                          frankenstein: {title: "Frankenstein", language: "English", author: "Mary Shelley"},
+                          the_little_prince: {title: "Le Petit Prince", language: "French", author: "Antoine de Saint-Exupéry"},
+                          anne_of_green_gables: {title: "Anne of Green Gables", language: "English", author: "Lucy Maud Montgomery"},
+                          the_kite_runner: {title: "The Kite Runner", language: "English", author: "Khaled Hosseini"},
+                          son_ada: {title: "Son Ada", language: "Turkish", author: "Zulfu Livaneli"},
+                          calikusu: {title: "Calikusu", language: "Turkish", author: "Resat Nuri Guntekin"}
+                        }
+const imgTitles = { sapiens: "./img/sapiens.jpg",
+                    hyde_and_jekyll: "./img/hyde_and_jekyll.jpg",
+                    chess: "./img/chess.jpg",
+                    les_miserables: "./img/les_miserables.jpg",
+                    frankenstein: "./img/frankenstein.jpg",
+                    the_little_prince: "./img/the_little_prince.jpg",
+                    anne_of_green_gables: "./img/anne_of_green_gables.jpg",
+                    the_kite_runner: "./img/the_kite_runner.jpg",
+                    son_ada: "./img/son_ada.jpg",
+                    calikusu: "./img/calikusu.jpg"
+                  }
+
+
+  function book_info ( arr_parameter, obj_parameter, img_obj ){
+    let myUl = document.createElement("ul");
+    for(let i in arr_parameter){
+      let newLi = document.createElement("li");
+      newLi.id = arr_parameter[i];
+
+      let newH1 = document.createElement("h1");
+      newH1.innerHTML = obj_parameter[arr_parameter[i]].title;
+      let newH2 = document.createElement("h2");
+      newH2.innerHTML = obj_parameter[arr_parameter[i]].language;
+      let newH3 = document.createElement("h3");
+      newH3.innerHTML = obj_parameter[arr_parameter[i]].author;
+      let newImg = document.createElement("img");
+      newImg.src = img_obj[arr_parameter[i]];
+
+      newLi.appendChild(newH1);
+      newLi.appendChild(newH2);
+      newLi.appendChild(newH3);
+      newLi.appendChild(newImg);
+      myUl.appendChild(newLi);
+    }
+    document.body.appendChild(myUl);
+  }
+
+
+  book_info(bookTitles, bookTitlesObj, imgTitles);
 
-  // Replace with your own code
-  console.log(bookTitles);
 }

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>Document</title>
+  </head>
+  <body>
+  </body>
+  <script src="app.js"></script>
+</html>

Week1/homework/style.css

@@ -1 +1,75 @@
-/* add your styling here */
+/* add your styling here */
+
+/* add your styling here */
+
+body{
+    padding: 0;
+    margin: 0;
+    background: rgb(236,237,234);
+}
+
+
+ul {
+    list-style: none;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    padding: 0;
+    margin: auto;
+    width: 50em;
+}
+
+li{
+    background:  #D8D8CF ;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-template-rows: 40% 30% 30%;
+    height: 15em;
+
+    padding: 1em;
+    border: solid  rgb(236,237,234) ;
+    border-radius: 30px 30px 30px 30px;   
+}
+
+li:first-of-type{
+    border-radius: 5px 30px 30px 30px;    
+}
+
+li:nth-of-type(2){
+    border-radius: 30px 5px 30px 30px;    
+}
+
+li:nth-last-of-type(2){
+    border-radius: 30px 30px 30px 5px;   
+}
+
+li:last-of-type{
+    border-radius: 30px 30px 5px 30px;    
+}
+
+
+h1{
+    size: 3em;
+}
+
+h1,h2,h3{
+    text-align: center;
+    margin: auto;
+    color: rgb(5, 44, 85) ;
+
+}
+img{
+    grid-row-start: 1;
+    grid-row-end: 3;
+    grid-column-start: 2;
+    grid-column-end: 3;
+
+    width:auto; 
+    height:14em;
+
+    display: block;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    margin-right: 0;
+    margin-left: auto;
+
+}

Week2/array_exercises/index.js

@@ -0,0 +1,48 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable lines-around-directive */
+/* eslint-disable no-empty */
+/* eslint-disable no-unused-vars */
+/* eslint-disable prefer-const */
+'use strict';
+
+{
+  function getTheFirstElement(array, number) {
+    return array.splice(0, number);
+  }
+
+  function mostFrequent(array) {
+    let count = 0;
+    let toReturnIndex = 0;
+    for (let i in array) {
+      let b = array.filter(elem => elem === array[i]).length;
+      if (b > count) {
+        count = b;
+        toReturnIndex = i;
+      }
+    }
+    return array[toReturnIndex];
+  }
+
+  function evenDashes(numb) {
+    let numArr = numb.split('');
+    for (let i = 0; i < numArr.length; i++) {
+      if (numArr[i] % 2 === 0 && numArr[i + 1] % 2 === 0) {
+        numArr.splice(i + 1, 0, '-');
+        i++;
+      }
+    }
+    return numArr.join('');
+  }
+
+  function swapCase(string) {
+    let str = string.split('');
+    return str
+      .map(elem => {
+        if (elem === elem.toUpperCase()) {
+          return elem.toLowerCase();
+        }
+        return elem.toUpperCase();
+      })
+      .join('');
+  }
+}

Week2/homework/maartjes-work.js

@@ -46,16 +46,21 @@ 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);
+  let earning = 0;
+  let filteredArray = tasks.filter(elem => elem.duration/60 >= 2)
+  let earningArray = filteredArray.map(elem => elem.duration*hourlyRate/60);  
+  for(let i in earningArray){
+    earning += earningArray[i];
+  }
+  return earning;
 }
 
 // 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'}`);
+console.log(`Maartje has earned €${parseFloat(earnings).toFixed(2)}`);
 
 // Do not change or remove anything below this line
 module.exports = {

Week2/homework/map-filter.js

@@ -1,8 +1,7 @@
 'use strict';
 
 function doubleOddNumbers(numbers) {
-  // Replace this comment and the next line with your code
-  console.log(numbers);
+    return numbers.filter(num => num%2 === 1).map(num => num*2);
 }
 
 const myNumbers = [1, 2, 3, 4];

Week2/json_exercises/index.js

@@ -0,0 +1,21 @@
+'use strict';
+{
+function obj_length(obj) {
+  return Object.keys(obj).length;
+}
+
+function obj_prop_check(obj, prop) {
+  return obj.hasOwnProperty(prop);
+}
+
+function clock() {
+  var date = new Date();
+  var h = date.getHours();
+  var m = date.getMinutes();
+  var s = date.getSeconds();
+
+  var time = h + ':' + m + ':' + s;
+  console.log(time);
+  setTimeout(clock, 1000);
+}
+}

Week3/Form/index.css

@@ -0,0 +1,14 @@
+div {
+  background-color: blue;
+}
+
+button {
+  background-color: yellow;
+}
+
+input {
+  background-color: purple;
+}
+input:checked {
+  background-color: brown;
+}

Week3/Form/index.html

@@ -0,0 +1,16 @@
+<!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="index.css" />
+    <title>Document</title>
+  </head>
+
+  <body>
+    <div id="one"></div>
+  </body>
+
+  <script src="index.js"></script>
+</html>