diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..ddec86396 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -1,11 +1,130 @@ 'use strict'; -{ - const bookTitles = [ - // Replace with your own book titles - 'harry_potter_chamber_secrets', - ]; - - // Replace with your own code - console.log(bookTitles); +const container = document.querySelector('.main'); + +const bookTitles = [ + 'sailor_song', + 'lame_fate', + 'roadside_picnic', + 'a_mind_for_numbers', + 'other_shores', + 'the_luzhin_defense', + 'the_brothers_karamazov', + 'one_flew_over_the_cuckoos_nest', + 'sharp_objects', + 'the_idiot', +]; + +const bookInfo = { + sailor_song: { + title: 'Sailor song', + language: 'english', + author: 'Ken Kesey', + }, + lame_fate: { + title: 'Lame fate', + language: 'russian', + author: 'Arkady Strugatsky and Boris Strugatsky', + }, + roadside_picnic: { + title: 'Roadside picnic', + language: 'russian', + author: 'Arkady Strugatsky and Boris Strugatsky', + }, + a_mind_for_numbers: { + title: 'A mind for numbers', + language: 'english', + author: 'Barbara Oakley', + }, + other_shores: { + title: 'Other Shores', + language: 'russian', + author: 'Vladimir Nabokov', + }, + the_luzhin_defense: { + title: 'The Luzhin defense', + language: 'russian', + author: 'Vladimir Nabokov', + }, + the_brothers_karamazov: { + title: 'The brothers Karamazov', + language: 'russian', + author: 'Fyodor Dostoyevsky', + }, + one_flew_over_the_cuckoos_nest: { + title: "One flew over the cuckoo's nest", + language: 'english', + author: 'Ken Kesey', + }, + sharp_objects: { + title: 'Sharp objects', + language: 'english', + author: 'Gillian Flynn', + }, + the_idiot: { + title: 'The idiot', + language: 'russian', + author: 'Fyodor Dostoyevsky', + }, +}; + +const bookCovers = { + sailor_song: './images/sailor_song.jpg', + lame_fate: './images/lame_fate.jpg', + roadside_picnic: './images/roadside_picnic.jpg', + a_mind_for_numbers: './images/a_mind_for_numbers.jpg', + other_shores: './images/other_shores.jpg', + the_luzhin_defense: './images/the_luzhin_defense.jpg', + the_brothers_karamazov: './images/the_brothers_karamazov.jpg', + one_flew_over_the_cuckoos_nest: './images/one_flew_over_the_cuckoo_nest.jpg', + sharp_objects: './images/sharp_objects.jpg', + the_idiot: './images/the_idiot.jpg', +}; + +const ul = document.createElement('ul'); +container.append(ul); + +function makeBookList(arr, obj) { + for (let i = 0; i < arr.length; i++) { + const li = document.createElement('li'); + ul.append(li); + li.setAttribute('id', arr[i]); + const bookContainer = document.createElement('div'); + bookContainer.classList.add('book_container'); + li.append(bookContainer); + for (const key in obj) { + if (key === arr[i]) { + const title = document.createElement('h1'); + title.classList.add('title', `title_${key}`); + const author = document.createElement('h2'); + author.classList.add('book_author'); + const language = document.createElement('p'); + language.classList.add('book_language'); + title.textContent = obj[key].title; + author.textContent = obj[key].author; + language.textContent = obj[key].language; + bookContainer.append(title, author, language); + } + } + } } + +makeBookList(bookTitles, bookInfo); + +function putBookCovers(bookCoversObj) { + for (const key in bookCoversObj) { + if (typeof bookCoversObj === 'object') { + const li = document.querySelector(`#${key}`); + const h1 = document.querySelector(`.title_${key}`); + if (key === li.getAttribute('id')) { + const image = document.createElement('img'); + image.setAttribute('src', `${bookCoversObj[key]}`); + image.setAttribute('alt', `book cover ${key}`); + image.classList.add('book_image'); + h1.insertAdjacentElement('afterend', image); + } + } + } +} + +putBookCovers(bookCovers); diff --git a/Week1/homework/images/a_mind_for_numbers.jpg b/Week1/homework/images/a_mind_for_numbers.jpg new file mode 100644 index 000000000..e7124a576 Binary files /dev/null and b/Week1/homework/images/a_mind_for_numbers.jpg differ diff --git a/Week1/homework/images/lame_fate.jpg b/Week1/homework/images/lame_fate.jpg new file mode 100644 index 000000000..ae644443e Binary files /dev/null and b/Week1/homework/images/lame_fate.jpg differ diff --git a/Week1/homework/images/one_flew_over_the_cuckoo_nest.jpg b/Week1/homework/images/one_flew_over_the_cuckoo_nest.jpg new file mode 100644 index 000000000..ee9eaa287 Binary files /dev/null and b/Week1/homework/images/one_flew_over_the_cuckoo_nest.jpg differ diff --git a/Week1/homework/images/other_shores.jpg b/Week1/homework/images/other_shores.jpg new file mode 100644 index 000000000..e26615b11 Binary files /dev/null and b/Week1/homework/images/other_shores.jpg differ diff --git a/Week1/homework/images/roadside_picnic.jpg b/Week1/homework/images/roadside_picnic.jpg new file mode 100644 index 000000000..cce3651fd Binary files /dev/null and b/Week1/homework/images/roadside_picnic.jpg differ diff --git a/Week1/homework/images/sailor_song.jpg b/Week1/homework/images/sailor_song.jpg new file mode 100644 index 000000000..3912187de Binary files /dev/null and b/Week1/homework/images/sailor_song.jpg differ diff --git a/Week1/homework/images/sharp_objects.jpg b/Week1/homework/images/sharp_objects.jpg new file mode 100644 index 000000000..1c1a1430e Binary files /dev/null and b/Week1/homework/images/sharp_objects.jpg differ diff --git a/Week1/homework/images/the_brothers_karamazov.jpg b/Week1/homework/images/the_brothers_karamazov.jpg new file mode 100644 index 000000000..f1c831a5c Binary files /dev/null and b/Week1/homework/images/the_brothers_karamazov.jpg differ diff --git a/Week1/homework/images/the_idiot.jpg b/Week1/homework/images/the_idiot.jpg new file mode 100644 index 000000000..4f8165777 Binary files /dev/null and b/Week1/homework/images/the_idiot.jpg differ diff --git a/Week1/homework/images/the_luzhin_defense.jpg b/Week1/homework/images/the_luzhin_defense.jpg new file mode 100644 index 000000000..ee95f4f15 Binary files /dev/null and b/Week1/homework/images/the_luzhin_defense.jpg differ diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..1aa78b7f7 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,18 @@ - \ No newline at end of file + + + + + + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/Week1/homework/style.css b/Week1/homework/style.css index bab13ec23..3f3242b55 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -1 +1,64 @@ -/* add your styling here */ \ No newline at end of file +body { + margin: 0; +} +.main { + margin: 0 auto; + font-family: 'Brygada 1918', serif; + background-color: #1d2247; +} + +ul { + margin: 0; + list-style-type: none; + padding: 0; + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 20px; + margin-left: 20px; +} + +.book_image { + width: 180px; + height: 280px; + transition: transform 200ms linear; +} + +.book_image:hover { + transform: scale(1.2); +} + +.book_container { + display: flex; + flex-direction: column; + justify-content: center; +} + +.title { + margin: 0; + margin-top: 40px; + color: #fff; + font-size: 27px; + width: 180px; + text-align: center; + min-height: 93px; +} + +.book_author { + margin: 0; + margin-top: 20px; + color: #fff; + font-size: 18px; + width: 180px; + height: 45px; + text-align: center; +} + +.book_language { + margin: 0; + margin-top: 10px; + margin-bottom: 30px; + color: #fff; + font-size: 15px; + width: 180px; + text-align: center; +}