From 7e91674a01331ca319d2838c5e50f29c64228f3d Mon Sep 17 00:00:00 2001 From: Mika Eberstein Date: Wed, 18 Sep 2024 19:27:09 +0200 Subject: [PATCH 01/14] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d38b84..9e43d1d 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ -# project-library \ No newline at end of file +# project-library + +Hej hej update just to check From 35d025f86300f2ccd46ab266f385ee7088a0d4f3 Mon Sep 17 00:00:00 2001 From: Mika Date: Wed, 18 Sep 2024 19:49:25 +0200 Subject: [PATCH 02/14] mapping over book list and render on html --- index.html | 25 ++-- script.js | 404 +++++++++++++---------------------------------------- 2 files changed, 112 insertions(+), 317 deletions(-) diff --git a/index.html b/index.html index cf5c31a..4e4e972 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,14 @@ - + - - - - - Project Library - - -

Project Library

- - - \ No newline at end of file + + + + Mikas Library + + + +

Project Library

+ + + + diff --git a/script.js b/script.js index 6a61c06..0c2997a 100644 --- a/script.js +++ b/script.js @@ -4,403 +4,197 @@ of the properties make sense to filter on, and some to sort on.*/ const books = [ { - title: 'The Great Gatsby', - author: 'F. Scott Fitzgerald', + title: "The Great Gatsby", + author: "F. Scott Fitzgerald", year: 1925, - genre: 'Fiction', + genre: "Fiction", rating: 4.2, description: - 'A classic novel set in the Roaring Twenties, it explores themes of wealth, love, and the American Dream through the enigmatic Jay Gatsby.', - image: './books-images/the-great-gatsby.jpg' + "A classic novel set in the Roaring Twenties, it explores themes of wealth, love, and the American Dream through the enigmatic Jay Gatsby.", + image: "./books-images/the-great-gatsby.jpg", }, { - title: 'To Kill a Mockingbird', - author: 'Harper Lee', + title: "To Kill a Mockingbird", + author: "Harper Lee", year: 1960, - genre: 'Fiction', + genre: "Fiction", rating: 4.5, description: - 'Set in the American South, this novel tackles issues of racism and injustice through the eyes of young Scout Finch.', - image: './books-images/to-kill-a-mockingbird.jpg' + "Set in the American South, this novel tackles issues of racism and injustice through the eyes of young Scout Finch.", + image: "./books-images/to-kill-a-mockingbird.jpg", }, { - title: '1984', - author: 'George Orwell', + title: "1984", + author: "George Orwell", year: 1949, - genre: 'Science Fiction', + genre: "Science Fiction", rating: 4.4, description: - 'A dystopian classic that explores totalitarianism and the consequences of a surveillance state in a bleak future.', - image: './books-images/1984.jpg' + "A dystopian classic that explores totalitarianism and the consequences of a surveillance state in a bleak future.", + image: "./books-images/1984.jpg", }, { - title: 'Pride and Prejudice', - author: 'Jane Austen', + title: "Pride and Prejudice", + author: "Jane Austen", year: 1813, - genre: 'Fiction', + genre: "Fiction", rating: 4.25, description: - 'A timeless romance novel that examines societal expectations and the misunderstandings that can arise from pride and prejudice.', - image: './books-images/pride-and-prejudice.jpg' + "A timeless romance novel that examines societal expectations and the misunderstandings that can arise from pride and prejudice.", + image: "./books-images/pride-and-prejudice.jpg", }, { - title: 'The Catcher in the Rye', - author: 'J.D. Salinger', + title: "The Catcher in the Rye", + author: "J.D. Salinger", year: 1951, - genre: 'Fiction', + genre: "Fiction", rating: 4, description: - 'Narrated by the teenage Holden Caulfield, the novel explores themes of alienation and the search for authenticity.', - image: './books-images/unknown.jpg' + "Narrated by the teenage Holden Caulfield, the novel explores themes of alienation and the search for authenticity.", + image: "./books-images/unknown.jpg", }, { - title: 'The Hobbit', - author: 'J.R.R. Tolkien', + title: "The Hobbit", + author: "J.R.R. Tolkien", year: 1937, - genre: 'Fantasy', + genre: "Fantasy", rating: 4.6, description: - 'A fantasy adventure novel that follows Bilbo Baggins on a quest to help a group of dwarves reclaim their homeland from a dragon.', - image: './books-images/the-hobbit.jpg' + "A fantasy adventure novel that follows Bilbo Baggins on a quest to help a group of dwarves reclaim their homeland from a dragon.", + image: "./books-images/the-hobbit.jpg", }, { title: "Harry Potter and the Sorcerer's Stone", - author: 'J.K. Rowling', + author: "J.K. Rowling", year: 1997, - genre: 'Fantasy', + genre: "Fantasy", 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" + "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", }, { - title: 'Moby-Dick', - author: 'Herman Melville', + title: "Moby-Dick", + author: "Herman Melville", year: 1851, - genre: 'Adventure', + genre: "Adventure", rating: 4.1, description: - 'An epic tale of obsession, revenge, and the relentless pursuit of the great white whale, Moby Dick.', - image: './books-images/moby-dick.jpg' + "An epic tale of obsession, revenge, and the relentless pursuit of the great white whale, Moby Dick.", + image: "./books-images/moby-dick.jpg", }, { - title: 'The Lord of the Rings: The Fellowship of the Ring', - author: 'J.R.R. Tolkien', + title: "The Lord of the Rings: The Fellowship of the Ring", + author: "J.R.R. Tolkien", year: 1954, - genre: 'Fantasy', + genre: "Fantasy", rating: 4.55, description: - 'The first volume of the epic fantasy trilogy follows Frodo Baggins and the Fellowship on their quest to destroy the One Ring.', - image: './books-images/the-lord-of-the-rings.jpg' + "The first volume of the epic fantasy trilogy follows Frodo Baggins and the Fellowship on their quest to destroy the One Ring.", + image: "./books-images/the-lord-of-the-rings.jpg", }, { - title: 'The Shining', - author: 'Stephen King', + title: "The Shining", + author: "Stephen King", year: 1977, - genre: 'Horror', + genre: "Horror", rating: 4.3, description: "A psychological horror novel that tells the story of the Torrance family's terrifying experiences at the haunted Overlook Hotel.", - image: './books-images/unknown.jpg' + image: "./books-images/unknown.jpg", }, { - title: 'The Chronicles of Narnia: The Lion, the Witch and the Wardrobe', - author: 'C.S. Lewis', + title: "The Chronicles of Narnia: The Lion, the Witch and the Wardrobe", + author: "C.S. Lewis", year: 1950, - genre: 'Fantasy', + genre: "Fantasy", rating: 4.15, description: - 'The first book in the Chronicles of Narnia series, it follows the adventures of children who discover the magical land of Narnia.', - image: './books-images/the-chronicles-of-narnia.jpg' + "The first book in the Chronicles of Narnia series, it follows the adventures of children who discover the magical land of Narnia.", + image: "./books-images/the-chronicles-of-narnia.jpg", }, { - title: 'The Da Vinci Code', - author: 'Dan Brown', + title: "The Da Vinci Code", + author: "Dan Brown", year: 2003, - genre: 'Mystery', + genre: "Mystery", rating: 3.8, description: - 'A gripping mystery thriller that follows Harvard symbologist Robert Langdon as he unravels the secrets of the Da Vinci Code.', - image: './books-images/unknown.jpg' + "A gripping mystery thriller that follows Harvard symbologist Robert Langdon as he unravels the secrets of the Da Vinci Code.", + image: "./books-images/unknown.jpg", }, { - title: 'The Alchemist', - author: 'Paulo Coelho', + title: "The Alchemist", + author: "Paulo Coelho", year: 1988, - genre: 'Fiction', + genre: "Fiction", rating: 4.25, description: - 'A philosophical novel that tells the story of Santiago, a shepherd boy, on his quest to discover his personal legend.', - image: './books-images/unknown.jpg' + "A philosophical novel that tells the story of Santiago, a shepherd boy, on his quest to discover his personal legend.", + image: "./books-images/unknown.jpg", }, { - title: 'The Hunger Games', - author: 'Suzanne Collins', + title: "The Hunger Games", + author: "Suzanne Collins", year: 2008, - genre: 'Science Fiction', + genre: "Science Fiction", rating: 4.3, description: "In a dystopian future, Katniss Everdeen becomes a symbol of rebellion when she volunteers to take her sister's place in the brutal Hunger Games.", - image: './books-images/unknown.jpg' + image: "./books-images/unknown.jpg", }, { - title: 'The Girl with the Dragon Tattoo', - author: 'Stieg Larsson', + title: "The Girl with the Dragon Tattoo", + author: "Stieg Larsson", year: 2005, - genre: 'Mystery', + genre: "Mystery", rating: 4.1, description: - 'A gripping mystery novel featuring investigative journalist Mikael Blomkvist and the enigmatic hacker Lisbeth Salander.', - image: './books-images/unknown.jpg' + "A gripping mystery novel featuring investigative journalist Mikael Blomkvist and the enigmatic hacker Lisbeth Salander.", + image: "./books-images/unknown.jpg", }, { - title: 'The Road', - author: 'Cormac McCarthy', + title: "The Road", + author: "Cormac McCarthy", year: 2006, - genre: 'Dystopian', + genre: "Dystopian", rating: 4, description: "Set in a post-apocalyptic world, it follows a father and son's harrowing journey to survive and find safety.", - image: './books-images/unknown.jpg' + image: "./books-images/unknown.jpg", }, { title: "The Hitchhiker's Guide to the Galaxy", - author: 'Douglas Adams', + author: "Douglas Adams", year: 1979, - genre: 'Science Fiction', + genre: "Science Fiction", rating: 4.35, description: "A comedic science fiction series that follows the misadventures of Arthur Dent after Earth's destruction.", - image: './books-images/unknown.jpg' + image: "./books-images/unknown.jpg", }, { - title: 'The Giver', - author: 'Lois Lowry', + title: "The Giver", + author: "Lois Lowry", year: 1993, - genre: 'Dystopian', + genre: "Dystopian", rating: 4.12, description: - 'A dystopian novel set in a seemingly perfect society where young Jonas discovers the dark truth beneath the surface.', - image: './books-images/unknown.jpg' - } -] - -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' + "A dystopian novel set in a seemingly perfect society where young Jonas discovers the dark truth beneath the surface.", + image: "./books-images/unknown.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' - } -] +]; + +// Mapping over all the books and returning a string that contains the book's details +const bookList = books.map((book) => { + return `
  • ${book.title}
  • ${book.author}
  • ${book.year}
  • ${book.genre}
  • ${book.rating}
  • ${book.description}
  • ${book.image}
    • `; +}); + +// Function to render the book list +const renderBookList = () => { + const bookListElement = document.getElementById("book-list"); + bookListElement.innerHTML = bookList.join(""); +}; + +// Render the book list when the website is loaded +document.addEventListener("DOMContentLoaded", renderBookList); From acb0fd05814b89ef7474d53825ba553d5b1454fb Mon Sep 17 00:00:00 2001 From: Mika Date: Wed, 18 Sep 2024 20:11:11 +0200 Subject: [PATCH 03/14] task division --- script.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/script.js b/script.js index 0c2997a..8587bdc 100644 --- a/script.js +++ b/script.js @@ -198,3 +198,13 @@ const renderBookList = () => { // Render the book list when the website is loaded document.addEventListener("DOMContentLoaded", renderBookList); + +// Function to filter books by genre .filter function @Estefanny + +// Function to sort books @ .sort function @Elina + +// Styling in style.css file + +// Random button to get a random book @Mika + +// add images @Mika From 757eb89dd6e40b5450385e3ccd85ec12bf3af3cb Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Fri, 20 Sep 2024 01:20:51 +0200 Subject: [PATCH 04/14] Added sort - ratings of books --- script.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/script.js b/script.js index 8587bdc..2cfccb8 100644 --- a/script.js +++ b/script.js @@ -185,6 +185,26 @@ const books = [ }, ]; +// Sort books by highest to lowest rating +const sortByRatingHighToLow = (array) => { + //Sorts the list by rating + const sortedByRatingHighToLow = array.sort((a, b) => b.rating - a.rating); + //Returns the sorted list + return sortedByRatingHighToLow; +} +//Calls the sort by rating function +sortByRatingHighToLow(books) + +//Sort books by lowest to highest using sort and reverse +function sortByRatingLowToHigh(array) { + //Sorts the list by rating + const sortedByRatingLowToHigh = sortByRatingHighToLow(array).reverse(); + //Returns the sorted list + return sortedByRatingLowToHigh; +} +//Calls the sort by rating function +sortByRatingLowToHigh(books) + // Mapping over all the books and returning a string that contains the book's details const bookList = books.map((book) => { return `
  • ${book.title}
  • ${book.author}
  • ${book.year}
  • ${book.genre}
  • ${book.rating}
  • ${book.description}
  • ${book.image}
    • `; From 487a3f74c00a4458b4f974f659d5ad2720270277 Mon Sep 17 00:00:00 2001 From: Estefanny Date: Fri, 20 Sep 2024 23:00:10 +0200 Subject: [PATCH 05/14] added filter books by genre with a drop down menu @estefanny --- .DS_Store | Bin 0 -> 6148 bytes index.html | 15 ++++++++++++++- script.js | 40 +++++++++++++++++++++++++++++++++++++--- 3 files changed, 51 insertions(+), 4 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..e83df3c37717d44633609d6ec024a0351d1f9ec2 GIT binary patch literal 6148 zcmeHK%Wl&^6upxMYPVEmQKW2;EU^tC&DCWQ7Q*vDnt120`UN;`9m2> zL_7G_Gm0ptchsa4D)8l}CC=v(=c?l5@Ey^Z2EYU(XBfE&cC^eE*Gud=4Z%ur^}&zn zEo!(=MCl{Nh%iK7pvvpweJsUu>6nf%uO2-Hu48;JG4|BB1Kjlxw|~H*fBWQ zsFn_7>IeX=qFEWr{Hwqm&tS*kTqAm5LQ{d7D$Ef>Xgb

    Project Library

    - + +
      + +
        + diff --git a/script.js b/script.js index 2cfccb8..d1a55cc 100644 --- a/script.js +++ b/script.js @@ -71,7 +71,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", @@ -211,15 +211,49 @@ const bookList = books.map((book) => { }); // Function to render the book list -const renderBookList = () => { +const renderBookList = (filteredBooks) => { const bookListElement = document.getElementById("book-list"); - bookListElement.innerHTML = bookList.join(""); + const bookList = filteredBooks.map((book) => { + return `
      • + ${book.title} +

        ${book.title}

        +

        Author: ${book.author}

        +

        Year: ${book.year}

        +

        Genre: ${book.genre}

        +

        Rating: ${book.rating}

        +

        Description: ${book.description}

        +
        • `; + }).join(""); + bookListElement.innerHTML = bookList; }; + // Render the book list when the website is loaded document.addEventListener("DOMContentLoaded", renderBookList); // Function to filter books by genre .filter function @Estefanny +const filterBooksByGenre = (genre) => { + return books.filter((book) => book.genre.toLowerCase() === genre.toLowerCase()); +}; + + +// Render all books by default when the page loads +document.addEventListener("DOMContentLoaded", () => { + renderBookList(books); +}); + +//Render genre @Estefanny +document.getElementById("genre-select").addEventListener("change", (event) => { + const selectedGenre = event.target.value; + + // Filter books if a genre is selected, otherwise show all books + if (selectedGenre) { + const filteredBooks = filterBooksByGenre(selectedGenre); + renderBookList(filteredBooks); + } else { + renderBookList(books); // Show all books if no genre is selected + } +}); // Function to sort books @ .sort function @Elina From 39152aec1349a09b650b42149e7722ba72c1756d Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sat, 21 Sep 2024 16:26:23 +0200 Subject: [PATCH 06/14] added styling to CSS, flexbox, grid, color, responsiveness --- .DS_Store | Bin 6148 -> 6148 bytes style.css | 103 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+) diff --git a/.DS_Store b/.DS_Store index e83df3c37717d44633609d6ec024a0351d1f9ec2..94a2f8c4d8427285162a180ba54da4cee742fa83 100644 GIT binary patch delta 53 zcmZoMXfc@J&&abeU^g=(&tx7J>&g5ql9MN}9tY7pWx+*xIr(|%3=9m6n_XCTGi_$) H_{$FfpMVco delta 32 ocmZoMXfc@J&&ahgU^g=(*JK_R>&^bGJD4^$a4>FW=lIJH0HS*d!~g&Q diff --git a/style.css b/style.css index e69de29..f4f24c0 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,103 @@ +/* Basic Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Body Styling */ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + padding: 20px; + background-color: #f5f5f5; +} + +h1 { + text-align: center; + margin-bottom: 20px; +} + +/* Dropdown Select */ +#genre-select { + display: block; + width: 200px; + margin: 0 auto 20px; + padding: 10px; + font-size: 16px; +} + +/* Container for book list */ +#book-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + padding: 20px; + list-style: none; +} + +/* Book Item Styling */ +#book-list li { + background-color: white; + border: 1px solid #ccc; + padding: 15px; + border-radius: 8px; + transition: transform 0.3s ease; +} + +#book-list li:hover { + transform: translateY(-10px); +} + +#book-list img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 8px; + display: block; +} + +#book-list h3 { + font-size: 18px; + margin-top: 10px; +} + +#book-list p { + margin: 5px 0; +} + +/* Responsive Media Queries */ +@media (max-width: 600px) { + h1 { + font-size: 24px; + } + + #genre-select { + width: 100%; + font-size: 14px; + } + + #book-list { + grid-template-columns: 1fr; + } +} + +@media (min-width: 601px) and (max-width: 1024px) { + #book-list { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + } + + #book-list img { + height: 200px; + } +} + +@media (min-width: 1025px) { + #book-list { + grid-template-columns: repeat(4, 1fr); + } + + #book-list img { + height: 300px; + } +} From 79e65fabc3b7bc3ed256ac82c501912d1abfcb7b Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sat, 21 Sep 2024 17:07:28 +0200 Subject: [PATCH 07/14] added styling to dropdown select genre --- style.css | 47 ++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 40 insertions(+), 7 deletions(-) diff --git a/style.css b/style.css index f4f24c0..44bb2c2 100644 --- a/style.css +++ b/style.css @@ -19,13 +19,46 @@ h1 { } /* Dropdown Select */ +/* Style for the dropdown select */ #genre-select { - display: block; - width: 200px; - margin: 0 auto 20px; - padding: 10px; - font-size: 16px; -} + display: block; + width: 250px; /* Adjust width */ + margin: 20px auto; /* Center the select box */ + padding: 12px; /* Add padding for better look */ + font-size: 16px; /* Adjust the font size */ + font-family: Arial, sans-serif; /* Font family */ + border-radius: 10px; /* Rounded corners */ + border: 2px solid #333; /* Border style and color */ + background-color: #fff; /* Background color */ + color: #333; /* Text color */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ + transition: all 0.3s ease; /* Transition for hover effects */ + } + + /* Hover effect */ + #genre-select:hover { + border-color: #323cff; /* Change border color on hover */ + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */ + } + + /* Focus (when the user clicks on the dropdown) */ + #genre-select:focus { + outline: none; /* Remove default outline */ + border-color: #4349f8; /* Border color when focused */ + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Shadow when focused */ + } + + /* Optional: Adjust dropdown arrow styling */ + #genre-select { + -webkit-appearance: none; /* Remove default arrow in some browsers */ + -moz-appearance: none; /* Remove default arrow in Firefox */ + appearance: none; /* Remove default arrow */ + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 12px; + } + /* Container for book list */ #book-list { @@ -63,7 +96,7 @@ h1 { } #book-list p { - margin: 5px 0; + margin: 4px 0; } /* Responsive Media Queries */ From 8c9a9520879fb98d236c50ea9ffa8a1f1c4c68b5 Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 22 Sep 2024 12:47:37 +0200 Subject: [PATCH 08/14] Added sorting buttons, styled in CSS and added them to media quieres --- index.html | 57 +++++++++++--------- script.js | 23 +++++--- style.css | 152 +++++++++++++++++++++++++++++++++++++++-------------- 3 files changed, 159 insertions(+), 73 deletions(-) diff --git a/index.html b/index.html index 0ede84c..fdd9296 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,34 @@ - - - - Mikas Library - - - -

        Project Library

        - -
          - - -
            - - - + + + + + Mikas Library + + + + +

            Project Library

            + + + + + + +
              + +
                + + + + \ No newline at end of file diff --git a/script.js b/script.js index d1a55cc..66e31af 100644 --- a/script.js +++ b/script.js @@ -185,25 +185,34 @@ const books = [ }, ]; -// Sort books by highest to lowest rating +// Sort functions @Elina +// Sort books by highest to lowest rating const sortByRatingHighToLow = (array) => { //Sorts the list by rating const sortedByRatingHighToLow = array.sort((a, b) => b.rating - a.rating); //Returns the sorted list return sortedByRatingHighToLow; } -//Calls the sort by rating function -sortByRatingHighToLow(books) -//Sort books by lowest to highest using sort and reverse +// Sort books by lowest to highest using sort and reverse function sortByRatingLowToHigh(array) { //Sorts the list by rating const sortedByRatingLowToHigh = sortByRatingHighToLow(array).reverse(); //Returns the sorted list return sortedByRatingLowToHigh; } -//Calls the sort by rating function -sortByRatingLowToHigh(books) + +// Event listeners for sorting buttons and calls the sort by rating function once button is clicked +// Button rating high to low +document.getElementById("sort-high-to-low-button").addEventListener("click", () => { + const sortedBooks = sortByRatingHighToLow([...books]); + renderBookList(sortedBooks); +}) +// Button rating low to high +document.getElementById("sort-low-to-high-button").addEventListener("click", () => { + const sortedBooks = sortByRatingLowToHigh([...books]); + renderBookList(sortedBooks); +}); // Mapping over all the books and returning a string that contains the book's details const bookList = books.map((book) => { @@ -227,7 +236,6 @@ const renderBookList = (filteredBooks) => { bookListElement.innerHTML = bookList; }; - // Render the book list when the website is loaded document.addEventListener("DOMContentLoaded", renderBookList); @@ -236,7 +244,6 @@ const filterBooksByGenre = (genre) => { return books.filter((book) => book.genre.toLowerCase() === genre.toLowerCase()); }; - // Render all books by default when the page loads document.addEventListener("DOMContentLoaded", () => { renderBookList(books); diff --git a/style.css b/style.css index 44bb2c2..a63ea34 100644 --- a/style.css +++ b/style.css @@ -21,44 +21,114 @@ h1 { /* Dropdown Select */ /* Style for the dropdown select */ #genre-select { - display: block; - width: 250px; /* Adjust width */ - margin: 20px auto; /* Center the select box */ - padding: 12px; /* Add padding for better look */ - font-size: 16px; /* Adjust the font size */ - font-family: Arial, sans-serif; /* Font family */ - border-radius: 10px; /* Rounded corners */ - border: 2px solid #333; /* Border style and color */ - background-color: #fff; /* Background color */ - color: #333; /* Text color */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */ - transition: all 0.3s ease; /* Transition for hover effects */ - } - - /* Hover effect */ - #genre-select:hover { - border-color: #323cff; /* Change border color on hover */ - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */ - } - - /* Focus (when the user clicks on the dropdown) */ - #genre-select:focus { - outline: none; /* Remove default outline */ - border-color: #4349f8; /* Border color when focused */ - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Shadow when focused */ - } - - /* Optional: Adjust dropdown arrow styling */ - #genre-select { - -webkit-appearance: none; /* Remove default arrow in some browsers */ - -moz-appearance: none; /* Remove default arrow in Firefox */ - appearance: none; /* Remove default arrow */ - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: no-repeat; - background-position: right 10px center; - background-size: 12px; - } - + display: block; + width: 250px; + /* Adjust width */ + margin: 20px auto; + /* Center the select box */ + padding: 12px; + /* Add padding for better look */ + font-size: 16px; + /* Adjust the font size */ + font-family: Arial, sans-serif; + /* Font family */ + border-radius: 10px; + /* Rounded corners */ + border: 2px solid #333; + /* Border style and color */ + background-color: #fff; + /* Background color */ + color: #333; + /* Text color */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + /* Subtle shadow */ + transition: all 0.3s ease; + /* Transition for hover effects */ +} + +/* Hover effect */ +#genre-select:hover { + border-color: #323cff; + /* Change border color on hover */ + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + /* Stronger shadow on hover */ +} + +/* Focus (when the user clicks on the dropdown) */ +#genre-select:focus { + outline: none; + /* Remove default outline */ + border-color: #4349f8; + /* Border color when focused */ + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); + /* Shadow when focused */ +} + +/* Optional: Adjust dropdown arrow styling */ +#genre-select { + -webkit-appearance: none; + /* Remove default arrow in some browsers */ + -moz-appearance: none; + /* Remove default arrow in Firefox */ + appearance: none; + /* Remove default arrow */ + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 12px; +} + +#sort-high-to-low-button { + display: block; + width: 250px; + /* Adjust width */ + margin: 20px auto; + /* Center the select box */ + padding: 12px; + /* Add padding for better look */ + font-size: 16px; + /* Adjust the font size */ + font-family: Arial, sans-serif; + /* Font family */ + border-radius: 10px; + /* Rounded corners */ + border: 2px solid #333; + /* Border style and color */ + background-color: #fff; + /* Background color */ + color: #333; + /* Text color */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + /* Subtle shadow */ + transition: all 0.3s ease; + /* Transition for hover effects */ +} + +#sort-low-to-high-button { + display: block; + width: 250px; + /* Adjust width */ + margin: 20px auto; + /* Center the select box */ + padding: 12px; + /* Add padding for better look */ + font-size: 16px; + /* Adjust the font size */ + font-family: Arial, sans-serif; + /* Font family */ + border-radius: 10px; + /* Rounded corners */ + border: 2px solid #333; + /* Border style and color */ + background-color: #fff; + /* Background color */ + color: #333; + /* Text color */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + /* Subtle shadow */ + transition: all 0.3s ease; + /* Transition for hover effects */ +} /* Container for book list */ #book-list { @@ -105,7 +175,9 @@ h1 { font-size: 24px; } - #genre-select { + #genre-select, + #sort-high-to-low-button, + #sort-low-to-high-button { width: 100%; font-size: 14px; } @@ -133,4 +205,4 @@ h1 { #book-list img { height: 300px; } -} +} \ No newline at end of file From 843c0151dcff2d4dac50404fdef9ff1741377f7b Mon Sep 17 00:00:00 2001 From: Elina Eriksson Hult Date: Sun, 22 Sep 2024 13:37:42 +0200 Subject: [PATCH 09/14] Added styling to CSS - images and book text centered --- style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index a63ea34..c3db080 100644 --- a/style.css +++ b/style.css @@ -146,6 +146,7 @@ h1 { padding: 15px; border-radius: 8px; transition: transform 0.3s ease; + text-align: center; } #book-list li:hover { @@ -153,11 +154,11 @@ h1 { } #book-list img { - width: 100%; - height: 100%; + width: 80%; + height: auto; object-fit: cover; border-radius: 8px; - display: block; + display: inline-block; } #book-list h3 { From 7bde4159b7bcbe5b6b1ab639717c53297ccac88c Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 22 Sep 2024 20:32:40 +0200 Subject: [PATCH 10/14] added styling and hover effects --- style.css | 95 +++++++++++++++++++++---------------------------------- 1 file changed, 36 insertions(+), 59 deletions(-) diff --git a/style.css b/style.css index c3db080..91226ad 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,6 @@ +/* Import Google Font Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); + /* Basic Reset */ * { margin: 0; @@ -7,71 +10,56 @@ /* Body Styling */ body { - font-family: Arial, sans-serif; + font-family: 'Poppins', sans-serif; line-height: 1.6; padding: 20px; - background-color: #f5f5f5; + background-color: #F9F9F9; + color: #333; } h1 { text-align: center; margin-bottom: 20px; + font-size: 2.5em; + color: #007BFF; } /* Dropdown Select */ -/* Style for the dropdown select */ #genre-select { display: block; width: 250px; - /* Adjust width */ margin: 20px auto; - /* Center the select box */ padding: 12px; - /* Add padding for better look */ font-size: 16px; - /* Adjust the font size */ font-family: Arial, sans-serif; - /* Font family */ border-radius: 10px; - /* Rounded corners */ - border: 2px solid #333; - /* Border style and color */ + border: 2px solid #007BFF; background-color: #fff; - /* Background color */ color: #333; - /* Text color */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - /* Subtle shadow */ transition: all 0.3s ease; - /* Transition for hover effects */ + appearance: none; + background-image: url('data:image/svg+xml;utf8,'); + background-position: right 10px center; + background-size: 12px; + background-repeat: no-repeat; } /* Hover effect */ #genre-select:hover { - border-color: #323cff; - /* Change border color on hover */ + border-color: #34C759; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); - /* Stronger shadow on hover */ } /* Focus (when the user clicks on the dropdown) */ #genre-select:focus { outline: none; - /* Remove default outline */ - border-color: #4349f8; - /* Border color when focused */ - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); - /* Shadow when focused */ + border-color: #007BFF; + box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); } -/* Optional: Adjust dropdown arrow styling */ +/* Adjust dropdown arrow styling */ #genre-select { - -webkit-appearance: none; - /* Remove default arrow in some browsers */ - -moz-appearance: none; - /* Remove default arrow in Firefox */ - appearance: none; - /* Remove default arrow */ background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 10px center; @@ -81,55 +69,42 @@ h1 { #sort-high-to-low-button { display: block; width: 250px; - /* Adjust width */ margin: 20px auto; - /* Center the select box */ padding: 12px; - /* Add padding for better look */ font-size: 16px; - /* Adjust the font size */ - font-family: Arial, sans-serif; - /* Font family */ + font-family: 'Poppins', sans-serif; border-radius: 10px; - /* Rounded corners */ - border: 2px solid #333; - /* Border style and color */ + border: 2px solid #007BFF; background-color: #fff; - /* Background color */ color: #333; - /* Text color */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - /* Subtle shadow */ transition: all 0.3s ease; - /* Transition for hover effects */ +} + +#sort-high-to-low-button:hover { + border-color: #34C759; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } #sort-low-to-high-button { display: block; width: 250px; - /* Adjust width */ margin: 20px auto; - /* Center the select box */ padding: 12px; - /* Add padding for better look */ font-size: 16px; - /* Adjust the font size */ font-family: Arial, sans-serif; - /* Font family */ border-radius: 10px; - /* Rounded corners */ - border: 2px solid #333; - /* Border style and color */ + border: 2px solid #007BFF; background-color: #fff; - /* Background color */ color: #333; - /* Text color */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - /* Subtle shadow */ transition: all 0.3s ease; - /* Transition for hover effects */ } +#sort-low-to-high-button:hover { + border-color: #34C759; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); +} /* Container for book list */ #book-list { display: grid; @@ -142,15 +117,18 @@ h1 { /* Book Item Styling */ #book-list li { background-color: white; - border: 1px solid #ccc; + border: 1px solid #E5E5E5; padding: 15px; - border-radius: 8px; - transition: transform 0.3s ease; + border-radius: 12px; + transition: transform 0.3s ease, border-color 0.3s ease; text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } #book-list li:hover { transform: translateY(-10px); + border-color: #007BFF; + box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); } #book-list img { @@ -158,7 +136,6 @@ h1 { height: auto; object-fit: cover; border-radius: 8px; - display: inline-block; } #book-list h3 { From c2e504ffa95eafba5dc7a04284c9c53ac5998e05 Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 22 Sep 2024 20:43:21 +0200 Subject: [PATCH 11/14] added random button and cleaned code --- index.html | 3 ++- script.js | 9 +++++++++ style.css | 48 ++++++++++++++++++++---------------------------- 3 files changed, 31 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index fdd9296..b45cae6 100644 --- a/index.html +++ b/index.html @@ -24,10 +24,11 @@

                Project Library

                + +
                  -
                    diff --git a/script.js b/script.js index 66e31af..4a5eb44 100644 --- a/script.js +++ b/script.js @@ -213,6 +213,15 @@ document.getElementById("sort-low-to-high-button").addEventListener("click", () const sortedBooks = sortByRatingLowToHigh([...books]); renderBookList(sortedBooks); }); +// Function to get a random book +function getRandomBook() { + const randomIndex = Math.floor(Math.random() * books.length); + const randomBook = [books[randomIndex]]; // Wrapping in an array to keep consistency with renderBookList + renderBookList(randomBook); +} + +// Event listener for the random book button +document.getElementById("random-book-button").addEventListener("click", getRandomBook); // Mapping over all the books and returning a string that contains the book's details const bookList = books.map((book) => { diff --git a/style.css b/style.css index 91226ad..504ce1c 100644 --- a/style.css +++ b/style.css @@ -66,45 +66,44 @@ h1 { background-size: 12px; } -#sort-high-to-low-button { +#random-book-button, +#sort-high-to-low-button, +#sort-low-to-high-button { display: block; width: 250px; margin: 20px auto; padding: 12px; font-size: 16px; - font-family: 'Poppins', sans-serif; + font-family: 'Poppins', sans-serif; /* Example new font */ border-radius: 10px; - border: 2px solid #007BFF; + border: 2px solid #333; background-color: #fff; color: #333; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } -#sort-high-to-low-button:hover { - border-color: #34C759; +#random-book-button:hover, +#sort-high-to-low-button:hover, +#sort-low-to-high-button:hover { + border-color: #00aaff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } -#sort-low-to-high-button { - display: block; - width: 250px; - margin: 20px auto; - padding: 12px; - font-size: 16px; - font-family: Arial, sans-serif; - border-radius: 10px; - border: 2px solid #007BFF; - background-color: #fff; - color: #333; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; +/* Additional styles for minimalistic happy palette */ +body { + background-color: #fafafa; /* Light background */ } -#sort-low-to-high-button:hover { - border-color: #34C759; - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); +#book-list li { + border-color: #00aaff; } + +#book-list li:hover { + border-color: #ff6347; /* Hover border change */ + transform: translateY(-10px); +} + /* Container for book list */ #book-list { display: grid; @@ -153,13 +152,6 @@ h1 { font-size: 24px; } - #genre-select, - #sort-high-to-low-button, - #sort-low-to-high-button { - width: 100%; - font-size: 14px; - } - #book-list { grid-template-columns: 1fr; } From dd9d803f54ee1e161de8bafc6b8a23520e8c7b7c Mon Sep 17 00:00:00 2001 From: Estefanny Date: Sun, 22 Sep 2024 21:16:25 +0200 Subject: [PATCH 12/14] added Elina and my github accounts as collaborators to the pull-request-templateas --- pull_request_template.md | 4 ++-- style.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/pull_request_template.md b/pull_request_template.md index d92c89b..1f99276 100644 --- a/pull_request_template.md +++ b/pull_request_template.md @@ -3,5 +3,5 @@ Add your Netlify link here. PS. Don't forget to add it in your readme as well. ## Collaborators -Add your collaborators here. Write their GitHub usernames in square brackets. If there's more than one, separate them with a comma, like this: -[github-username-1, github-username-2] + +[github-ElinaEH-1 , github-FannyEste-2] \ No newline at end of file diff --git a/style.css b/style.css index 504ce1c..6df2649 100644 --- a/style.css +++ b/style.css @@ -33,7 +33,7 @@ h1 { font-size: 16px; font-family: Arial, sans-serif; border-radius: 10px; - border: 2px solid #007BFF; + border: 2px solid #333; background-color: #fff; color: #333; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); @@ -47,7 +47,7 @@ h1 { /* Hover effect */ #genre-select:hover { - border-color: #34C759; + border-color: #00aaff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); } From b1a6caf0991a82f83f622f015f819232894d71fc Mon Sep 17 00:00:00 2001 From: Mika Eberstein Date: Sun, 22 Sep 2024 22:25:55 +0200 Subject: [PATCH 13/14] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9e43d1d..214a56a 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # project-library -Hej hej update just to check +A project to practice JS functions including map, filter, and sort. From 203315ee9241950e143dac6aa5d66d8d4181c05b Mon Sep 17 00:00:00 2001 From: Mika Date: Sun, 22 Sep 2024 22:37:41 +0200 Subject: [PATCH 14/14] cleaning --- README.md | 4 +++- script.js | 8 -------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 214a56a..d3d33c4 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ # project-library -A project to practice JS functions including map, filter, and sort. +A library of books to practice JS functions including map, filter, and sort. + +https://mikaelinaestefanny-library.netlify.app/ diff --git a/script.js b/script.js index 4a5eb44..9bbac19 100644 --- a/script.js +++ b/script.js @@ -270,11 +270,3 @@ document.getElementById("genre-select").addEventListener("change", (event) => { renderBookList(books); // Show all books if no genre is selected } }); - -// Function to sort books @ .sort function @Elina - -// Styling in style.css file - -// Random button to get a random book @Mika - -// add images @Mika