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%; +} pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy