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/)
diff --git a/index.html b/index.html
index b2e64bc..970cbc0 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,50 @@
+
-
- Library
+ Library = Bibliotek
+
+
-
Library
-
+
+
Biblioteket!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
index fa49de3..5a9e985 100644
--- a/script.js
+++ b/script.js
@@ -1,9 +1,3 @@
-/*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.
-
-Remember to remove code you don't need.
-*/
const books = [
{
@@ -74,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',
@@ -186,224 +180,88 @@ 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'
}
-]
+];
-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'
+/* 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*/
+function displayBooks(arr) {
+ bookList.innerHTML = "";
+ arr.forEach(book => {
+ const bookItem = document.createElement("article");
+ bookItem.classList.add("book");
+ bookItem.innerHTML = `
+
+