diff --git a/.vscode/settings.json b/.vscode/settings.json index 91171c0fe..94675782e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -15,5 +15,6 @@ "roverjs", "taalmap", "trollface" - ] + ], + "liveServer.settings.port": 5501 } \ No newline at end of file diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..6fa3dd85f 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -1,11 +1,133 @@ 'use strict'; { - const bookTitles = [ - // Replace with your own book titles - 'harry_potter_chamber_secrets', - ]; + // const bookTitles = [ + // 'the_capture', + // 'the_journey', + // 'the_rescue', + // 'the_siege', + // 'the_shattering', + // 'the_burning', + // 'the_hatchling', + // 'the_outcast', + // 'the_first_collier', + // 'the_coming_of_hoole', + // ]; - // Replace with your own code - console.log(bookTitles); + // Make a function (or functions) that generate a ul with li elements for each book ID in the array using a for loop. + // const generateLi = array => { + // const ul = document.createElement('ul'); + // document.body.appendChild(ul); + // for (const element of array) { + // const li = document.createElement('li'); + // li.innerHTML = element; + // ul.appendChild(li); + // } + // }; + + const books = { + the_capture: { + title: 'The Capture', + language: 'English', + author: 'Kathryn Lasky', + }, + the_journey: { + title: 'The Journey', + language: 'English', + author: 'Kathryn Lasky', + }, + the_rescue: { + title: 'The Rescue', + language: 'English', + author: 'Kathryn Lasky', + }, + the_siege: { + title: 'The Siege', + language: 'English', + author: 'Kathryn Lasky', + }, + the_shattering: { + title: 'The Shattering', + language: 'English', + author: 'Kathryn Lasky', + }, + the_burning: { + title: 'The Burning', + language: 'English', + author: 'Kathryn Lasky', + }, + the_hatchling: { + title: 'The Hatchling', + language: 'English', + author: 'Kathryn Lasky', + }, + the_outcast: { + title: 'The Outcast', + language: 'English', + author: 'Kathryn Lasky', + }, + the_first_collier: { + title: 'The First Collier', + language: 'English', + author: 'Kathryn Lasky', + }, + the_coming_of_hoole: { + title: 'The Coming of Hoole', + language: 'English', + author: 'Kathryn Lasky', + }, + }; + + const bookCovers = { + the_journey: './img/thejourney.jpg', + the_rescue: './img/therescue.jpg', + the_siege: './img/thesiege.jpg', + the_shattering: './img/theshattering.jpg', + the_burning: './img/theburning.jpg', + the_hatchling: './img/thehatchling.jpg', + the_outcast: './img/theoutcast.jpg', + the_first_collier: './img/thefirstcollier.jpg', + the_coming_of_hoole: './img/thecomingofhoole.jpg', + the_capture: './img/thecapture.jpg', + }; + + // generate li that includes info and book cover for each li (appended to one ul) + const generateBooks = info => { + const section = document.createElement('section'); + const ul = document.createElement('ul'); + for (const key of Object.keys(info)) { + const li = document.createElement('li'); + li.setAttribute('id', key); + const title = document.createElement('h2'); + const language = document.createElement('h3'); + const author = document.createElement('h3'); + + title.innerText = info[key].title; + language.innerText = `Language: ${info[key].language}`; + author.innerText = `Author: ${info[key].author}`; + + li.appendChild(title); + li.appendChild(language); + li.appendChild(author); + + ul.appendChild(li); + } + section.appendChild(ul); + document.body.appendChild(section); + }; + + const injectImage = images => { + for (const key of Object.keys(images)) { + const img = document.createElement('img'); + img.src = images[key]; + img.alt = key; + + const secondLi = document.getElementById(key).children[1]; + document.getElementById(key).insertBefore(img, secondLi); + } + }; + + // generate page + generateBooks(books); + injectImage(bookCovers); } diff --git a/Week1/homework/img/theburning.jpg b/Week1/homework/img/theburning.jpg new file mode 100644 index 000000000..c447d9f2d Binary files /dev/null and b/Week1/homework/img/theburning.jpg differ diff --git a/Week1/homework/img/thecapture.jpg b/Week1/homework/img/thecapture.jpg new file mode 100644 index 000000000..37f7098d1 Binary files /dev/null and b/Week1/homework/img/thecapture.jpg differ diff --git a/Week1/homework/img/thecomingofhoole.jpg b/Week1/homework/img/thecomingofhoole.jpg new file mode 100644 index 000000000..ac94e0ee4 Binary files /dev/null and b/Week1/homework/img/thecomingofhoole.jpg differ diff --git a/Week1/homework/img/thefirstcollier.jpg b/Week1/homework/img/thefirstcollier.jpg new file mode 100644 index 000000000..1580c5f34 Binary files /dev/null and b/Week1/homework/img/thefirstcollier.jpg differ diff --git a/Week1/homework/img/thehatchling.jpg b/Week1/homework/img/thehatchling.jpg new file mode 100644 index 000000000..e1bd458d7 Binary files /dev/null and b/Week1/homework/img/thehatchling.jpg differ diff --git a/Week1/homework/img/thejourney.jpg b/Week1/homework/img/thejourney.jpg new file mode 100644 index 000000000..ec3f6ba0d Binary files /dev/null and b/Week1/homework/img/thejourney.jpg differ diff --git a/Week1/homework/img/theoutcast.jpg b/Week1/homework/img/theoutcast.jpg new file mode 100644 index 000000000..31cffe1d4 Binary files /dev/null and b/Week1/homework/img/theoutcast.jpg differ diff --git a/Week1/homework/img/therescue.jpg b/Week1/homework/img/therescue.jpg new file mode 100644 index 000000000..ef92c96bf Binary files /dev/null and b/Week1/homework/img/therescue.jpg differ diff --git a/Week1/homework/img/theshattering.jpg b/Week1/homework/img/theshattering.jpg new file mode 100644 index 000000000..b51b2c7f3 Binary files /dev/null and b/Week1/homework/img/theshattering.jpg differ diff --git a/Week1/homework/img/thesiege.jpg b/Week1/homework/img/thesiege.jpg new file mode 100644 index 000000000..f6fa8dd4a Binary files /dev/null and b/Week1/homework/img/thesiege.jpg differ diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..fe8469990 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,13 @@ - \ No newline at end of file + + + + + + + + Codestin Search App + + + + + \ No newline at end of file diff --git a/Week1/homework/style.css b/Week1/homework/style.css index bab13ec23..97393687d 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -1 +1,33 @@ -/* add your styling here */ \ No newline at end of file +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + background-color: #843e22; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + line-height: 1.5; + color: #843e22; +} +section { + margin: 1em; +} +ul { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2em; + margin: 1em; +} +li { + display: flex; + flex-direction: column; + align-items: center; + background-color: #f0e6a9; + list-style: none; + padding: 0.5em 0; + font-size: 1.25rem; +} +img { + width: 60%; + margin-top: 1em; +}