bitsagarob · hakanErgin · Jul 9, 2019 · Jul 9, 2019 · Jul 12, 2019 · Jul 13, 2019
diff --git a/Week1/exercise/w1/index.html b/Week1/exercise/w1/index.html
@@ -1,38 +1,42 @@
-<!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>
+<!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>
+
+  <button id="btn-changeHeader">Change header</button>
+
+  <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
@@ -1,50 +1,83 @@
-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:
-
-// 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
+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() )
+
+function changeHeader() {
+    console.log("test");
+    let header = document.getElementsByTagName("h1")[0];
+    header.innerHTML = "hakan";
+}
+
+document.getElementById("btn-changeHeader").addEventListener("click", changeHeader);
+
+// ====================================== //
+
+// 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("test");
+    let imageInputValue = document.getElementById("imageInput").value;
+    let imageToChange = document.getElementById("imageToChange");
+    imageToChange.src = imageInputValue;
+    // imageToChange.setAttribute("src", imageInputValue)
+}
+
+document.getElementById("btn-changeImage").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
+
+document.getElementById("btn-addTodo").addEventListener("click", addTodo);
+
+function addTodo() {
+    let TodoList = document.getElementById("todoList");
+    //    console.log(TodoList);
+
+    let TodoInputVal = document.getElementById("todoInput").value;
+    console.log(TodoInputVal);
+
+    let liElement = document.createElement("li");
+    //    console.log(liElement);
+
+    liElement.innerHTML = TodoInputVal;
+    //    console.log(liElement.innerHTML);
+
+    TodoList.appendChild(liElement);
+    //    console.log(TodoList);
+}
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,143 @@
 'use strict';
 
-{
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
+let bookTitles = {
+  book1: {
+    "title": "the vegetarian",
+    "language": "english",
+    "author": "some writer"
+  },
+  book2: {
+    "title": "watership down",
+    "language": "german",
+    "author": "some writer"
+  },
+  book3: {
+    "title": "adventures sherlock holmes",
+    "language": "arabic",
+    "author": "some writer2"
+  },
+  book4: {
+    "title": "alchemist",
+    "language": "italian",
+    "author": "some writer"
+  },
+  book5: {
+    "title": "frankenstein",
+    "language": "italian",
+    "author": "some writer3"
+  },
+  book6: {
+    "title": "city of thieves",
+    "language": "english",
+    "author": "some writer"
+  },
+  book7: {
+    "title": "gone with the wind",
+    "language": "english",
+    "author": "some writer4"
+  },
+  book8: {
+    "title": "to kill mocking bird",
+    "language": "english",
+    "author": "some writer"
+  },
+  book9: {
+    "title": "war and peace",
+    "language": "english",
+    "author": "some writer6"
+  },
+  book10: {
+    "title": "things fall apart",
+    "language": "french",
+    "author": "some writer3"
+  }
+}
+
+let imgList = {
+  "book1": "./img/vegetarian.jpg",
+  "book2": "./img/watership.jpg",
+  "book3": "./img/holmes.jpg",
+  "book4": "./img/alchemist.jpg",
+  "book5": "./img/frankenstein.jpg",
+  "book6": "./img/thieves.jpg",
+  "book7": "./img/wind.jpg",
+  "book8": "./img/mocking_bird.jpg",
+  "book9": "./img/warandpeace.jpg",
+  "book10": "./img/things_fall_apart.jpg"
+}
+
+// iterating and making lists with the objects
+function makeList() {
+
+  //iterating thru books, creating h2/ul/li's
+  for (let id in bookTitles) {
+    let header = document.createElement('h2');
+    let bookNumber = document.createTextNode(id);
+    let newList = document.createElement('ul');
+    let image = document.createElement("img");
+    image.setAttribute("src", imgList[id]);
+
+    // li
+    for (let data in bookTitles[id]) {
+      let listItem = document.createElement("li");
+      let itemText = document.createTextNode(`${data} : ${bookTitles[id][data]}`);
+      listItem.appendChild(itemText);
+      newList.appendChild(listItem)
+    }
+    header.appendChild(bookNumber);
+    document.body.appendChild(header);
+    document.body.appendChild(newList);
+    newList.appendChild(image);
+  }
+}
+makeList();
+
+// array for the first step
+/* const bookTitles = [
+  "the_vegetarian",
+  "watership_down",
+  "adventures_sherlock_holmes",
+  "alchemist",
+  "frankenstein",
+  "city_of_thieves",
+  "gone_with_the_wind",
+  "to_kill_mocking_bird",
+  "war_and_peace",
+  "things_fall_apart"];
+ */
+
+// 1/2 examples from stackexchange
+/* let newList = document.crea.idokTitles.changingData.forEach(book => {
+  let listItem = document.createElement("li");
+  let itemText = document.createTextNode(book);
+  listItem.appendChild(itemText);
+  newList.appendChild(listItem)
+})
+document.body.appendChild(newList); */
+
+// 2/2 examples from stackexchange
+/* function generateList() {
+  let newList = document.createElement('ul');
+
+  for (let i = 0; i < bookTitles.length; i++) {
+    let book = bookTitles[i];
+    newList.innerHTML += `<li>${book}</li>`;
+  }
+  return newList;
+}
+document.body.append(generateList()); */
+
+// merged the examples above, but needs to change because it already iterates
+/* function makeList() {
+  let newList = document.createElement('ul');
 
-  // Replace with your own code
-  console.log(bookTitles);
+  for (let i = 0; i < bookTitles.length; i++) {
+    let listItem = document.createElement("li");
+    let itemText = document.createTextNode(bookTitles[i]);
+    listItem.appendChild(itemText);
+    newList.appendChild(listItem)
+  }
+  document.body.appendChild(newList);
 }
+makeList();
+ */
diff --git a/Week1/homework/img/alchemist.jpg b/Week1/homework/img/alchemist.jpg
diff --git a/Week1/homework/img/frankenstein.jpg b/Week1/homework/img/frankenstein.jpg
diff --git a/Week1/homework/img/holmes.jpg b/Week1/homework/img/holmes.jpg
diff --git a/Week1/homework/img/mocking_bird.jpg b/Week1/homework/img/mocking_bird.jpg
diff --git a/Week1/homework/img/thieves.jpg b/Week1/homework/img/thieves.jpg
diff --git a/Week1/homework/img/things_fall_apart.jpg b/Week1/homework/img/things_fall_apart.jpg
diff --git a/Week1/homework/img/vegetarian.jpg b/Week1/homework/img/vegetarian.jpg
diff --git a/Week1/homework/img/warandpeace.jpg b/Week1/homework/img/warandpeace.jpg
diff --git a/Week1/homework/img/watership.jpg b/Week1/homework/img/watership.jpg
diff --git a/Week1/homework/img/wind.jpg b/Week1/homework/img/wind.jpg
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,20 @@
-<!-- replace this with your HTML content -->
+<!-- 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" />
+  <title>Document</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+
+</head>
+
+<body>
+
+</body>
+
+<script src="app.js"></script>
+
+</html>