diff --git a/README.md b/README.md index 7d38b84..4270425 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# project-library \ No newline at end of file +# project-library +Netlify: https://read-more-about-books.netlify.app/ \ No newline at end of file diff --git a/index.html b/index.html index cf5c31a..cf69c93 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,145 @@ + Project Library + -

Project Library

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

Project Library

+

Filter on genre

+
+ + + + + + + +
+
+
+
+ + +
+ +
+ + + + + + - \ No newline at end of file + + + + + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..8dff95a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "project-6-library", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/script.js b/script.js index 6a61c06..b763ce9 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,6 @@ -/*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 that some -of the properties make sense to filter on, and some to sort on.*/ + +// Predefined array of books with details matching your HTML content const books = [ { title: 'The Great Gatsby', @@ -71,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', @@ -185,222 +184,77 @@ 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' + +// get books to layout +const bookListContainer = document.getElementById("book-list"); + +// function for showing books in layout +function displayBooks(filteredBooks) { + bookListContainer.innerHTML = ""; // empty the list + + // filter throught the books array to collect all items + filteredBooks.forEach(book => { + const bookItem = document.createElement("div"); + bookItem.className = "small-box-news-item"; + bookItem.innerHTML = ` + ${book.title} +
+

${book.title}

+

${book.genre}

+

${book.author}

+

${book.description}

+

${book.year}

+

⭐ ${book.rating}

+
+ `; + bookListContainer.appendChild(bookItem); + }); +} + +// function to get books by buttons (all, random and by genre) +function filterBooks(category) { + if (category === "all") { + displayBooks(books); + } else if (category === "random") { + const randomBook = books[Math.floor(Math.random() * books.length)]; + displayBooks([randomBook]); + } else { + const filtered = books.filter(book => book.genre.toLowerCase().replace(/\s+/g, "-") === category); + displayBooks(filtered); } -] +} + +// sort books by year > old to newest +function sortBooksByYear() { + const sortedBooks = [...books].sort((a, b) => a.year - b.year); // sort books by year > old to newest + displayBooks(sortedBooks); +} + +// sort alphabetical +function sortBooksByTitle() { + const sortedBooks = [...books].sort((a, b) => a.title.localeCompare(b.title)); // copy array and sort alphabetical + displayBooks(sortedBooks); +} + + + + +// Add eventlisteners for all cta:s +document.querySelectorAll(".big-news-btn").forEach(button => { + button.addEventListener("click", () => { + const action = button.dataset.action; // Hämta data-action från knappen + + if (action === "all" || action === "fantasy" || action === "fiction" || action === "science-fiction" || action === "random") { + filterBooks(action); + } else if (action === "sort-year") { + sortBooksByYear(); + } else if (action === "sort-title") { + sortBooksByTitle(); + } + }); +}); + + + +// show all books as standard +filterBooks("all"); \ No newline at end of file diff --git a/style.css b/style.css index e69de29..f1ccf15 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,200 @@ +html { + box-sizing: border-box; + background-color: #c1b8a9; + color: #000; + } + body { + margin: 0; + } + /* header */ + header { + margin: 0; + padding: 10px 0; + border-bottom: #444444 2px solid; + } + .header-content-width { + margin: 0 3.5rem; + display: flex; + justify-content: space-between; + align-items: center; + } + .main-logo { + font-family: Arial, Helvetica, sans-serif; + color: #444444; + margin: 0; + } + .main-logo>span { + font-size: 65px; + font-style: italic; + color: #444444; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + text-decoration: underline; + } + .nav-small-screen { + display: none; + } + + .nav-desktop { + width: 400px; + } + .nav-desktop>ul { + list-style: none; + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; + font-weight: 600; + display: flex; + justify-content: space-around; + align-items: center; + cursor: pointer; + } + .nav-menu-item-desktop:hover { + border-bottom: #444444 solid 2px; + } + .btn-nav { + background-color: #444444; + color: #fff; + border: none; + padding: 8px 20px; + cursor: pointer; + font-size: 0.9rem; + margin: 0; + } + .btn-nav:hover { + background-color: #4c6051; + } + + /* big news section */ + .big-news { + margin: 4rem 3.5rem 3rem; + } + .big-news-btn-flex { + display: flex; + gap: 15px; + flex-wrap: wrap; + } + .big-news-text>h1 { + font-size: 3.3rem; + text-transform: uppercase; + color: #000; + font-family:Arial, Helvetica, sans-serif; + margin-bottom: 0; + } + .big-news-text>h3 { + font-size: 1.6rem; + color: #000; + } + .big-news-btn { + background-color: #444444;; + color: #fff; + border: none; + padding: 8px 20px; + cursor: pointer; + font-size: 1.1rem; + } + .big-news-btn:hover { + background-color: #4c6051; + font-weight: 600; + } + + + /* small box news */ + .small-box-news { + margin: 0 3.5rem; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 25px 15px; + } + .small-box-news-item { + border-bottom: #000 2px solid; + padding: 0 0 10px;; + } + .small-box-news-item>p { + font-style: italic; + } + .small-box-news-item-img { + width: 100%; + height: 450px; + object-fit: cover; + } + .small-news-btn { + background-color: #444444; + color: #fff; + border: none; + padding: 8px 20px; + cursor: pointer; + font-size: 1.1rem; + margin: 0; + } + .small-news-btn:hover { + background-color: #4c6051; + font-weight: 600; + } + + + /* footer */ + footer { + background-color: #444444;; + color: #fff; + margin: 70px 0 0; + } + footer>div>p { + margin: 0; + padding: 50px 0; + text-align: center; + } + + @media screen and (max-width: 1024px) { + .nav-small-screen { + display: flex; + align-items: center; + } + .nav-small-screen>ul { + list-style: none; + text-decoration: none; + display: flex; + flex-direction: column; + row-gap: 10px; + cursor: pointer; + } + .nav-menu-item-small-screen { + width: 30px; + border-bottom: #000 3px solid; + } + .nav-desktop { + display: none; + } + .small-box-news { + grid-template-columns: repeat(2, 1fr); + gap: 15px; + } + .big-news-content-width { + grid-template-columns: 1fr; + } + } + @media screen and (max-width: 620px) { + .small-box-news { + grid-template-columns: repeat(1, 1fr); + } + .header-content-width, + .small-box-news { + margin: 0 1rem; + } + .big-news { + margin: 2rem 1rem; + } + .small-box-news-item { + display: flex !important; + justify-content: space-between; + gap: 0 20px; + } + .small-box-news-item>div { + width: 40%; + } + .small-box-news-item-img { + width: 50%; + height: 200px; + } + .divider-h2 { + margin: 4rem 2.5rem 2.5rem; + } + } \ No newline at end of file