Javascript-week1-Assignment

foocoding · Radhikajram · Jun 29, 2019 · Jun 29, 2019 · Jul 7, 2019 · Jul 7, 2019
commit 3a5fdb43bf855289d28457c1dcba2e6ced3da8ed
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,149 @@
 'use strict';
 
-{
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
-
-  // Replace with your own code
-  console.log(bookTitles);
+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('ol');
+
+function createBookList(bookId) {
+  for (let i of bookId) {
+    // eslint-disable-next-line no-unused-expressions
+    const li = document.createElement('li');
+    li.appendChild(document.createTextNode(i));
+    ul.appendChild(li);
+  }
+}
+
+//createBookList(bookTitles);
+
+document.body.appendChild(ul);
+
+//1.5
+
+// eslint-disable-next-line vars-on-top
+let 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',
+  },
+};
+
+// const ul = document.createElement('ul');
+
+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 (let i in bookObj) {
+    const li = document.createElement('li');
+    //console.log(objectKeys[j]);
+    li.setAttribute('id', objectKeys[j]);
+
+    const head = document.createElement('h1');
+    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);
+    document.write('<br>');
+
+    ul.appendChild(li);
+
+    j = j + 1;
+    //  }
+  }
+}
+
+createBookListUsingObject(books);
+
+// Create a object with Bookid and image
+
+let 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',
+};
+
+function imageDisplay(imageObject) {
+  // eslint-disable-next-line guard-for-in
+  let j = 0;
+  // eslint-disable-next-line guard-for-in
+  for (let i in imageObject) {
+    //console.log(Object.keys(imageObject)[j]);
+    let container = document.getElementById(Object.keys(imageObject)[j]);
+    let 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,13 @@
-/* add your styling here */
+/* add your styling here */
+* {
+  margin: 0;
+}
+body {
+  background-color: aqua;
+}
+#mybooks {
+  text-align: center;
+}
+ol li {
+  text-align: justify;
+}
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