diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..e6674daa6 100644 --- 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 new file mode 100644 index 000000000..703c27066 Binary files /dev/null and b/Week1/homework/davinccicode.jpg differ diff --git a/Week1/homework/gandhi.jpg b/Week1/homework/gandhi.jpg new file mode 100644 index 000000000..066297ee4 Binary files /dev/null and b/Week1/homework/gandhi.jpg differ diff --git a/Week1/homework/harry.jpg b/Week1/homework/harry.jpg new file mode 100644 index 000000000..430cd83d3 Binary files /dev/null and b/Week1/homework/harry.jpg differ diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..595ed9559 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,18 @@ - \ No newline at end of file + + + +
+ + + + +