|
1 | 1 | 'use strict'; |
2 | | -{ |
3 | | - const bookTitles = [ |
| 2 | + |
| 3 | + const bookTitles = [ |
4 | 4 | // Replace with your own book titles |
5 | | - 'harry_potter_chamber_secrets' |
6 | | - ]; |
| 5 | + 'harry_potter_chamber_secrets', |
| 6 | + 'harry_potter_philosophers_stone', |
| 7 | + 'the_fiery_cross', |
| 8 | + 'madame_bovary', |
| 9 | + 'anna_karenina', |
| 10 | + 'harry_potter_goblet_of_fire', |
| 11 | + 'twilight', |
| 12 | + 'outlander', |
| 13 | + 'harry_potter_deathly_hallows', |
| 14 | + 'harry_potter_and_the_half_blood_prince' |
| 15 | + ]; |
| 16 | + /* const divForBookList = document.createElement('div'); //creates the div |
| 17 | + const listOfBooks = document.createElement('ul'); // creates the unord list |
| 18 | +
|
| 19 | +function makeBookList(){ |
| 20 | + document.getElementsByTagName('body')[0].appendChild(divForBookList); //add the div to the body tag |
| 21 | + divForBookList.appendChild(listOfBooks); //adds the ul to the div |
| 22 | +
|
| 23 | +
|
| 24 | + for (let i = 0; i < bookTitles.length; i++){ //for each book title |
| 25 | + const listItems = document.createElement('li'); // create a li for each of the items |
| 26 | + listItems.innerHTML = bookTitles[i]; //add each book title index item to the listItems |
| 27 | + listOfBooks.appendChild(listItems); //add the list items to the ul |
| 28 | + } |
| 29 | +
|
| 30 | +} |
| 31 | +makeBookList() */ |
| 32 | + |
| 33 | + |
| 34 | + const nameOfList = { |
| 35 | + 'harry_potter_chamber_secrets': { |
| 36 | + 'title': 'Harry Potter and the Chamber of Secrets', |
| 37 | + language: 'English', |
| 38 | + author: 'JK Rowling' |
| 39 | + }, |
| 40 | + |
| 41 | + 'harry_potter_philosophers_stone': { |
| 42 | + 'title': 'Harry Potter and the Philosopher\s Stone', |
| 43 | + language: 'English', |
| 44 | + author: 'JK Rowling' |
| 45 | + }, |
| 46 | + |
| 47 | + 'the_fiery_cross': { |
| 48 | + 'title': 'The Fiery Cross', |
| 49 | + language: 'English', |
| 50 | + author: 'Diana Galbaldon' |
| 51 | + }, |
| 52 | + |
| 53 | + 'madame_bovary': { |
| 54 | + 'title': 'Madame Bovary', |
| 55 | + language: 'French', |
| 56 | + author: 'Gustav Flaubert' |
| 57 | + }, |
| 58 | + |
| 59 | + 'anna_karenina': { |
| 60 | + 'title': 'Anna Karenina', |
| 61 | + language: 'English', |
| 62 | + author: 'Leo Tolstoy' |
| 63 | + }, |
| 64 | + |
| 65 | + 'harry_potter_goblet_of_fire': { |
| 66 | + 'title': 'Harry Potter and the Goblet of Fire', |
| 67 | + language: 'English', |
| 68 | + author: 'JK Rowling' |
| 69 | + }, |
| 70 | + |
| 71 | + 'twilight': { |
| 72 | + 'title': 'Twlight', |
| 73 | + language: 'English', |
| 74 | + author: 'Stephanie Meyer' |
| 75 | + }, |
| 76 | + |
| 77 | + 'outlander': { |
| 78 | + 'title': 'Outlander', |
| 79 | + language: 'English', |
| 80 | + author: 'Diana Galbadon' |
| 81 | + }, |
| 82 | + |
| 83 | + 'harry_potter_the_deathly_hallows': { |
| 84 | + 'title': 'Harry Potter and the Deathly Hallows', |
| 85 | + language: 'English', |
| 86 | + author: 'JK Rowling' |
| 87 | + }, |
| 88 | + |
| 89 | + 'harry_potter_and_the_halfblood_prince': { |
| 90 | + 'title': 'Harry Potter and the Half Blood Prince', |
| 91 | + language: 'English', |
| 92 | + author: 'JK Rowling' |
| 93 | + } |
| 94 | +} |
| 95 | + |
| 96 | +var fieldset = document.createElement( 'fieldset' ); |
| 97 | +fieldset.setAttribute( 'class' , 'nameOfList' ); |
| 98 | + |
| 99 | +var legend = document.createElement( 'legend' ); |
| 100 | +legend.innerHTML = 'My Book List'; |
| 101 | +fieldset.appendChild(legend); |
| 102 | + |
| 103 | +function makeBookList(){ |
| 104 | + const ul = document.createElement('ul'); // creates the unord list |
| 105 | + const myBooks = Object.keys(nameOfList) |
| 106 | + |
| 107 | + |
| 108 | + const div = document.createElement('div'); //creates the div |
| 109 | + |
| 110 | + const h1second = document.createElement('h1'); // creates language h1 |
| 111 | + const h1third = document.createElement('h1'); // creates author h1 |
| 112 | + document.getElementsByTagName('body')[0].appendChild(div); //add the div to the body tag |
| 113 | + div.appendChild(ul); //adds the ul to the div |
| 114 | + const img = document.createElement('img'); |
| 115 | + |
| 116 | + |
| 117 | + |
| 118 | + for( let i = 0; i < myBooks.length; i++){ |
| 119 | + const li = document.createElement('li'); |
| 120 | + const li2 = document.createElement('li'); |
| 121 | + var bookImage = document.createElement( 'img' ); |
| 122 | + const h2 = document.createElement('h2'); |
| 123 | + const h2second = document.createElement('h2'); |
| 124 | + const h1 = document.createElement('h1'); // creates title h1 |
| 125 | + var bookId = myBooks[i]; |
| 126 | + |
| 127 | + const myBook = nameOfList[bookId]; |
| 128 | + h1.innerHTML = myBook.title; |
| 129 | + h2.innerHTML = ("author"); |
| 130 | + li.innerHTML = myBook.language; |
| 131 | + h2second.innerHTML = ("language"); |
| 132 | + li2.innerHTML = myBook.author; |
| 133 | + ul.appendChild(h1second); |
| 134 | + |
| 135 | + ul.appendChild(h1); |
| 136 | + ul.appendChild(h1third); |
| 137 | + ul.appendChild(h2second); |
| 138 | + ul.appendChild(li); |
| 139 | + ul.appendChild(h2); |
| 140 | + ul.appendChild(li2); |
| 141 | + div.append( bookImage ); |
| 142 | + |
| 143 | + |
7 | 144 |
|
8 | 145 |
|
9 | | - // Replace with your own code |
10 | | - console.log(bookTitles); |
| 146 | +var bookImage = document.createElement( 'img' ); //Create a img for the book in the div and give it an attribute |
| 147 | + bookImage.src = 'img/' + bookTitles[ i ] + '.jpg'; |
| 148 | + bookImage.setAttribute( 'alt' , bookTitles[ i ] ); |
| 149 | + bookImage.setAttribute('height', '300px'); |
| 150 | + bookImage.setAttribute('width', '200px'); |
| 151 | + ul.append( bookImage ); |
| 152 | + |
11 | 153 | } |
| 154 | +fieldset.appendChild(div); |
| 155 | +document.body.append(fieldset ); |
| 156 | +}; |
| 157 | +makeBookList(); |
0 commit comments