bitsagarob · EmaAfg · Jul 10, 2019 · Jul 10, 2019 · Jul 10, 2019 · Jul 13, 2019
diff --git a/Week1/exercise/w1/index.html b/Week1/exercise/w1/index.html
@@ -9,6 +9,7 @@
 
   <body>
     <h1>Hack your future</h1>
+    <button id="btn-changeHeader">Change Header</button>
     <h2>JS2 - exercise 1</h2>
 
     <div>
@@ -17,7 +18,7 @@ <h2>JS2 - exercise 1</h2>
       </div>
 
       <div>
-        <input type="text" id="imageInput" />
+        <input type="text" id="imageInput" value="past your link here"/>
         <button id="btn-changeImage">Change Image</button>
       </div>
 
@@ -32,7 +33,7 @@ <h3>Todos:</h3>
         <button id="btn-addTodo">Add todo</button>
       </div>
     </div>
+    <script src="index.js"></script>
   </body>
 
-  <script src="index.js"></script>
 </html>
diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js
@@ -2,21 +2,40 @@ console.log('Hack your future Belgium!');
 
 // EXERCISE 1
 
+function changeHeader(){
+    console.log("test");
+    var header = document.querySelector('h1') 
+    header.innerHTML = "Aimal Maarij" ;
+};
+
+
+document.getElementById("btn-changeHeader") .addEventListener("click", changeHeader)
+
 // 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() )
+
+//  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
 
+function changeImage(){
+    console.log("test");
+    var changeImage = document.getElementById("imageToChange")
+    var changeInput = document.getElementById("imageInput")
+    changeImage.src=changeInput.value 
+}
+
+document.getElementById("btn-changeImage") .addEventListener("click", changeImage)
+
+
 // 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
@@ -35,6 +54,21 @@ console.log('Hack your future Belgium!');
 
 // Exercise 3:
 
+
+
+function addTodo() {
+    var todoList = document.getElementById('todoList') //reference to ul element on HTML
+    var todoInput = document.getElementById('todoInput') // reference to the input text box
+    var liNode = document.createElement('li') // create new LI element
+    var textNode = document.createTextNode(todoInput.value) // create new text node
+
+    liNode.appendChild(textNode) // take the new create text node and append it li
+    todoList.appendChild(liNode) // take the new create li element and append it ul/todoList
+  }
+ var addBtn = document.getElementById('btn-addTodo')
+ addBtn.addEventListener('click', addTodo)
+
+
 // 3a: select "add todo" button & add click event listener to execute addTodo() function on click event
 
 // 3b: define addTodo() function, in this function:

diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,129 @@
 'use strict';
 
 {
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
+  // Data
+  let myBooks = {
+    Everything_We_Give: {
+      "title": "Everything We Give",
+      "language": "English",
+      "author": "Khali.P",
+      "photo": "images\\Every_thing_WeGive.jpg"
+    },
+    Girls_on_the_Line: {
+      "title": "Girls on the Line",
+      "language": "English",
+      "author": "Aimie K. Runyan",
+      "photo": "images\\Girls_on _the_Line.jpg"
+    },
+    The_Memory_of_Us: {
+      "title": "The Memory of Us",
+      "language": "English",
+      "author": "Paul Corner",
+      "photo": "images\\The_Memory_of_Us.jpg"
+    },
+    The_Good_Neighbor: {
+      "title": "The Good Neighbor",
+      "language": "English",
+      "author": "A. J. Banner",
+      "photo": "images\\The_Good_Neighbor.jpg"
+    },
+    Hello_Love: {
+      "title": "Hello Love",
+      "language": "Engihs",
+      "author": "Karen McQuestion",
+      "photo": "images\\Hello_Love.jpg"
+    },
+    Good_Man_Dalton: {
+      "title": "Good Man Dalton",
+      "language": "English",
+      "author": "Karen McQuestion",
+      "photo": "images\\Good_Man_Dalton.jpg"
+    },
+    Loving_Liberty_Levine: {
+      "title": "Loving Liberty Levine",
+      "language": "English",
+      "author": "Colin Falconer",
+      "photo": "images\\Loving_Liberty_Levine.jpg"
+    },
+    Confidential: {
+      "title": "Confidential",
+      "language": "English",
+      "author": "Ellie Monago",
+      "photo": "images\\Confidential.jpg"
+    },
+    Eloquent_JavaScript: {
+      "title": "Eloquent JavaScript",
+      "language": "English",
+      "author": "Marijn Haverbeke",
+      "photo": "images\\Eloquent_JavaScript.jpg"
+    },
+    JavaScript_Programming: {
+      "title": "JavaScript Programming",
+      "language": "Enlgish",
+      "author": "Brian Jenkins",
+      "photo": "images\\JavaScript_Programming.jpg"
+    }
+  }
+
+  //header div
+  let header1 = document.createElement('h1');
+  let headerTitle = document.createTextNode("My Favourite Books");
+  header1.appendChild(headerTitle);
+  document.body.appendChild(header1);
+
+  let headerContainer = document.createElement('div');
+  headerContainer.id = 'header_container';
+
+  document.body.appendChild(headerContainer);
+  headerContainer.appendChild(header1);
+
+
+  // Main Section
+  let mainSection = document.createElement('div');
+  mainSection.id = 'main_section';
+
+  document.body.appendChild(mainSection);
+
+
+  // Functions for main section
+
+
+  function bookList() {
+    var ul = document.createElement('ul');
+    mainSection.appendChild(ul);
+    for (const books in myBooks) {
+      var ol = document.createElement('ol');
+      var liTitle = document.createElement('li');
+      var liImg = document.createElement('li')
+      var img = document.createElement("img");
+      img.src = myBooks[books].photo;
+      var liLanguage = document.createElement('li');
+      var liAuthor = document.createElement('li');
+
+      var nodeTextTitle = document.createTextNode(myBooks[books].title);
+      var nodeTextLanguage = document.createTextNode("Language: " + myBooks[books].language);
+      var nodeTextAuthor = document.createTextNode("Author: " + myBooks[books].author);
+
+      liTitle.appendChild(nodeTextTitle);
+      liImg.appendChild(img);
+      liLanguage.appendChild(nodeTextLanguage);
+      liAuthor.appendChild(nodeTextAuthor);
+
+      ol.appendChild(liTitle);
+      ol.appendChild(liImg)
+      ol.appendChild(liLanguage);
+      ol.appendChild(liAuthor);
+      ul.appendChild(ol)
+    }
+  }
+
+  // Call the Function
+  bookList();
+
+
+  //Footer
+  let footer = document.createElement('footer');4
+  footer.innerHTML = "Conact me for more books: aimal @gmail.com";
+  document.body.appendChild(footer);
 
-  // Replace with your own code
-  console.log(bookTitles);
 }
diff --git a/Week1/homework/images/Confidential.jpg b/Week1/homework/images/Confidential.jpg
diff --git a/Week1/homework/images/Eloquent_JavaScript.jpg b/Week1/homework/images/Eloquent_JavaScript.jpg
diff --git a/Week1/homework/images/Every_thing_WeGive.jpg b/Week1/homework/images/Every_thing_WeGive.jpg
diff --git a/Week1/homework/images/Girls_on _the_Line.jpg b/Week1/homework/images/Girls_on _the_Line.jpg
diff --git a/Week1/homework/images/Good_Man_Dalton.jpg b/Week1/homework/images/Good_Man_Dalton.jpg
diff --git a/Week1/homework/images/Hello_Love.jpg b/Week1/homework/images/Hello_Love.jpg
diff --git a/Week1/homework/images/JavaScript_Programming.jpg b/Week1/homework/images/JavaScript_Programming.jpg
diff --git a/Week1/homework/images/Loving_Liberty_Levine.jpg b/Week1/homework/images/Loving_Liberty_Levine.jpg
diff --git a/Week1/homework/images/The_Good_Neighbor.jpg b/Week1/homework/images/The_Good_Neighbor.jpg
diff --git a/Week1/homework/images/The_Memory_of_Us.jpg b/Week1/homework/images/The_Memory_of_Us.jpg
diff --git a/Week1/homework/images/background.png b/Week1/homework/images/background.png
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,14 @@
-<!-- replace this with your HTML content -->
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Javascript2 - Week1- Homework Assignent</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+</body>
+<script type="text/javascript" src="./app.js"></script>
+
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,128 @@
-/* add your styling here */
+/* add your styling here */
+html {
+ padding: 15px;
+}
+body{
+    background-color: #99DFE7;
+    font-size: 0.9em;
+    background-image: url("https://png.pngtree.com/thumb_back/fw800/back_pic/02/65/63/65578876d4f20e9.jpg");
+    background-color: silver;
+    margin-top:2rem;
+    margin-left:2rem;
+    text-align: center;
+    font-weight: bold;
+    font-size:2rem;
+    width:90%;
+
+  }
+
+  h1{
+    background-color: rgb(219, 211, 211);
+
+
+    border: 1px red solid;
+    border-top: 4px red solid;
+    border-bottom: 10px red solid;
+
+  }
+
+  img {
+
+    width: 10rem;
+
+		border:1px solid black;
+		background: url(img/tiger.png) no-repeat;
+		-moz-box-shadow: inset 40px 40px 100px white;
+		-webkit-box-shadow: inset 40px 40px 100px #fff;
+		box-shadow: inset 10px 10px 50px black;   
+    margin-top: 2%;
+    -webkit-transition: .5s;
+      transition: .5s;
+  }
+  img:hover {
+    transform: scale(1.3)
+    }
+  ul{
+    background-color: silver;
+    list-style:none;
+    margin-top:0.5rem;
+    margin-left:3.5rem;
+    padding: 0;
+    width:90%;
+    display:flex;
+    flex-flow: wrap;
+    justify-content:center;
+  }
+  ol {
+   padding-right: 1%;
+   padding-left: 1%;
+   margin-top:1%;
+   margin-bottom:2%;
+   margin-right:3%;
+   width:25%;
+   height: 25rem; 
+   overflow: hidden;
+   box-shadow: 5px 5px 5px black;
+  list-style-type: none;
+   position: relative;
+   background-image: url("https://backgroundcheckall.com/wp-content/uploads/2018/10/books-background-images-for-websites-9.jpg");
+   background-size: 800px 500px;
+   background-repeat: no-repeat;
+
+  }
+
+  ol li{
+    line-height: 2rem; 
+    display: flex;
+    justify-content: center;
+    font-size: 15px;
+    color: black;
+    margin-top: 5px;
+
+  }
+
+  ol li:nth-of-type(1) {
+    display: flex;
+    justify-content: center;
+    border-bottom: 5px red solid;
+    background-color: silver;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    font-size: 1rem;
+
+  }
+  ol li:nth-of-type(1)::before {
+    content: "»";
+    color: red;
+  }
+
+  ol li:nth-of-type(1)::after {
+  content: "«";
+  color: red;
+  }
+  ol li:nth-of-type(3) {
+    display: flex;
+    justify-content: center;
+    border-bottom: 1px red solid;
+
+    background-color: silver;
+
+  }
+  ol li:nth-of-type(4) {
+    display: flex;
+    justify-content: center;
+    background-color: silver;
+    border-bottom: 1px red solid;
+
+  }
+
+  footer{
+    background-color: silver;
+    color: black;
+    font-size:2rem;
+    font-weight: 900;
+    border-bottom: 5px red solid;
+    margin-top:0.5rem;
+    margin-left:2rem;
+    margin-right: 3rem;
+    text-align: center;    
+    }