bitsagarob · bockarie · Jul 14, 2019 · Jul 14, 2019 · Jul 20, 2019 · Jul 20, 2019
diff --git a/Week1/exercise/w1/index.html b/Week1/exercise/w1/index.html
@@ -8,7 +8,7 @@
   </head>
 
   <body>
-    <h1>Hack your future</h1>
+    <h1 id="myHeadChange">Hack your future</h1>
     <h2>JS2 - exercise 1</h2>
 
     <div>
@@ -19,6 +19,7 @@ <h2>JS2 - exercise 1</h2>
       <div>
         <input type="text" id="imageInput" />
         <button id="btn-changeImage">Change Image</button>
+        <button id="btn-changeHeader">Change Header</button>
       </div>
 
       <div>

diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js
@@ -1,50 +1,91 @@
-console.log('Hack your future Belgium!');
 
-// EXERCISE 1
-
-// 1a: create a function called "changeHeader", put a console.log() inside this function to test
-
-// 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
-
-
-// ====================================== //
-
-
-// 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
-
-
-// ====================================== //
-
-
-// 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:
+window.onload = function(){
+    console.log('Hack your future Belgium!');
+
+    // EXERCISE 1
+
+    // 1a: create a function called "changeHeader", put a console.log() inside this function to test
+
+    /* function changeHeader() {
+        console.log("test 2");
+    }; */
+
+    // 1b: inside this function: select the header element and assign that to a variable called "header"
+
+    /* function changeHeader() {
+        var headerToChange = document.getElementById("myHeadChange"); 
+        console.log(headerToChange)
+    }; */
+
+    // 1c: change the inner html of the header element to your name
+
+    function changeHeader() {
+        var headerToChange = document.getElementById("myHeadChange");
+        headerToChange.innerHTML = "Melrose"
+    };
+
+    // 1d: add an event listener to the "Change header" button 
+    //and call the "changeHeader" function when clicked ( you should see your console.log() )
+    //function changeHeader(); 
+    var btn_changhead = document.getElementById("btn-changeHeader");
+    btn_changhead.addEventListener("click", function(){
+        changeHeader()
+    });
+
+
+    // EXERCISE 2
+
+    // 2a: create a function called "changeImage", put a console.log() inside this function to test
+    function changeImage(){
+        console.log("test image");
+    };
+    // 1b: add an event listener to the "Change image" button and call the "changeImage" function when clicked
+    var btn_changeImage = document.getElementById("btn-changeImage");
+    btn_changeImage.addEventListener("click", function () {
+        changeImage()
+    })
+    // inside this function:
+
+    // 2c: select the "imageInput" element and assign to a variable called "imageInputValue"
+    function changeImage() {
+        var imageInputValue = "https://www.w3schools.com/w3css/img_nature_wide.jpg"
+        var imageToChange = document.getElementById("imageToChange");
+        imageToChange.src = imageInputValue;
+    };
+
+    // 2d: select the image element and assign to a variable called "imageToChange"
+    //var imageToChange =
+    // 2e: to change the image: assign the imageInputValue to the image src
+
+
+    // Exercise 3:
+
+    // 3a: select "add todo" button & add click event listener to execute addTodo() function on click event
+    var btn_addTodo = document.getElementById("btn-addTodo");
+    btn_addTodo.addEventListener("click", function () {
+        addTodo()
+    })
+    // 3b: define addTodo() function, in this function:
+
+   /*  function addTodo(){
+        console.log("addTodo")
+    }; */
 
 // 3c: get todoList element
-
+    var todoList = document.getElementById("todoList");
 // 3d: get todoInput element & log todoInput value
-
+    var todoInput = document.getElementById("todoInput")
 // 3e: create a <li> element
-
+    var li = document.createElement("li"); 
 // 3f: set created <li> element innerHtml to todoInput value
-
+    li.innerHTML = todoInput.value
 // 3g: add <li> element to todoList
+    function addTodo() {
+        console.log("addTodo")
+        li.innerHTML = todoInput.value
+        todoList.append(li)
+    };
+}
+/* 
+// ====================================== //
+ */
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -3,9 +3,118 @@
 {
   const bookTitles = [
     // Replace with your own book titles
-    'harry_potter_chamber_secrets',
+     'les_cerises_de_salomon',
+    'kathrine_the_shrew',
+    'autre_choix',
+    'the_dog_and_the_bone',
+    'six_tales_from_shakesphere',
+    'fairy_tale_story',
+    'she_stoop_to_conquer',
+    'shylock',
+    'the_owl_and_the_pussycat',
+    'the_quick_brown_fox'
+
   ];
 
   // Replace with your own code
-  console.log(bookTitles);
+
+   var newUl = document.createElement('ul')
+  bookTitles.forEach(book => {
+    var listItem = document.createElement("li");
+    var itemText = document.createTextNode(book);
+    listItem.appendChild(itemText);
+    newUl.appendChild(listItem)
+  })
+  document.body.appendChild(newUl)
+  //create Object of books
+  book1= {
+ title: 'les_cerises_de_salomon',
+ language: 'french',
+ Author: 'Claude Raucy',
+  };
+  book2={
+    title: 'kathrine_the_shrew',
+    language: 'english',
+    author: 'shakespeare',
+  };
+  book3= {
+    title: 'autre_choix',
+    language: 'french',
+    author: 'forgot',
+  };
+  book4= {
+    title: 'the_dog_and_the_bone',
+    language: 'english',
+    author: 'forgot',
+  }
+  book5={
+    title: 'six_tales_from_shakespeare',
+    language: 'english',
+    author: 'shakespeare',
+  };
+  book5= {
+    title: 'fairy_tale_story',
+    language:'english',
+    author: 'anonymous',
+  };
+  book6= {
+    title: 'she_stoop_to_conquer',
+    language: 'english',
+    author: 'forgot',
+  };
+  book8={
+    title: 'shylock',
+    language: 'english',
+    author: 'shakespeare',
+  };
+  book9= {
+    title: 'the_owl_and_the_pussycat',
+    language: 'english',
+    author: 'anonymous',
+  };
+  book10= {
+    title: 'the_quick_brown_fox',
+    language: 'english',
+    author: 'anonymous',
+  };
+  // object of images
+
+    les_cerises_de_salomon: {
+
+      image:'./image/les_cerises_de_salomon.jpg'
+    };
+
+    kathrine_the_shrew:  {
+      image:'./image/ kathrine_the_shrew.jpg'      
+    };
+
+    autre_choix: {
+
+    image:'./image/autre_choix.jpg' 
+    };
+  the_dog_and_the_bone: {
+    image:'./image/the_dog_and_the_bone.jpg' 
+  }
+  six_tales_from_shakesphere: {
+    image:'./image/six_tales_from_shakesphere.jpg'
+  }
+  fairy_tale_story :{
+    image: './image/ fairy_tale_story.jpg'
+  }
+  she_stoops_to_conquer: {
+    image:'./image/she_stoops_to_conquer.jpg'
+  }
+  shylock: {
+    image:'./image/shylock.jpg'
+  } 
+  he_owl_and_the_pussycat: {
+    image:'./image/the_owl_and_the_pussycat.jpg'
+  }
+  the_quick_brown_fox: {
+    image:'./image/the_quick_brown_fox.jpg'
+
+    } 
+  }
+
 }
+
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,79 @@
-<!-- replace this with your HTML content -->
+<!-- replace this with your HTML content -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <script src="app.js"></script>
+    <title>Document</title>
+    <link rel="stylesheet" href="./style.css">
+    <div>
+       <div class="itemsContainer">
+          <div class="item-1 ">
+             <div class="box-1">
+                 <h2 id="title">les cerries de salomon</h2>
+                <img src="/home/hyfbe30/Downloads/my image/bk1.jpeg" alt="book1" width="250" height="200">
+             </div>
+        </div>
+          <div class="item-2">
+              <div class="box-2">
+                  <h2 id="title">kathrine the shrew</h2>
+                 <img src="/home/hyfbe30/Downloads/my image/bk2.jpeg" alt="book2" width="250" height="200">
+         </div>
+            </div>
+            <div class="item-3">
+                <div class="box-3">
+                    <h2 id="title">autre choix</h2>
+                  <img src="/home/hyfbe30/Downloads/my image/bk3.jpeg" alt="book3" width="250" height="200">
+            </div>
+               </div>
+              <div class="item-4">
+                  <div class="box-4">
+                      <h2 id="title">the dog and the bone</h2>
+                    <img src="/home/hyfbe30/Downloads/my image/bk4.jpeg" alt="book4"width="250" height="200" >
+              </div>
+                 </div>  
+               <div class="item-5">
+                 <div class="box-5">
+                     <h2 id="title">six tales from shakesphere</h2>
+                    <img src="/home/hyfbe30/Downloads/my image/bk5.jpeg" alt="book5"width="250" height="200" > 
+              </div>
+                 </div>
+                <div class="item-6">
+                    <div class="box-6">
+                        <h2 id="title" >fairy tale story</h2>
+                    <img src="/home/hyfbe30/Downloads/my image/bk6.jpeg" alt="book6"width="250" height="200" >
+                </div>
+                   </div>
+                  <div class="item-7">
+                      <div class="box-7">
+                          <h2 id="title">she stoops to conquer</h2>
+                       <img src="/home/hyfbe30/Downloads/my image/bk7.jpeg" alt="book7"width="250" height="200" >
+                  </div>
+                      </div>
+                   <div class="item-8">
+                       <div class="box-8">
+                           <h2  id="title">shylock</h2>
+                         <img src="/home/hyfbe30/Downloads/my image/bk8.jpeg" alt="book8"width="250" height="200" >
+                   </div>
+                       </div>
+                         <div class="9">
+                             <div class="box-9">
+                                 <h2 id="title">the owl and the pussycat</h2>
+                              <img src="/home/hyfbe30/Downloads/my image/bk9.jpeg" alt="book9"width="250" height="200" >
+                        </div>
+                             </div>
+                               <div class="item-10">
+                                   <div class="box-10">
+                                       <h2 id="title" >the quick brown fox</h2>
+                                  <img src="/home/hyfbe30/Downloads/my image/bk10.jpeg" alt="book10" width="250" height="200">
+                                </div>
+                                  </div>
+
+    </div>
+</head>
+<body>
+    <script>
+
+</script>
+</body>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,24 @@
-/* add your styling here */
+/* add your styling here */
+
+.mainContainer{  display: flex;
+    flex-direction: column;
+}
+
+
+    .itemsContainer{ 
+    display: flex;
+     flex-wrap: wrap;
+    margin: 5px;
+    font-size: 15px;
+
+}
+.item{ 
+    margin: 10px;
+    width: 300px;
+
+}
+#title{
+    text-align: center;
+    font-family: 'Times New Roman', Times, serif;
+    font-size: 15px;
+}
diff --git a/Week2/homework/maartjes-work.js b/Week2/homework/maartjes-work.js
@@ -46,7 +46,14 @@ const maartjesTasks = monday.concat(tuesday);
 const maartjesHourlyRate = 20;
 
 function computeEarnings(tasks, hourlyRate) {
-  // Replace this comment and the next line with your code
+  // create  variables of duration and task for monday
+
+let duration = ['180', '120','20','200']
+let task = [ 'Write a summary HTML/CSS','Some web development','Fix homework for class10','Talk to a lot of people']
+    } 
+}); 
+
+
   console.log(tasks, hourlyRate);
 }