foocoding · Radhikajram · Jun 29, 2019 · Jun 29, 2019 · Jul 7, 2019 · Jul 7, 2019
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,163 @@
 'use strict';
 
-{
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
-
-  // Replace with your own code
-  console.log(bookTitles);
+// eslint-disable-next-line no-unused-vars
+const bookTitles = [
+  // Replace with your own book titles
+  'my_experiment_with_truth',
+  'harry_potter',
+  'two_men_in_the_boat',
+  'da_vinci_code',
+  'wise_or_otherwise',
+  'the_train_stops_at_shamli',
+  'the_tale_of_two_cities',
+];
+
+// 1.1 & 1.2 Replace with your own code
+// console.log(bookTitles);
+
+// 1.3 make a function to create ul and li */
+
+// Create ul  element  and assign id
+
+const ul = document.createElement('ul');
+ul.setAttribute('id', 'booktitle');
+
+// eslint-disable-next-line no-unused-vars
+function createBookList(bookId) {
+  for (const i of bookId) {
+    // eslint-disable-next-line no-unused-expressions
+    const li = document.createElement('li');
+    li.appendChild(document.createTextNode(i));
+    ul.appendChild(li);
+  }
 }
+
+document.body.appendChild(ul);
+
+// 1.4 create a object of book elements with title,language and author information.
+
+// eslint-disable-next-line vars-on-top
+const books = {
+  my_experiment_with_truth: {
+    title: 'My experiment with truth',
+    language: 'English',
+    author: 'MKG',
+  },
+
+  harry_potter: {
+    title: 'Harry Potter',
+    language: 'English',
+    author: 'J K Rowling',
+  },
+
+  three_men_in_the_boat: {
+    title: 'Three men in the boat',
+    language: 'English',
+    author: 'Jerome K. Jerome',
+  },
+
+  da_vinci_code: {
+    title: 'Da vinci code',
+    language: 'English',
+    author: 'Dan Brown',
+  },
+
+  wise_and_otherwise: {
+    title: 'Wise and Otherwise',
+    language: 'English',
+    author: 'Sudha Moorthy',
+  },
+
+  the_train_stops_at_shamli: {
+    title: 'The train stops at Shamli',
+    language: 'English',
+    author: 'Ruskin Bond',
+  },
+
+  the_tale_of_two_cities: {
+    title: 'The Tale of Two Cities',
+    language: 'English',
+    author: 'Charles Dickens',
+  },
+};
+// 1.5 create Html element for Book title,Language and Author.Create id for each li element
+
+function createBookListUsingObject(bookObj) {
+  // eslint-disable-next-line guard-for-in
+  const objectKeys = Object.keys(bookObj);
+  let j = 0;
+
+  // eslint-disable-next-line guard-for-in
+  for (const i in bookObj) {
+    const li = document.createElement('li');
+    // console.log(objectKeys[j]);
+    li.setAttribute('id', objectKeys[j]);
+
+    const head = document.createElement('h2');
+    const headContent = document.createTextNode(bookObj[i].title);
+
+    const headLanguage = document.createElement('h2');
+    const headLanguageContent = document.createTextNode(bookObj[i].language);
+
+    const headAuthor = document.createElement('h2');
+    const headAuthorContent = document.createTextNode(bookObj[i].author);
+
+    headLanguage.appendChild(headLanguageContent);
+    headAuthor.appendChild(headAuthorContent);
+    head.appendChild(headContent);
+
+    li.appendChild(head);
+    li.appendChild(headLanguageContent);
+    li.appendChild(headAuthor);
+
+    ul.appendChild(li);
+
+    j = j + 1;
+    //  }
+  }
+}
+
+createBookListUsingObject(books);
+
+// 1.6 set up display property of ul element
+
+document.getElementById('booktitle').style.display = 'grid';
+document.getElementById('booktitle').style.gridTemplateColumns = 'auto auto';
+document.getElementById('booktitle').style.gridAutoColumns = 'minmax(auto, auto)';
+document.getElementById('booktitle').style.gridAutoRows = 'minmax(auto, auto)';
+document.getElementById('booktitle').style.gridGap = '2em';
+
+// 1.6 Set up the style of ul element
+
+ul.style.listStyle = 'none';
+ul.style.border = '2px red solid';
+ul.style.padding = '2em';
+
+// 1.7 Create a object with Bookid and image.
+
+const bookimage = {
+  my_experiment_with_truth: 'gandhi.jpg',
+  harry_potter: 'harry.jpg',
+  three_men_in_the_boat: 'threemenintheboat.jpg',
+  da_vinci_code: 'davinccicode.jpg',
+  wise_and_otherwise: 'wiseandotherwise.jpg',
+  the_train_stops_at_shamli: 'thetrainstopatshamli.jpg',
+  the_tale_of_two_cities: 'thetaleoftwocities.jpg',
+};
+
+// 1.8 Match the book image with book title using unique list id of the book
+
+function imageDisplay(imageObject) {
+  // eslint-disable-next-line guard-for-in
+  let j = 0;
+  // eslint-disable-next-line guard-for-in
+  for (const i in imageObject) {
+    const container = document.getElementById(Object.keys(imageObject)[j]);
+    const imageElement = document.createElement('img');
+    imageElement.src = imageObject[i];
+    container.appendChild(imageElement);
+    j++;
+  }
+}
+
+imageDisplay(bookimage);
diff --git a/Week1/homework/davinccicode.jpg b/Week1/homework/davinccicode.jpg
diff --git a/Week1/homework/gandhi.jpg b/Week1/homework/gandhi.jpg
diff --git a/Week1/homework/harry.jpg b/Week1/homework/harry.jpg
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,18 @@
-<!-- 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" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>FooCoding: Javascript2</title>
+  </head>
+  <body>
+    <h1 id="mybooks">My Favourite Books</h1>
+    <br />
+    <hr />
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,17 @@
-/* add your styling here */
+/* add your styling here */
+* {
+  margin: 0;
+}
+body {
+  background-color: seashell;
+}
+#mybooks {
+  text-align: center;
+}
+
+ul li {
+  background: orange;
+  padding: 1em;
+  border: #333 1px solid;
+  height: auto;
+}
diff --git a/Week1/homework/thetaleoftwocities.jpg b/Week1/homework/thetaleoftwocities.jpg
diff --git a/Week1/homework/thetrainstopatshamli.jpg b/Week1/homework/thetrainstopatshamli.jpg
diff --git a/Week1/homework/threemenintheboat.jpg b/Week1/homework/threemenintheboat.jpg
diff --git a/Week1/homework/wiseandotherwise.jpg b/Week1/homework/wiseandotherwise.jpg
diff --git a/Week2/example.html b/Week2/example.html
@@ -14,7 +14,9 @@
   </head>
   <body>
     <h3>Here is your advice for the day:</h3>
-    <h1 id="advice"></h1>
+    <ul id="advice"></ul>
+    <button id="add-advice">Add one more</button>
+    <button id="upcase-everything">uppcase-everything</button>
     <script type="text/javascript" src="./lecture-exercises.js"></script>
   </body>
 </html>
diff --git a/Week2/homework/index.html b/Week2/homework/index.html
@@ -0,0 +1,13 @@
+<!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>Squirtle-Sprites</title>
+  </head>
+  <body>
+    <h1>Squirtle-Sprites</h1>
+    <script type="text/javascript" src="squirtle-sprites.js"></script>
+  </body>
+</html>
diff --git a/Week2/homework/maartjes-work.js b/Week2/homework/maartjes-work.js
@@ -45,17 +45,25 @@ const tuesday = [
 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);
-}
+const computeEarnings = (tasks, hours) =>
+  tasks
+    // Covert minutes to hours.
+    .map(task => [task.duration] / 60)
+    // Extract the hours > 2
+    .filter(duration => [duration] >= 2)
+    // calculate the amount with estimated hourly rate
+    .map(estimateHours => estimateHours * hours)
+    // calculate the total amount
+    .reduce((accumulator, currentValue) => accumulator + currentValue);
+// Replace this comment and the next line with your code
 
 // eslint-disable-next-line no-unused-vars
 const earnings = computeEarnings(maartjesTasks, maartjesHourlyRate);
+const result = earnings.toFixed(2);
 
-// add code to convert `earnings` to a string rounded to two decimals (euro cents)
+console.log(result);
 
-console.log(`Maartje has earned €${'replace this string with the earnings rounded to euro cents'}`);
+// add code to convert `earnings` to a string rounded to two decimals (euro cents)
 
 // Do not change or remove anything below this line
 module.exports = {

diff --git a/Week2/homework/map-filter.js b/Week2/homework/map-filter.js
@@ -1,12 +1,23 @@
 'use strict';
 
-function doubleOddNumbers(numbers) {
-  // Replace this comment and the next line with your code
-  console.log(numbers);
-}
-
 const myNumbers = [1, 2, 3, 4];
-console.log(doubleOddNumbers(myNumbers));
+
+/* function doubleOddNumbers(numbers = [0]) {
+  //   // Replace this comment and the next line with your code
+  const newNumbers = [];
+  for (let i = 0; i < numbers.length; i++) {
+    if (numbers[i] % 2 !== 0) {
+      newNumbers.push(numbers[i] * 2);
+    }
+  }
+  return newNumbers;
+} */
+
+const doubleOddNumbers = numbers =>
+  numbers.filter(number => number % 2 !== 0).map(number => number * 2);
+
+// eslint-disable-next-line no-unused-vars
+const result = doubleOddNumbers(myNumbers);
 
 // Do not change or remove anything below this line
 module.exports = {

diff --git a/Week2/homework/squirtle-sprites.js b/Week2/homework/squirtle-sprites.js
@@ -1,5 +1,5 @@
 /* eslint-disable */
-
+//alert('file is attached');
 /* 
   Call this function to get a JSON string of the data
   (simulates calling a server to retrieve data)
@@ -9,3 +9,15 @@ function fetchPokemonData() {
 }
 
 /* Code goes below */
+
+// Convert  the JSON object into Javascript object
+const returnResponse = JSON.parse(fetchPokemonData());
+
+// Loop through the Sprites and display the image if it is not null
+for (const i in returnResponse.sprites) {
+  if (returnResponse.sprites[i] !== null) {
+    const imageElement = document.createElement('img');
+    imageElement.src = returnResponse.sprites[i];
+    document.body.appendChild(imageElement);
+  }
+}
diff --git a/Week2/lecture-exercises.js b/Week2/lecture-exercises.js
@@ -8,10 +8,38 @@ async function getRandomAdvice() {
   const adviceData = await adviceResponse.json(); // parses JSON string into native JavaScript object
   return adviceData.slip.advice;
 }
+let allAdvice = [];
+const adviceEl = document.getElementById('advice');
 
+function updateDom() {
+  adviceEl.innerHTML = '';
+  allAdvice.forEach((advice, index) => {
+    const adviceItem = document.createElement('li');
+    adviceEl.appendChild(adviceItem);
+    adviceItem.innerText = advice;
+    const removeButton = document.createElement('button');
+    removeButton.innerText = 'Remove';
+    adviceItem.appendChild(removeButton);
+    removeButton.addEventListener('click', () => deleteAdvice(index));
+  });
+}
+
+function deleteAdvice(index) {
+  allAdvice.splice(index, 1);
+  updateDom();
+}
+
+function upcaseAllAdvice() {
+  // eslint-disable-next-line no-const-assign
+  allAdvice = allAdvice.map(advice => advice.toUpperCase());
+  updateDom();
+}
 async function setRandomAdvice() {
-  const adviceEl = document.getElementById('advice');
-  adviceEl.innerText = await getRandomAdvice();
+  allAdvice.push(await getRandomAdvice());
+  updateDom();
 }
 
 setRandomAdvice();
+
+document.getElementById('add-advice').addEventListener('click', setRandomAdvice);
+document.getElementById('upcase-everything').addEventListener('click', upcaseAllAdvice);
diff --git a/Week3/homework/step2-1.js b/Week3/homework/step2-1.js
@@ -3,7 +3,7 @@
 function foo(func) {
   // What to do here?
   // Replace this comment and the next line with your code
-  console.log(func);
+  return func();
 }
 
 function bar() {