bitsagarob · kelemu-2019 · Jul 9, 2019 · Jul 12, 2019 · Jul 12, 2019 · Jul 13, 2019
diff --git a/Week1/exercise/w1/index.html b/Week1/exercise/w1/index.html
@@ -8,7 +8,8 @@
   </head>
 
   <body>
-    <h1>Hack your future</h1>
+    <h1 id="header1">Hack your future</h1>
+    <button id="headerChenger">Clickto Change Header</button>
     <h2>JS2 - exercise 1</h2>
 
     <div>
@@ -35,4 +36,4 @@ <h3>Todos:</h3>
   </body>
 
   <script src="index.js"></script>
-</html>
+  </html>
diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js
@@ -3,9 +3,21 @@ 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('Testing this function');
+}
 
 // 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("Hello Now the heading is Changed with Addeventlistner");
+
+    var header= document.querySelector('header1');
+    document.getElementById("header1").innerHTML="Kelemu";
+    header = document.getElementById("header1").innerHTML;
+}   
+
+document.getElementById("headerChenger").addEventListener('click',changeHeader);
 
 // 1b: inside this function: select the header element and assign that to a variable called "header"
 
@@ -21,14 +33,25 @@ console.log('Hack your future Belgium!');
 
 // 1b: add an event listener to the "Change image" button and call the "changeImage" function when clicked
 
+document.getElementById('btn-changeImage'). addEventListener('click',changeImage);
+
 // 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('Im in the changeImage function');
+    var imageInputValue = document.getElementById('imageInput').value;
+
+    var imageToChange = document.getElementById('imageToChange').src;
+
+    imageToChange = imageInputValue
+
+    document.getElementById('imageToChange').src=imageToChange;
+    }
 
 // ====================================== //
 
@@ -37,8 +60,34 @@ console.log('Hack your future Belgium!');
 
 // 3a: select "add todo" button & add click event listener to execute addTodo() function on click event
 
+document.getElementById('btn-addTodo').addEventListener('click',addTodo);
+
 // 3b: define addTodo() function, in this function:
 
+function addTodo(){
+
+    //get all lists of elements
+    var alltodoList = document.getElementById('todoList');
+    console.log(alltodoList);
+
+   //Assigning imput data to the variable
+    var todoInputvalue = document.getElementById('todoInput').value;
+    console.log(todoInputvalue);
+
+    //Creating li element
+    var newListElement = document.createElement("li");
+
+    //Assigning the new list value to the variable
+    var newListValue = document.createTextNode(todoInputvalue);
+
+    //merg the new value to the created list
+    newListElement.append(newListValue);
+
+    //Display the new element to the existing list
+    document.getElementById('todoList').appendChild(newListElement);
+
+ }
+
 // 3c: get todoList element
 
 // 3d: get todoInput element & log todoInput value
@@ -47,4 +96,4 @@ console.log('Hack your future Belgium!');
 
 // 3f: set created <li> element innerHtml to todoInput value
 
-// 3g: add <li> element to todoList
+// 3g: add <li> element to todoList
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -4,8 +4,119 @@
   const bookTitles = [
     // Replace with your own book titles
     'harry_potter_chamber_secrets',
+    'awaken_the_giant_within_me',
+    'if_tomorrow_comes',
+    'unlimited_power',
+    'the_power_of_positive_thinking',
+    'the_power_of_character_in_leadership',
+    'the_girl_on_the_train',
+    'man_and_the_sea',
+    'fiker_eske_mekabir',
+    'keadmas_basher',
+    'yetekolefebet',
   ];
+  function bookListCreater(bookListobj) {
+    const ul = document.createElement('ul');
+    document.getElementById('bookListDiv').appendChild(ul);
 
-  // Replace with your own code
-  console.log(bookTitles);
+    for (let propobj in bookListobj) {
+      let li = document.createElement('li');
+      ul.appendChild(li);
+      li.innerHTML = propobj;
+      //li.innerHTML = bookListobj[propobj];
+      console.log(bookListobj[propobj]);
+    }
+  }
+
+  // Creating object
+  let allBookInformation = {
+    harry_potter_chamber_secrets: {
+      bookInfo: {
+        title: bookTitles[0].toUpperCase(),
+        language: 'Eneglish',
+        author: 'J. K. Rowling',
+      },
+    },
+    awaken_the_giant_within_me: {
+      bookInfo: {
+        title: bookTitles[1].toUpperCase(),
+        language: 'Eneglish',
+        author: 'Tony Robbins',
+      },
+    },
+
+    if_tomorrow_comes: {
+      bookInfo: {
+        title: bookTitles[2].toUpperCase(),
+        language: 'Eneglish',
+        author: 'Sidney Sheldon',
+      },
+    },
+
+    if_tomorrow_comes: {
+      bookInfo: {
+        title: bookTitles[3].toUpperCase(),
+        language: 'Eneglish',
+        author: 'Tony Robbins',
+      },
+    },
+
+    unlimited_power: {
+      bookInfo: {
+        title: bookTitles[4].toUpperCase(),
+        language: 'Eneglish',
+        author: 'Dr. Norman Vincent Peale',
+      },
+    },
+
+    the_power_of_positive_thinking: {
+      bookInfo: {
+        title: bookTitles[5].toUpperCase(),
+        language: 'Eneglish',
+        author: 'Dr. Myles Munroe',
+      },
+    },
+
+    the_girl_on_the_train: {
+      bookInfo: {
+        title: bookTitles[6].toUpperCase(),
+        language: 'Eneglish',
+        author: 'Paula Hawkins',
+      },
+    },
+
+    man_and_the_sea: {
+      bookInfo: {
+        title: bookTitles[7].toUpperCase(),
+        language: 'Eneglish',
+        author: 'Ernest Hemingway',
+      },
+    },
+
+    fiker_eske_mekabir: {
+      bookInfo: {
+        title: bookTitles[8].toUpperCase(),
+        language: 'Amharic',
+        author: 'Dr. Haddis Alemayehu',
+      },
+    },
+
+    keadmas_basher: {
+      bookInfo: {
+        title: bookTitles[9].toUpperCase(),
+        language: 'Amharic',
+        author: 'Be alu Girma',
+      },
+    },
+
+    yetekolefebet: {
+      bookInfo: {
+        title: bookTitles[10].toUpperCase(),
+        language: 'Amharic',
+        author: 'Dr Mihret Debebe ',
+      },
+    },
+  };
+  console.log(allBookInformation);
+  bookListCreater(allBookInformation);
 }
diff --git a/Week1/homework/homework/app.js b/Week1/homework/homework/app.js
@@ -0,0 +1,132 @@
+'use strict';
+
+{
+  const bookTitles = [
+    'harry_potter_chamber_secrets',
+    'awaken_the_giant_within_me',
+    'if_tomorrow_comes',
+    'unlimited_power',
+    'the_power_of_positive_thinking',
+    'the_power_of_character_in_leadership',
+    'the_girl_on_the_train',
+    'man_and_the_sea',
+    'fiker_eske_mekabir',
+    'oromay',
+    'yetekolefebet',
+  ];
+  // creating HTML elements
+  function bookListCreater() {
+    const bookListBox = document.createElement('div');
+    document.getElementById('pagebody').appendChild(bookListBox);
+
+    const headingTitle = document.createElement('h1');
+    const headingText = document.createTextNode('My Favorite Motivational Books');
+
+    bookListBox.appendChild(headingTitle);
+    headingTitle.appendChild(headingText);
+
+    const ul = document.createElement('ul');
+    bookListBox.appendChild(ul);
+    // creating ul list
+    for (let i = 0; i < bookTitles.length; i++) {
+      // creat list Append and Display  on DOM
+
+      const li = document.createElement('li');
+      ul.appendChild(li);
+
+      const titleli = document.createElement('titleli');
+      titleli.innerHTML = bookTitles[i].title;
+      li.appendChild(titleli);
+
+      const img = document.createElement('img');
+      img.setAttribute('src', bookTitles[i].imgLink);
+      li.appendChild(img);
+
+      const languageli = document.createElement('languageli');
+      languageli.innerHTML = bookTitles[i].language;
+      li.appendChild(languageli);
+
+      const authorli = document.createElement('authorli');
+      authorli.innerHTML = bookTitles[i].author;
+      li.appendChild(authorli);
+    }
+  }
+  // Creating object BookInformation  with constructor
+
+  function BookInformation(bookIdFromArry, language, author, imgLink) {
+    this.BookInformation = bookIdFromArry;
+    this.title = bookIdFromArry.toUpperCase();
+    this.language = language;
+    this.author = author;
+    this.imgLink = imgLink;
+  }
+
+  bookTitles[0] = new BookInformation(
+    bookTitles[0],
+    'English',
+    'J.K.Rowling',
+    'https://is3-ssl.mzstatic.com/image/thumb/Video118/v4/a5/c0/fb/a5c0fbaa-2fb5-fefa-0e2e-552207b0376f/pr_source.lsr/268x0w.png',
+  );
+  bookTitles[1] = new BookInformation(
+    bookTitles[1],
+    'English',
+    'Tony Robbins',
+    'https://i1.wp.com/www.samuelthomasdavies.com/wp-content/uploads/2015/08/Awaken-The-Giant-Within.jpg?resize=198%2C300&ssl=1',
+  );
+  bookTitles[2] = new BookInformation(
+    bookTitles[2],
+    'English',
+    'Sidney Sheldon',
+    'https://images-na.ssl-images-amazon.com/images/I/314zId3Rr5L._AC_UL320_SR216,320_.jpg',
+  );
+  bookTitles[3] = new BookInformation(
+    bookTitles[3],
+    'English',
+    'Tony Robbins',
+    'https://images-na.ssl-images-amazon.com/images/I/51otVRzsbcL._SX321_BO1,204,203,200_.jpg',
+  );
+  bookTitles[4] = new BookInformation(
+    bookTitles[4],
+    'English',
+    'Dr. Norman Vincent Peale',
+    'https://images-na.ssl-images-amazon.com/images/I/515N6BJGE4L._SX304_BO1,204,203,200_.jpg',
+  );
+  bookTitles[5] = new BookInformation(
+    bookTitles[5],
+    'English',
+    'Dr. Myles Munroe',
+    'https://images-na.ssl-images-amazon.com/images/I/51nES%2Bb7QvL._SX331_BO1,204,203,200_.jpg',
+  );
+  bookTitles[6] = new BookInformation(
+    bookTitles[6],
+    'English',
+    'Paula Hawkins',
+    'https://images-na.ssl-images-amazon.com/images/I/51jZY1HSgVL._SX258_BO1,204,203,200_.jpg',
+  );
+  bookTitles[7] = new BookInformation(
+    bookTitles[7],
+    'English',
+    'Ernest Hemingway',
+    'https://images-na.ssl-images-amazon.com/images/I/41V91pPjbyL._SX331_BO1,204,203,200_.jpg',
+  );
+  bookTitles[8] = new BookInformation(
+    bookTitles[8],
+    'Amharic',
+    'Dr. Haddis Alemayehu',
+    'https://lh3.googleusercontent.com/4wxGLRmf0SJ8m0XCiWpSND1h2VgHW7tSShsziIn3EWd5WZWNZVNp_Uq_skMdBd1CcQ',
+  );
+  bookTitles[9] = new BookInformation(
+    bookTitles[9],
+    'Amharic',
+    'Bealu girma',
+    'https://upload.wikimedia.org/wikipedia/en/f/fd/Oromai_cover.png',
+  );
+  bookTitles[10] = new BookInformation(
+    bookTitles[10],
+    'Amharic',
+    'Dr Mihret Debebe',
+    ' https://cdn.shopify.com/s/files/1/0258/4531/products/yetekolefebet_large.jpg?v=1533244500',
+  );
+  // calling function
+  bookListCreater();
+}
diff --git a/Week1/homework/homework/index.html b/Week1/homework/homework/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>JS-Home Work-1</title>
+    <meta lang="en" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body id="pagebody">
+    <footer></footer>
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+</html>