diff --git a/docs/app.js b/docs/app.js new file mode 100644 index 000000000..8fd34b7d2 --- /dev/null +++ b/docs/app.js @@ -0,0 +1,100 @@ +'use strict'; + +document.addEventListener('DOMContentLoaded', function() { + const bookTitles = [ + // Replace with your own book titles + "sophie's_world", + 'lord_of_the_rings', + 'of_mice_and_men', + 'the_brothers_karamazov', + 'a_farewell_to_the_arms', + 'lord_of_the_flies', + 'the_dark_tower', + 'love_story', + 'harry_potter_chamber_secrets', + 'metamorphoses_and_other_stories', + ]; + + const books = { + harry_potter_chamber_secrets: { + title: 'Harry Potter Chamber Secrets', + language: 'English', + author: 'JK Rowling', + }, + "sophie's_world": { title: "Sophie's World", language: 'English', author: 'Josten Gaarder' }, + metamorphoses_and_other_stories: { + title: 'Metamorphoses And Other Stories', + language: 'English', + author: 'Franz Kafka', + }, + lord_of_the_rings: { title: 'Lord Of The Rings', language: 'English', author: 'JJ Tolkien' }, + of_mice_and_men: { title: 'Of Mice And Men', language: 'English', author: 'John Steinbeck' }, + the_brothers_karamazov: { + title: 'The Brothers Karamazov', + language: 'English', + author: 'Fyodor Dostoevsky', + }, + a_farewell_to_the_arms: { + title: 'A Farewell To The Arms', + language: 'English', + author: 'Ernst Hemmingway', + }, + lord_of_the_flies: { + title: 'Lord Of The Flies', + language: 'English', + author: 'William Golding', + }, + the_dark_tower: { title: 'The Dark Tower', language: 'English', author: 'Stephen King' }, + love_story: { title: 'Love Story', language: 'English', author: 'Erich Segal' }, + }; + + const imgSrc = { + harry_potter_chamber_secrets: './images/harry_potter_chamber_secrets.jpg', + "sophie's_world": "./images/sophie's_world.jpg", + metamorphoses_and_other_stories: './images/metamorphoses_and_other_stories.jpg', + lord_of_the_rings: './images/lord_of_the_rings.jpg', + of_mice_and_men: './images/of_mice_and_men.jpg', + the_brothers_karamazov: './images/the_brothers_karamazov.jpg', + a_farewell_to_the_arms: './images/a_farewell_to_the_arms.jpg', + lord_of_the_flies: './images/lord_of_the_flies.jpg', + the_dark_tower: './images/the_dark_tower.jpg', + love_story: './images/love_story.jpg', + }; + + function addLi(ul) { + for (let i = 0; i < bookTitles.length; i++) { + const li = document.createElement('li'); + const title = document.createElement('h3'); + const author = document.createElement('h4'); + const language = document.createElement('h4'); + ul.appendChild(li); + li.appendChild(title); + li.appendChild(author); + li.appendChild(language); + li.setAttribute('id', bookTitles[i]); + title.innerText = books[bookTitles[i]].title; + author.innerText = books[bookTitles[i]].author; + language.innerText = books[bookTitles[i]].language; + } + } + + function addImg() { + for (let i = 0; i < bookTitles.length; i++) { + const li = document.getElementById(bookTitles[i]); + const img = document.createElement('img'); + li.appendChild(img); + img.src = imgSrc[li.id]; + } + } + + function main() { + const div = document.createElement('div'); + const ul = document.createElement('ul'); + document.body.appendChild(div); + div.appendChild(ul); + addLi(ul); + addImg(); + } + + window.addEventListener('load', main); +}); diff --git a/docs/images/a_farewell_to_the_arms.jpg b/docs/images/a_farewell_to_the_arms.jpg new file mode 100644 index 000000000..6d1fbb99c Binary files /dev/null and b/docs/images/a_farewell_to_the_arms.jpg differ diff --git a/docs/images/harry_potter_chamber_secrets.jpg b/docs/images/harry_potter_chamber_secrets.jpg new file mode 100644 index 000000000..af705f54d Binary files /dev/null and b/docs/images/harry_potter_chamber_secrets.jpg differ diff --git a/docs/images/lord_of_the_flies.jpg b/docs/images/lord_of_the_flies.jpg new file mode 100644 index 000000000..8eb765b1f Binary files /dev/null and b/docs/images/lord_of_the_flies.jpg differ diff --git a/docs/images/lord_of_the_rings.jpg b/docs/images/lord_of_the_rings.jpg new file mode 100644 index 000000000..010e5c13c Binary files /dev/null and b/docs/images/lord_of_the_rings.jpg differ diff --git a/docs/images/love_story.jpg b/docs/images/love_story.jpg new file mode 100644 index 000000000..fb9cbc3dc Binary files /dev/null and b/docs/images/love_story.jpg differ diff --git a/docs/images/metamorphoses_and_other_stories.jpg b/docs/images/metamorphoses_and_other_stories.jpg new file mode 100644 index 000000000..a65745210 Binary files /dev/null and b/docs/images/metamorphoses_and_other_stories.jpg differ diff --git a/docs/images/of_mice_and_men.jpg b/docs/images/of_mice_and_men.jpg new file mode 100644 index 000000000..80c30d230 Binary files /dev/null and b/docs/images/of_mice_and_men.jpg differ diff --git a/docs/images/sophie's_world.jpg b/docs/images/sophie's_world.jpg new file mode 100644 index 000000000..d9421aaf5 Binary files /dev/null and b/docs/images/sophie's_world.jpg differ diff --git a/docs/images/the_brothers_karamazov.jpg b/docs/images/the_brothers_karamazov.jpg new file mode 100644 index 000000000..e7d79b6bb Binary files /dev/null and b/docs/images/the_brothers_karamazov.jpg differ diff --git a/docs/images/the_dark_tower.jpg b/docs/images/the_dark_tower.jpg new file mode 100644 index 000000000..e0ab6b596 Binary files /dev/null and b/docs/images/the_dark_tower.jpg differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 000000000..b7dced97a --- /dev/null +++ b/docs/index.html @@ -0,0 +1,13 @@ + + + + + + + + Document + + + + + diff --git a/docs/style.css b/docs/style.css new file mode 100644 index 000000000..0c96bc866 --- /dev/null +++ b/docs/style.css @@ -0,0 +1,28 @@ +/* add your styling here */ +body { + background: #f4f4f4; +} +ul { + display: flex; + list-style: none; + flex-wrap: wrap; + background: #f4f4f4; +} +li { + text-align: center; + display: flex; + flex-flow: column; + align-items: center; + justify-items: center; + margin: 0.5%; + background: #dcd0c0; + width: 23%; + font-size: 100%; + border: solid 1px black; + border-radius: 5px; +} +img { + width: 80%; + height: 80%; + padding-bottom: 5%; +}