From 0bb96746338af56569bd48794e8b36e4c939a059 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Tue, 26 Aug 2025 17:55:15 +0200 Subject: [PATCH 01/17] bytte titel --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b2e64bc..1ac7059 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,16 @@ + - Library + Emmas bibbla +

Library

+ \ No newline at end of file From 0a2c3c4d0ec26efc93382e0878b678c57840097d Mon Sep 17 00:00:00 2001 From: HejHTML Date: Tue, 26 Aug 2025 18:01:26 +0200 Subject: [PATCH 02/17] tagit bort recepten --- script.js | 219 ------------------------------------------------------ 1 file changed, 219 deletions(-) diff --git a/script.js b/script.js index fa49de3..e245883 100644 --- a/script.js +++ b/script.js @@ -188,222 +188,3 @@ const books = [ } ] -const recipes = [ - { - name: 'Individual vegetarian lasagnes', - cuisineType: ['italian'], - ingredients: [ - '1.2 kg cherry tomatoes', - '5 sprigs of fresh thyme', - 'extra virgin olive oil', - '2 shallots', - '2 cloves of garlic', - '500 g baby spinach', - '8-12 fresh or dried lasagne sheets', - '350 g ricotta cheese', - 'WHITE SAUCE', - '600 ml milk', - '25 g unsalted butter', - '2 heaped tablespoons flour', - '150 g vegetarian sharp, mature cheese', - '100 g mozzarella' - ], - source: 'Jamie Oliver', - totalTime: 130, - url: 'http://www.jamieoliver.com/recipes/vegetables-recipes/individual-vegetarian-lasagnes/', - image: './recipe-images/individual-vegetarian-lasagnes.jpg' - }, - { - name: 'Vegetarian Stir-Fried Garlic Scape', - cuisineType: ['Balanced'], - ingredients: [ - '8 oz. garlic scapes', - '3 oz. baby corn', - '3 oz. carrots', - '1 oz. dried shiitake mushrooms', - '1 clove of garlic sliced thinly', - '3 slices of fresh ginger root', - '2 tablespoons vegetable oil', - '1/4 cup shaoxing cooking wine', - '1/4 vegetarian stock or water', - '1 tablespoon light soy sauce', - '1 teaspoon sugar', - '1 teaspoon cornstarch', - '1/4 teaspoon ground white pepper' - ], - source: 'Red Cook', - totalTime: null, - url: 'http://redcook.net/2010/06/16/garlic-scape-an-off-menu-treat/', - image: './recipe-images/vegetarian-stir-fried-garlic-s.jpg' - }, - { - name: 'Cheat’s cheesy focaccia', - cuisineType: ['Italian'], - ingredients: [ - '500g pack bread mix', - '2 tbsp olive oil , plus a little extra for drizzling', - '25g parmesan (or vegetarian alternative), grated', - '75g dolcelatte cheese (or vegetarian alternative)' - ], - source: 'BBC Good Food', - totalTime: 40, - url: 'https://www.bbcgoodfood.com/recipes/cheats-cheesy-focaccia', - image: './recipe-images/cheat’s-cheesy-focaccia.jpg' - }, - { - name: "Vegetarian Shepherd's Pie", - cuisineType: ['Balanced', 'High-Fiber'], - ingredients: [ - '2 tablespoons extra-virgin olive oil', - '1 large onion, finely diced', - '2 carrots, peeled and thinly sliced', - '2 celery stalks, thinly sliced', - '10 ounces cremini mushrooms, trimmed and sliced', - '1 tablespoon tomato paste', - "1 tablespoon vegetarian Worcestershire sauce, such as Annie's Naturals", - '1 dried bay leaf', - '1 cup French green lentils, picked over', - 'Kosher salt and freshly ground pepper', - '1 cup frozen peas', - '2 pounds Yukon Gold potatoes, scrubbed and cut into 1 1/2-inch pieces', - '4 cloves garlic', - '4 tablespoons unsalted butter', - '1/2 cup whole milk, warmed' - ], - source: 'Martha Stewart', - totalTime: 120, - url: 'https://www.marthastewart.com/1535235/vegetarian-shepherds-pie', - image: "./recipe-images/vegetarian-shepherd's-pie.jpg" - }, - { - name: 'Chicken Paprikash', - cuisineType: ['Low-Carb'], - ingredients: [ - '640 grams chicken - drumsticks and thighs ( 3 whole chicken legs cut apart)', - '1/2 teaspoon salt', - '1/4 teaspoon black pepper', - '1 tablespoon butter – cultured unsalted (or olive oil)', - '240 grams onion sliced thin (1 large onion)', - '70 grams Anaheim pepper chopped (1 large pepper)', - '25 grams paprika (about 1/4 cup)', - '1 cup chicken stock', - '1/2 teaspoon salt', - '1/2 cup sour cream', - '1 tablespoon flour – all-purpose' - ], - source: 'No Recipes', - totalTime: 80, - url: 'http://norecipes.com/recipe/chicken-paprikash/', - image: './recipe-images/chicken-paprikash.jpg' - }, - { - name: 'Baked Chicken', - cuisineType: ['american'], - ingredients: [ - '6 bone-in chicken breast halves, or 6 chicken thighs and wings, skin-on', - '1/2 teaspoon coarse salt', - '1/2 teaspoon Mrs. Dash seasoning', - '1/4 teaspoon freshly ground black pepper' - ], - source: 'Martha Stewart', - totalTime: 90, - url: 'http://www.marthastewart.com/318981/baked-chicken', - image: './recipe-images/baked-chicken.jpg' - }, - { - name: 'Deep Fried Fish Bones', - cuisineType: ['south east asian'], - ingredients: ['8 small whiting fish or smelt', '4 cups vegetable oil'], - source: 'Serious Eats', - totalTime: 31, - url: 'http://www.seriouseats.com/recipes/2011/03/deep-fried-fish-bones-recipe.html', - image: './recipe-images/deep-fried-fish-bones.jpg' - }, - { - name: 'Burnt-Scallion Fish', - cuisineType: ['chinese'], - ingredients: [ - '2 bunches scallions', - '8 tbsp. butter', - '2 8-oz. fish filets' - ], - source: 'Saveur', - totalTime: 70, - url: 'http://www.saveur.com/article/Recipes/Burnt-Scallion-Fish', - image: './recipe-images/fish-dish.jpg' - }, - { - name: 'Curry-Crusted Fish', - cuisineType: ['south east asian'], - ingredients: [ - '3 slices bread , about 85g/3oz in total', - '1 lime', - '1.0 tbsp Korma curry paste', - '4 thick white fish fillets' - ], - source: 'BBC Good Food', - totalTime: 80, - url: 'http://www.bbcgoodfood.com/recipes/4717/', - image: './recipe-images/fish-dish.jpg' - }, - { - name: 'Meat Stock', - cuisineType: 'american', - ingredients: [ - '2.5 pounds beef marrow bones', - '1 large onion, quartered', - '2 carrots, sliced', - '1 leek, cleaned and sliced', - '2 celery stalks, sliced', - '2.5 pounds organic beef stew meat, cubed', - '2 tablespoons tomato paste', - '5 cloves garlic', - '2 bay leaves', - '3 sprigs thyme', - '3 sprigs Italian parsley', - '1/2 teaspoon black peppercorns' - ], - source: 'Food52', - totalTime: 60, - url: 'https://food52.com/recipes/3712-meat-stock', - image: './recipe-images/meat.jpg' - }, - { - name: 'Homemade Meat Broth', - cuisineType: 'american', - ingredients: [ - '1 teaspoon salt', - '1 carrot, peeled', - '1 medium onion, peeled', - '2 or 3 celery stalks', - '¼ red or yellow bell pepper, stripped of all its seeds', - '1 small boiling potato, peeled', - '1 ripe, fresh tomato, or 1 canned Italian plum tomato, drained of juice', - '5 pounds assorted pieces of meat and bones (see meat suggestions above), of which no less than 1½ pounds is all meat' - ], - source: 'Cookstr', - totalTime: 60, - url: 'http://www.cookstr.com/recipes/il-brodo-homemade-meat-broth', - image: './recipe-images/meat.jpg' - }, - { - name: 'Spice-Rubbed Grilled Flap Meat (Sirloin Tip) Recipe', - cuisineType: 'south-american', - ingredients: [ - '1 tablespoon whole black peppercorns, toasted', - '1 teaspoon coriander seed, toasted', - '1 teaspoon fennel seed, toasted', - '1 teaspoon cumin pods, toasted', - '1 teaspoon red pepper flakes', - '1/2 teaspoon dried oregano', - '2 medium cloves garlic, minced (about 2 teaspoons)', - '2 tablespoons vegetable or canola oil', - '1 whole flap meat steak, 2 to 2 1/2 pounds', - 'Kosher salt' - ], - source: 'Serious Eats', - totalTime: 240, - url: 'http://www.seriouseats.com/recipes/2012/05/spice-rubbed-grilled-flap-meat-sirloin-tip-recipe.html', - image: './recipe-images/grilled.jpg' - } -] From f9586c5d841174ce5df72bda364697c50b525381 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Wed, 27 Aug 2025 18:51:49 +0200 Subject: [PATCH 03/17] connected css and js --- index.html | 7 ++++--- script.js | 6 +----- style.css | 3 ++- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 1ac7059..4c9f30f 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,14 @@ - Emmas bibbla + -

Library

- +

Emmas bibbla

+ + \ No newline at end of file diff --git a/script.js b/script.js index e245883..503cc4c 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,5 @@ -/*Here we have created two different arrays that you can work with if you want. -If you choose to create your own arrays with elements, just make sure to create -some properties that is possible to filter and sort. +/*Library of books*/ -Remember to remove code you don't need. -*/ const books = [ { diff --git a/style.css b/style.css index 141f501..b1f4f99 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,4 @@ body { - background: blue; + background: rgb(85, 85, 195); + font-family: Verdana, Geneva, Tahoma, sans-serif; } \ No newline at end of file From 22a94d8bbbc822b502157062400f8ffb31352d4c Mon Sep 17 00:00:00 2001 From: HejHTML Date: Wed, 27 Aug 2025 19:02:14 +0200 Subject: [PATCH 04/17] added div id book-list --- index.html | 2 +- script.js | 26 +++++++++++++++++++++++++- style.css | 14 ++++++++++++++ 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 4c9f30f..0046f5a 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,8 @@

Emmas bibbla

+
Böcker
- \ No newline at end of file diff --git a/script.js b/script.js index 503cc4c..90869a6 100644 --- a/script.js +++ b/script.js @@ -70,7 +70,7 @@ const books = [ rating: 4.7, description: 'The first book in the beloved Harry Potter series, it introduces readers to the magical world of Hogwarts and the young wizard Harry Potter.', - image: "./books-images/harry-potter-and-the-sorcerer'.jpg" + image: "./books-images/harry-potter-and-the-sorcerer.jpg" }, { title: 'Moby-Dick', @@ -183,4 +183,28 @@ const books = [ image: './books-images/unknown.jpg' } ] +// Hitta container i HTML där böckerna ska visas +const bookList = document.getElementById("book-list"); + +// Loopa igenom alla böcker +books.forEach(book => { + // Skapa ett div-element för varje bok + const bookItem = document.createElement("div"); + bookItem.classList.add("book"); // kan styla med CSS + + // Lägg in HTML med titel, författare, år och bild + bookItem.innerHTML = ` + ${book.title} +

${book.title}

+

Author: ${book.author}

+

Year: ${book.year}

+

Genre: ${book.genre}

+

Rating: ${book.rating}

+

${book.description}

+ `; + + // Lägg till bok-diven i container + bookList.appendChild(bookItem); +}); + diff --git a/style.css b/style.css index b1f4f99..21902b2 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,18 @@ body { background: rgb(85, 85, 195); font-family: Verdana, Geneva, Tahoma, sans-serif; +} + +.book { + border: 1px solid green; + padding: 10px; + margin: 10px; + border-radius: 5px; + background-color: #f9f9f9; +} + +.book img { + width: 150px; + height: 220px; + object-fit: cover; } \ No newline at end of file From 362800952bcc48797c81111bcb51bb71dbeb23c6 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 14:02:34 +0200 Subject: [PATCH 05/17] added filter --- index.html | 25 +++++++++++++++- script.js | 88 ++++++++++++++++++++++++++++++++++++++++-------------- style.css | 49 ++++++++++++++++++++++++++++-- 3 files changed, 137 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index 0046f5a..338e4bb 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,30 @@

Emmas bibbla

-
Böcker
+
+ + + + + +
+ +
diff --git a/script.js b/script.js index 90869a6..b123744 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,3 @@ -/*Library of books*/ - const books = [ { @@ -182,29 +180,75 @@ const books = [ 'A dystopian novel set in a seemingly perfect society where young Jonas discovers the dark truth beneath the surface.', image: './books-images/unknown.jpg' } -] -// Hitta container i HTML där böckerna ska visas +]; + +// Hitta container i HTML const bookList = document.getElementById("book-list"); +const genreSelect = document.getElementById("genre-filter"); +const sortSelect = document.getElementById("sort-books"); +const searchInput = document.getElementById("search-bar"); +const randomBtn = document.getElementById("random-book"); + +// Funktion för att visa böcker +function displayBooks(arr) { + bookList.innerHTML = ""; + arr.forEach(book => { + const bookItem = document.createElement("div"); + bookItem.classList.add("book"); + bookItem.innerHTML = ` + ${book.title} +

${book.title}

+

Författare: ${book.author}

+

År: ${book.year}

+

Genre: ${book.genre}

+

Betyg: ${book.rating}

+

${book.description}

+ `; + bookList.appendChild(bookItem); + }); +} + +// Uppdatera lista baserat på filter, sort och search +function updateBooks() { + let filtered = [...books]; + + // Filter genre + const genre = genreSelect.value; + if (genre !== "all") filtered = filtered.filter(book => book.genre === genre); + + // Search + const query = searchInput.value.toLowerCase(); + if (query) { + filtered = filtered.filter(book => + book.title.toLowerCase().includes(query) || + book.author.toLowerCase().includes(query) + ); + } -// Loopa igenom alla böcker -books.forEach(book => { - // Skapa ett div-element för varje bok - const bookItem = document.createElement("div"); - bookItem.classList.add("book"); // kan styla med CSS + // Sort + const sortValue = sortSelect.value; + if (sortValue === "year-asc") filtered.sort((a, b) => a.year - b.year); + if (sortValue === "year-desc") filtered.sort((a, b) => b.year - a.year); + if (sortValue === "rating-asc") filtered.sort((a, b) => a.rating - b.rating); + if (sortValue === "rating-desc") filtered.sort((a, b) => b.rating - a.rating); + if (sortValue === "title-asc") filtered.sort((a, b) => a.title.localeCompare(b.title)); + if (sortValue === "title-desc") filtered.sort((a, b) => b.title.localeCompare(a.title)); - // Lägg in HTML med titel, författare, år och bild - bookItem.innerHTML = ` - ${book.title} -

${book.title}

-

Author: ${book.author}

-

Year: ${book.year}

-

Genre: ${book.genre}

-

Rating: ${book.rating}

-

${book.description}

- `; + displayBooks(filtered); +} - // Lägg till bok-diven i container - bookList.appendChild(bookItem); -}); +// Event listeners +genreSelect.addEventListener("change", updateBooks); +sortSelect.addEventListener("change", updateBooks); +searchInput.addEventListener("input", updateBooks); +// Slumpbok +if (randomBtn) { + randomBtn.addEventListener("click", () => { + const randomBook = books[Math.floor(Math.random() * books.length)]; + displayBooks([randomBook]); + }); +} +// Visa alla böcker initialt +updateBooks(); diff --git a/style.css b/style.css index 21902b2..c1dc23e 100644 --- a/style.css +++ b/style.css @@ -3,16 +3,61 @@ body { font-family: Verdana, Geneva, Tahoma, sans-serif; } +#book-list { + display: grid; + grid-template-columns: 1fr; + /* Mobil: en kolumn */ + gap: 20px; + justify-content: center; +} + .book { border: 1px solid green; padding: 10px; margin: 10px; - border-radius: 5px; - background-color: #f9f9f9; + border-radius: 10px; + background-color: #968989; + box-shadow: 5px 5px 10px rgb(106, 176, 106); + max-width: 300px; + text-align: center; } .book img { width: 150px; height: 220px; object-fit: cover; +} + +/* iPad (portrait & landscape: 2 kolumner) */ +@media screen and (min-width: 600px) and (max-width: 1024px) { + #book-list { + grid-template-columns: repeat(2, 1fr); + } + + .book { + max-width: 350px; + margin: 20px auto; + } + + .book img { + width: 180px; + height: 250px; + } +} + +/* Laptop och större skärmar: 4 kolumner */ +@media screen and (min-width: 1025px) { + #book-list { + grid-template-columns: repeat(4, 1fr); + } + + .book { + max-width: 400px; + margin: 20px; + } + + .book img { + width: 200px; + height: 280px; + } } \ No newline at end of file From d44608031d5310a7bb15cb81b31ff69e019e94f6 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 15:00:58 +0200 Subject: [PATCH 06/17] added cool colors and shapes --- index.html | 9 ++++++-- style.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 65 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 338e4bb..f83be4f 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,12 @@ - Emmas bibbla + Library = Bibliotek -

Emmas bibbla

+

Biblioteket!

+ +
+ + +
diff --git a/style.css b/style.css index c1dc23e..7dad884 100644 --- a/style.css +++ b/style.css @@ -3,20 +3,58 @@ body { font-family: Verdana, Geneva, Tahoma, sans-serif; } +h1 { + text-align: center; + font-size: 50px; + text-shadow: 2px 2px 4px greenyellow; +} + #book-list { display: grid; grid-template-columns: 1fr; - /* Mobil: en kolumn */ gap: 20px; justify-content: center; } +.controls { + display: grid; + justify-items: center; + align-items: center; + gap: 10px; + max-width: 400px; + margin: 20px auto; + padding: 10px; +} + +.controls select, +.controls input, +#random-book { + width: 100%; + max-width: 300px; + padding: 8px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 14px; + box-sizing: border-box; +} + +#random-book { + background-color: #76b706; + color: white; + border: none; + cursor: pointer; +} + +#random-book:hover { + background-color: #0e451a; +} + .book { border: 1px solid green; padding: 10px; margin: 10px; border-radius: 10px; - background-color: #968989; + background-color: #bb65a1; box-shadow: 5px 5px 10px rgb(106, 176, 106); max-width: 300px; text-align: center; @@ -24,11 +62,13 @@ body { .book img { width: 150px; - height: 220px; + height: 150px; + margin-top: 10px; object-fit: cover; + border-radius: 50%; } -/* iPad (portrait & landscape: 2 kolumner) */ +/* Padda, 2 kolumner */ @media screen and (min-width: 600px) and (max-width: 1024px) { #book-list { grid-template-columns: repeat(2, 1fr); @@ -45,7 +85,7 @@ body { } } -/* Laptop och större skärmar: 4 kolumner */ +/* Dator, 4 kolumner*/ @media screen and (min-width: 1025px) { #book-list { grid-template-columns: repeat(4, 1fr); @@ -57,7 +97,18 @@ body { } .book img { - width: 200px; - height: 280px; + width: 150px; + height: 150px; + margin-top: 10px; + object-fit: cover; + border-radius: 50%; + } + + .controls { + display: flex; + gap: 25px; + max-width: 1000px; + margin: 20px auto; + padding: 10px; } } \ No newline at end of file From cd725107fd5bce1596014e65832cc03fa338f5dc Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 15:28:57 +0200 Subject: [PATCH 07/17] fixed images --- index.html | 62 ++++++++++++++++++++++++++++-------------------------- script.js | 22 +++++++++++++++---- style.css | 7 ++++-- 3 files changed, 55 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index f83be4f..62e28b1 100644 --- a/index.html +++ b/index.html @@ -9,36 +9,38 @@ -

Biblioteket!

-
- - - - - - - -
- - - - -
+
+

Biblioteket!

+
+ + + + + + + + + +
+ +
+
+
diff --git a/script.js b/script.js index b123744..97b1d0a 100644 --- a/script.js +++ b/script.js @@ -68,7 +68,7 @@ const books = [ rating: 4.7, description: 'The first book in the beloved Harry Potter series, it introduces readers to the magical world of Hogwarts and the young wizard Harry Potter.', - image: "./books-images/harry-potter-and-the-sorcerer.jpg" + image: './books-images/harry-potter-and-the-sorcerer.jpg' }, { title: 'Moby-Dick', @@ -193,7 +193,7 @@ const randomBtn = document.getElementById("random-book"); function displayBooks(arr) { bookList.innerHTML = ""; arr.forEach(book => { - const bookItem = document.createElement("div"); + const bookItem = document.createElement("article"); bookItem.classList.add("book"); bookItem.innerHTML = ` ${book.title} @@ -242,13 +242,27 @@ genreSelect.addEventListener("change", updateBooks); sortSelect.addEventListener("change", updateBooks); searchInput.addEventListener("input", updateBooks); -// Slumpbok +const randomBookContainer = document.getElementById("random-book-container"); + if (randomBtn) { randomBtn.addEventListener("click", () => { const randomBook = books[Math.floor(Math.random() * books.length)]; - displayBooks([randomBook]); + randomBookContainer.innerHTML = ""; // rensa tidigare + const bookItem = document.createElement("div"); + bookItem.classList.add("book"); + bookItem.innerHTML = ` + ${randomBook.title} +

${randomBook.title}

+

Författare: ${randomBook.author}

+

År: ${randomBook.year}

+

Genre: ${randomBook.genre}

+

Betyg: ${randomBook.rating}

+

${randomBook.description}

+ `; + randomBookContainer.appendChild(bookItem); }); } + // Visa alla böcker initialt updateBooks(); diff --git a/style.css b/style.css index 7dad884..b012620 100644 --- a/style.css +++ b/style.css @@ -80,8 +80,11 @@ h1 { } .book img { - width: 180px; - height: 250px; + width: 150px; + height: 150px; + margin-top: 10px; + object-fit: cover; + border-radius: 50%; } } From 96848be17ba5e63921985be2ee67a3d08e49a71a Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 16:22:35 +0200 Subject: [PATCH 08/17] center random book --- index.html | 5 ++++- style.css | 21 +++++++++++++++++++++ 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 62e28b1..ebaa351 100644 --- a/index.html +++ b/index.html @@ -38,10 +38,13 @@

Biblioteket!

-
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css index b012620..4a9eade 100644 --- a/style.css +++ b/style.css @@ -68,6 +68,13 @@ h1 { border-radius: 50%; } +.random-book-container { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: 20px 0; +} + /* Padda, 2 kolumner */ @media screen and (min-width: 600px) and (max-width: 1024px) { #book-list { @@ -114,4 +121,18 @@ h1 { margin: 20px auto; padding: 10px; } + + #random-book-container { + display: flex; + justify-content: center; + margin: 20px 0; + width: 100%; + } + + #random-book-container .book { + margin: 0 auto; + + } + + } \ No newline at end of file From c64d1fe2ee658982ce0d4dc7d83664feae8589b6 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 16:24:50 +0200 Subject: [PATCH 09/17] clean code --- script.js | 9 ++++----- style.css | 1 - 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/script.js b/script.js index 97b1d0a..74bd153 100644 --- a/script.js +++ b/script.js @@ -182,14 +182,14 @@ const books = [ } ]; -// Hitta container i HTML +// Container i HTML const bookList = document.getElementById("book-list"); const genreSelect = document.getElementById("genre-filter"); const sortSelect = document.getElementById("sort-books"); const searchInput = document.getElementById("search-bar"); const randomBtn = document.getElementById("random-book"); -// Funktion för att visa böcker +// Funktion visa böcker function displayBooks(arr) { bookList.innerHTML = ""; arr.forEach(book => { @@ -225,7 +225,7 @@ function updateBooks() { ); } - // Sort + // Sortera const sortValue = sortSelect.value; if (sortValue === "year-asc") filtered.sort((a, b) => a.year - b.year); if (sortValue === "year-desc") filtered.sort((a, b) => b.year - a.year); @@ -237,7 +237,7 @@ function updateBooks() { displayBooks(filtered); } -// Event listeners +// Event listning genreSelect.addEventListener("change", updateBooks); sortSelect.addEventListener("change", updateBooks); searchInput.addEventListener("input", updateBooks); @@ -263,6 +263,5 @@ if (randomBtn) { }); } - // Visa alla böcker initialt updateBooks(); diff --git a/style.css b/style.css index 4a9eade..f2f80c0 100644 --- a/style.css +++ b/style.css @@ -134,5 +134,4 @@ h1 { } - } \ No newline at end of file From b631dc6a29342a46459631f0c050202eaef93a60 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 16:27:53 +0200 Subject: [PATCH 10/17] random book --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index ebaa351..385122f 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@

Biblioteket!

- + From 3e229845f2fa863d88f66e6a50562122d63df503 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 16:29:36 +0200 Subject: [PATCH 11/17] rename random --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 385122f..53e500f 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@

Biblioteket!

- + From 4e564cfc63108ab56a968b52ea074e85b51eb5e4 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 17:02:43 +0200 Subject: [PATCH 12/17] cleaning up --- script.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/script.js b/script.js index 74bd153..c8900eb 100644 --- a/script.js +++ b/script.js @@ -182,14 +182,14 @@ const books = [ } ]; -// Container i HTML +/* Container i HTML*/ const bookList = document.getElementById("book-list"); const genreSelect = document.getElementById("genre-filter"); const sortSelect = document.getElementById("sort-books"); const searchInput = document.getElementById("search-bar"); const randomBtn = document.getElementById("random-book"); -// Funktion visa böcker +/* Funktion visa böcker*/ function displayBooks(arr) { bookList.innerHTML = ""; arr.forEach(book => { @@ -208,15 +208,15 @@ function displayBooks(arr) { }); } -// Uppdatera lista baserat på filter, sort och search +/*Uppdatera lista baserat på filter, sort och search*/ function updateBooks() { let filtered = [...books]; - // Filter genre + /* Filter genre*/ const genre = genreSelect.value; if (genre !== "all") filtered = filtered.filter(book => book.genre === genre); - // Search + /* Search*/ const query = searchInput.value.toLowerCase(); if (query) { filtered = filtered.filter(book => @@ -225,7 +225,7 @@ function updateBooks() { ); } - // Sortera + /*Sortera*/ const sortValue = sortSelect.value; if (sortValue === "year-asc") filtered.sort((a, b) => a.year - b.year); if (sortValue === "year-desc") filtered.sort((a, b) => b.year - a.year); @@ -237,7 +237,7 @@ function updateBooks() { displayBooks(filtered); } -// Event listning +/*Event listning*/ genreSelect.addEventListener("change", updateBooks); sortSelect.addEventListener("change", updateBooks); searchInput.addEventListener("input", updateBooks); @@ -263,5 +263,5 @@ if (randomBtn) { }); } -// Visa alla böcker initialt +/* Visa alla böcker initialt*/ updateBooks(); From 5d2ba1d2cbc6b8b2d1e0ff107dd36a2a007b9cbe Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 17:27:39 +0200 Subject: [PATCH 13/17] added README --- README.md | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index be66a43..339492b 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,20 @@ # Library -Replace this readme with your own information about the project. You can include things like: +Hi! -- Brief description of the assignment -- How you approached the task, what tools and techniques you used, and how you planned it -- If you had more time, what would be next? +I started off by asking ChatGPT about every element, every part in the javascript that I did not understand the function of just by reading and looking at videos. Tried to really get in to which code did what and asked a lot about the filter and sorting. I had a loooong talk about loops and how the looping works and why it was effective to write in a way so that I did not have put all book in again and again. + +I got lost in css at first, because it's great to have a nice site to look at. But then I really digged into js. I spent my free time during the week reading and taking all the classes and quiz on js in course. I took the quiz several times. Until I nailed it every time. I want to know that I know - not just get stuck in asking chatGPT everytime I forget. But wow, it's very helpful to ask so you don't get stuck and loose all energy in the process. +I'm glad I have some previous knowledge in coding, otherwise I would have felt like a cheaty cheater and probably had listened more to chatGPT. Now I'm at least a very irritating boss to it that calls it out when it gets things wrong. + +What more could I say about this project? I really liked it. I starts to feel like real websites now. I'm very very excited over the design part. Maybe because it's the easy bits. I don't feel I struggle with html or css, it all makes sense to me. I think I will study UI/UX after this course. + +If I did this again, I would have written down a few more js-datatypes, keywords and variables during lessons. Maybe some had stuck more and I did not have to argue so much with chatGPT about them. "What does it do?" "Why do I need this?" "How does it work when my code looks like this?" and a few "can you figure out what I did wrong here?" It is very helpful when AI explains to me in what order to write. Sometimes I have the right code but in the wrong order. + +Happy coding! + +Best regards +Emma ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +(https://boktipset.netlify.app/) From 43b937577778238834629b621e5d3d8c7e084016 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 18:57:50 +0200 Subject: [PATCH 14/17] changed css font --- index.html | 4 ++-- script.js | 6 +++--- style.css | 11 +++++++---- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 53e500f..970cbc0 100644 --- a/index.html +++ b/index.html @@ -26,14 +26,14 @@

Biblioteket!

- + diff --git a/script.js b/script.js index c8900eb..5a9e985 100644 --- a/script.js +++ b/script.js @@ -198,9 +198,9 @@ function displayBooks(arr) { bookItem.innerHTML = ` ${book.title}

${book.title}

-

Författare: ${book.author}

-

År: ${book.year}

-

Genre: ${book.genre}

+

${book.author}

+

${book.year}

+

${book.genre}

Betyg: ${book.rating}

${book.description}

`; diff --git a/style.css b/style.css index f2f80c0..1fbd243 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ body { - background: rgb(85, 85, 195); + background: rgb(105, 105, 240); font-family: Verdana, Geneva, Tahoma, sans-serif; } @@ -50,12 +50,13 @@ h1 { } .book { + font-family: 'Courier New', Courier, monospace; border: 1px solid green; - padding: 10px; + padding: 10px 25px 0 25px; margin: 10px; border-radius: 10px; - background-color: #bb65a1; - box-shadow: 5px 5px 10px rgb(106, 176, 106); + background-color: #cb7bb3; + box-shadow: 5px 5px 10px greenyellow; max-width: 300px; text-align: center; } @@ -66,6 +67,7 @@ h1 { margin-top: 10px; object-fit: cover; border-radius: 50%; + border: 3px solid black; } .random-book-container { @@ -104,6 +106,7 @@ h1 { .book { max-width: 400px; margin: 20px; + text-align: center; } .book img { From 7956844ffa9daf65a2ea8bc4442f51aec56e228f Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 19:00:31 +0200 Subject: [PATCH 15/17] changed css --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 1fbd243..a9ef28a 100644 --- a/style.css +++ b/style.css @@ -56,7 +56,7 @@ h1 { margin: 10px; border-radius: 10px; background-color: #cb7bb3; - box-shadow: 5px 5px 10px greenyellow; + box-shadow: 5px 5px 10px rgb(120, 225, 123); max-width: 300px; text-align: center; } From 6d973d30b94dd56c2dfaa6b92f68f8fe00bb9dff Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 19:02:22 +0200 Subject: [PATCH 16/17] changed box-shadow img --- style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/style.css b/style.css index a9ef28a..2bc7b25 100644 --- a/style.css +++ b/style.css @@ -67,6 +67,7 @@ h1 { margin-top: 10px; object-fit: cover; border-radius: 50%; + box-shadow: 5px 5px 10px rgb(21, 25, 21); border: 3px solid black; } From e0fbbaba138be207f635fa65307cbe7c0ff9ea29 Mon Sep 17 00:00:00 2001 From: HejHTML Date: Sat, 30 Aug 2025 20:25:11 +0200 Subject: [PATCH 17/17] changed background --- style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style.css b/style.css index 2bc7b25..98f27cb 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,12 @@ body { - background: rgb(105, 105, 240); + background: rgb(232, 216, 124); font-family: Verdana, Geneva, Tahoma, sans-serif; } h1 { text-align: center; font-size: 50px; - text-shadow: 2px 2px 4px greenyellow; + text-shadow: 2px 2px 4px rgb(94, 97, 91); } #book-list { @@ -39,7 +39,7 @@ h1 { } #random-book { - background-color: #76b706; + background-color: #4fa763; color: white; border: none; cursor: pointer; @@ -55,8 +55,8 @@ h1 { padding: 10px 25px 0 25px; margin: 10px; border-radius: 10px; - background-color: #cb7bb3; - box-shadow: 5px 5px 10px rgb(120, 225, 123); + background-color: #76cd8a; + box-shadow: 5px 5px 10px rgb(29, 73, 31); max-width: 300px; text-align: center; }