From a03f70172122ab01640916e8791454b884a0f4f6 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Tue, 17 Sep 2024 12:42:57 +0200 Subject: [PATCH 01/39] Co-authored-by: Gabriella Iofe Co-authored-by: Anna Hansen Co-authored-by: Fanny Henriques --- .DS_Store | Bin 0 -> 6148 bytes index.html | 81 +++++++++++++++++++++++++++++++++++++++++++++++++++-- style.css | 23 +++++++++++++++ 3 files changed, 102 insertions(+), 2 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a1e4c3648e5724134a7ffcd5513331f40c475be3 GIT binary patch literal 6148 zcmeHK%TB{U3>-rbl>n(nj{5@~_=8ndzJMQqK7Ybz7%i;SC$Cxc!d!eaw%t)2Apa1*Cu!kOERb3hWhN&vu($Bq~Y)DIf*D6!7mu zp*z-wLt=b77-9q%J-OwvjUNP&N)fK3+ni#cDZ_14kLd9N+> s2m0Pv8|4hqiiy#Rx$steeNb2Yp3iH;Au;I82c4)N0oO$)1^z;TPhkrkr~m)} literal 0 HcmV?d00001 diff --git a/index.html b/index.html index cf5c31a..0004dc4 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,90 @@ + + - Project Library + Easy Peasy Recepies + -

Project Library

+
+

Easy Peasy Recepies

+
+
+
+
+

Filter on Kitchen

+
+ + + + +
+
+ +
+

Sort

+ +
+ + + +
+
+ +
+ +
+ +
+
+ foccacia +
+
+

Cheesy Focaccia

+

lorem ipsum lorem ipsum

+
+
+ +
+
+ foccacia +
+
+

Cheesy Focaccia

+

lorem ipsum lorem ipsum

+
+
+ +
+
+ foccacia +
+
+

Cheesy Focaccia

+

lorem ipsum lorem ipsum

+
+
+ +
+
+ foccacia +
+
+

Cheesy Focaccia

+

lorem ipsum lorem ipsum

+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..f727dae 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,23 @@ +h1 { + border: 2px solid black +} + +.filter { + border: 2px solid red; +} + +.filter-container { + border: 2px solid green; +} + +.sort-container { + border: 2px solid purple; +} + +h2 { + border: 2px solid orange; +} + +form { + border: 2px solid hotpink; +} \ No newline at end of file From 3154b02c48ba882bcbea5d69b29af1f612cd4346 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Tue, 17 Sep 2024 13:56:28 +0200 Subject: [PATCH 02/39] Co-authored-by: Anna Hansen Co-authored-by: Fanny Henriques Co-authored-by: Gabriella Iofe --- index.html | 12 ++++++++---- style.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 60 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0004dc4..a484b14 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,20 @@ - Easy Peasy Recepies + Easy Peasy Recipes +
-

Easy Peasy Recepies

+

Easy Peasy Recipes

-
+ +
+

Filter on Kitchen

@@ -27,7 +32,6 @@

Filter on Kitchen

Sort

- diff --git a/style.css b/style.css index f727dae..37c3784 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,31 @@ +body { + /* padding: 10px; */ + background-color: #d9e7e2; + font-family: 'Poppins'; + margin: 0px; +} + +main { + padding: 10px; +} + h1 { - border: 2px solid black + border: 2px solid black; + text-align: center; + color: #23362f; } -.filter { +.categories { border: 2px solid red; + display: flex; + max-width: 100%; + gap: 20px; + } .filter-container { border: 2px solid green; + } .sort-container { @@ -20,4 +38,35 @@ h2 { form { border: 2px solid hotpink; -} \ No newline at end of file +} + +section { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 5px; + background: whitesmoke; +} + +.card { + display: flex; + border: 2px solid orange; + padding: 20px; + max-width: 100%; +} + +/* .card-image { + /* min-width: 300px; */ +/* max-width: 100%; */ +/* border: 2px solid hotpink; */ +/* } */ + + + +img { + + max-width: 100%; + border: 2px solid hotpink; + +} + +/* .button {} */ \ No newline at end of file From 57beb9c9ff6fe516520002f15600079d9f21e7c3 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Tue, 17 Sep 2024 15:13:09 +0200 Subject: [PATCH 03/39] Co-authored-by: Anna Hansen Co-authored-by: Gabriella Iofe Co-authored-by: Fanny Henriques --- style.css | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index 37c3784..88eab5e 100644 --- a/style.css +++ b/style.css @@ -3,10 +3,18 @@ body { background-color: #d9e7e2; font-family: 'Poppins'; margin: 0px; + width: 100%; + overflow-x: hidden; + } -main { - padding: 10px; + + +header { + width: 100%; + margin: auto; + /* display: flex; */ + } h1 { @@ -15,10 +23,16 @@ h1 { color: #23362f; } +main { + + padding: 10px; +} + .categories { border: 2px solid red; display: flex; - max-width: 100%; + /* display: block; */ + /* max-width: 100%; */ gap: 20px; } @@ -42,9 +56,12 @@ form { section { display: grid; - grid-template-columns: repeat(4, 1fr); + /* grid-template-columns: repeat(4, 1fr); */ + /* display: flex; */ gap: 5px; background: whitesmoke; + grid-template-columns: repeat(auto-fit, minmax(200px, 3fr)); + padding: 20px; } .card { @@ -52,6 +69,7 @@ section { border: 2px solid orange; padding: 20px; max-width: 100%; + flex-direction: column; } /* .card-image { @@ -63,10 +81,9 @@ section { img { - max-width: 100%; border: 2px solid hotpink; - + display: block; } /* .button {} */ \ No newline at end of file From 281595c5a58674979d54769dc1f76edcad2fc1b8 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Tue, 17 Sep 2024 17:56:57 +0200 Subject: [PATCH 04/39] - added CSS style --- style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/style.css b/style.css index 88eab5e..e2f8e27 100644 --- a/style.css +++ b/style.css @@ -46,6 +46,11 @@ main { border: 2px solid purple; } +.country { + border-radius: 5px; + color: hotpink; +} + h2 { border: 2px solid orange; } From e9a1bea54a786998b855026175dc9ee7ad1f0855 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Tue, 17 Sep 2024 21:33:49 +0200 Subject: [PATCH 05/39] - worked on the CSS, changing the selection part --- style.css | 77 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 50 insertions(+), 27 deletions(-) diff --git a/style.css b/style.css index e2f8e27..b0b2d0d 100644 --- a/style.css +++ b/style.css @@ -2,70 +2,96 @@ body { /* padding: 10px; */ background-color: #d9e7e2; font-family: 'Poppins'; - margin: 0px; - width: 100%; + margin: 5px auto; + max-width: 100%; overflow-x: hidden; - } - - +/* Header mobile phone */ header { - width: 100%; + max-width: 100%; margin: auto; /* display: flex; */ - } h1 { border: 2px solid black; text-align: center; color: #23362f; + } -main { +/* Main section mobile phone */ +main { padding: 10px; } .categories { - border: 2px solid red; + /* border: 2px solid red; */ display: flex; - /* display: block; */ - /* max-width: 100%; */ - gap: 20px; + justify-content: space-evenly; + background-color: white; + padding: 10px; + max-width: 100%; + background-color: white; + padding: 20px 0 20px 0; + border-radius: 5px; +} +h2 { + /* border: 2px solid orange; */ + text-align: center; + margin: 0 auto; } -.filter-container { - border: 2px solid green; +/* Filter on Kitchen */ -} +.filter-container { + /* border: 2px solid green; */ + display: flex; + flex-direction: column; + justify-content: space-between; + margin: 20 px; -.sort-container { - border: 2px solid purple; } .country { border-radius: 5px; - color: hotpink; -} + color: black; + background-color: hotpink; + max-width: 70%; + min-width: 30px; -h2 { - border: 2px solid orange; } form { - border: 2px solid hotpink; + /* border: 2px solid hotpink; */ + display: flex; + flex-wrap: wrap; + gap: 3px; + align-items: center; + justify-content: center; +} + +/* Sort Container */ + +.sort-container { + /* border: 2px solid purple; */ + display: flex; + flex-direction: column; + justify-content: space-between; } +/* Card Contents */ + section { display: grid; /* grid-template-columns: repeat(4, 1fr); */ /* display: flex; */ gap: 5px; background: whitesmoke; - grid-template-columns: repeat(auto-fit, minmax(200px, 3fr)); + grid-template-columns: repeat(auto-fit, minmax(240px, 3fr)); padding: 20px; } @@ -84,11 +110,8 @@ section { /* } */ - img { max-width: 100%; border: 2px solid hotpink; display: block; -} - -/* .button {} */ \ No newline at end of file +} \ No newline at end of file From 61fd8a57245510c816880cc96ed9072eea74e4b9 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Tue, 17 Sep 2024 22:23:45 +0200 Subject: [PATCH 06/39] - worked on CSS: buttons --- style.css | 57 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 20 deletions(-) diff --git a/style.css b/style.css index b0b2d0d..07f4e08 100644 --- a/style.css +++ b/style.css @@ -1,24 +1,23 @@ body { - /* padding: 10px; */ + padding: 0; background-color: #d9e7e2; font-family: 'Poppins'; - margin: 5px auto; max-width: 100%; - overflow-x: hidden; + margin: 0; + /* overflow-x: hidden; */ } /* Header mobile phone */ header { max-width: 100%; - margin: auto; - /* display: flex; */ + margin: 0; } h1 { - border: 2px solid black; + /* border: 2px solid black; */ text-align: center; color: #23362f; - + width: 100%; } /* Main section mobile phone */ @@ -31,12 +30,13 @@ main { /* border: 2px solid red; */ display: flex; justify-content: space-evenly; - background-color: white; + /* background-color: whitesmoke; */ padding: 10px; max-width: 100%; - background-color: white; padding: 20px 0 20px 0; - border-radius: 5px; + border-radius: 5px 5px 0 0; + border-bottom: 2px solid gray; + gap: 2px; } h2 { @@ -52,16 +52,8 @@ h2 { display: flex; flex-direction: column; justify-content: space-between; - margin: 20 px; - -} - -.country { - border-radius: 5px; - color: black; - background-color: hotpink; - max-width: 70%; - min-width: 30px; + background-color: whitesmoke; + padding: 30px; } @@ -74,6 +66,8 @@ form { justify-content: center; } + + /* Sort Container */ .sort-container { @@ -81,6 +75,29 @@ form { display: flex; flex-direction: column; justify-content: space-between; + background-color: whitesmoke; + padding: 30px; +} + +/* buttons */ +.country, +.decending, +.ascending { + border-radius: 5px; + background-color: rgb(191, 202, 176); + max-width: 70%; + min-width: 30px; + font-weight: 800; + margin: 5px; + padding: 10px; + border: none; +} + +.country:hover, +.ascending:hover, +.decending:hover { + background-color: rgb(96, 96, 122); + color: white; } /* Card Contents */ From fed68fadbabdfa646a54d5ce7238a7371a0bd63e Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Wed, 18 Sep 2024 15:23:17 +0200 Subject: [PATCH 07/39] Co-authored-by: Anna Hansen Co-authored-by: Gabriella Iofe --- index.html | 86 ++++++++-- script.js | 452 +++++++++++++++++------------------------------------ style.css | 54 ++++--- 3 files changed, 249 insertions(+), 343 deletions(-) diff --git a/index.html b/index.html index a484b14..19ee026 100644 --- a/index.html +++ b/index.html @@ -23,10 +23,10 @@

Easy Peasy Recipes

Filter on Kitchen

- - - - + + + +
@@ -41,9 +41,9 @@

Sort

-
+
-
+ + +
diff --git a/script.js b/script.js index 6a61c06..6312c79 100644 --- a/script.js +++ b/script.js @@ -2,237 +2,9 @@ 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.*/ -const books = [ - { - title: 'The Great Gatsby', - author: 'F. Scott Fitzgerald', - year: 1925, - 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' - }, - { - title: 'To Kill a Mockingbird', - author: 'Harper Lee', - year: 1960, - 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' - }, - { - title: '1984', - author: 'George Orwell', - year: 1949, - 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' - }, - { - title: 'Pride and Prejudice', - author: 'Jane Austen', - year: 1813, - 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' - }, - { - title: 'The Catcher in the Rye', - author: 'J.D. Salinger', - year: 1951, - 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' - }, - { - title: 'The Hobbit', - author: 'J.R.R. Tolkien', - year: 1937, - 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' - }, - { - title: "Harry Potter and the Sorcerer's Stone", - author: 'J.K. Rowling', - year: 1997, - 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" - }, - { - title: 'Moby-Dick', - author: 'Herman Melville', - year: 1851, - 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' - }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - author: 'J.R.R. Tolkien', - year: 1954, - 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' - }, - { - title: 'The Shining', - author: 'Stephen King', - year: 1977, - 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' - }, - { - title: 'The Chronicles of Narnia: The Lion, the Witch and the Wardrobe', - author: 'C.S. Lewis', - year: 1950, - 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' - }, - { - title: 'The Da Vinci Code', - author: 'Dan Brown', - year: 2003, - 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' - }, - { - title: 'The Alchemist', - author: 'Paulo Coelho', - year: 1988, - 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' - }, - { - title: 'The Hunger Games', - author: 'Suzanne Collins', - year: 2008, - 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' - }, - { - title: 'The Girl with the Dragon Tattoo', - author: 'Stieg Larsson', - year: 2005, - 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' - }, - { - title: 'The Road', - author: 'Cormac McCarthy', - year: 2006, - 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' - }, - { - title: "The Hitchhiker's Guide to the Galaxy", - author: 'Douglas Adams', - year: 1979, - 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' - }, - { - title: 'The Giver', - author: 'Lois Lowry', - year: 1993, - 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' - }, + +const RECIPES = [ { name: 'Cheat’s cheesy focaccia', cuisineType: ['Italian'], @@ -247,6 +19,53 @@ const recipes = [ url: 'https://www.bbcgoodfood.com/recipes/cheats-cheesy-focaccia', image: './recipe-images/cheat’s-cheesy-focaccia.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' + }, + { + 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: '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: "Vegetarian Shepherd's Pie", cuisineType: ['Balanced', 'High-Fiber'], @@ -293,56 +112,6 @@ const recipes = [ 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', @@ -366,41 +135,104 @@ const recipes = [ image: './recipe-images/meat.jpg' }, { - name: 'Homemade Meat Broth', - cuisineType: 'american', + name: 'Individual vegetarian lasagnes', + cuisineType: ['italian'], 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' + '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: 'Cookstr', - totalTime: 60, - url: 'http://www.cookstr.com/recipes/il-brodo-homemade-meat-broth', - image: './recipe-images/meat.jpg' + source: 'Jamie Oliver', + totalTime: 130, + url: 'http://www.jamieoliver.com/recipes/vegetables-recipes/individual-vegetarian-lasagnes/', + image: './recipe-images/individual-vegetarian-lasagnes.jpg' }, { - name: 'Spice-Rubbed Grilled Flap Meat (Sirloin Tip) Recipe', - cuisineType: 'south-american', + 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: 'Vegetarian Stir-Fried Garlic Scape', + cuisineType: ['Balanced'], 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' + '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: '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' + 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' } ] + + + +const cardContainer = document.getElementById('card-container') + +const getRecipes = (recipesArray) => { + recipesArray.forEach(recipes => { + cardContainer.innerHTML += ` +
+
+ +
+
+

${recipes.name}

+

${recipes.ingredients}

+
+
` + }) +} + +// getRecipes(RECIPES) + + +// Eventlisteners + + + + + +//Buttons + +const allButton = document.getElementById("all"); + +const getRecipes = () => { + // We want to get the first breakfast in our array + answer.innerHTML = recipes[0]; +}; + + +getRecipes() + + +allButton.addEventListener("click", getRecipes); + + diff --git a/style.css b/style.css index 07f4e08..92cc046 100644 --- a/style.css +++ b/style.css @@ -18,6 +18,8 @@ h1 { text-align: center; color: #23362f; width: 100%; + padding-top: 50px; + } /* Main section mobile phone */ @@ -31,7 +33,7 @@ main { display: flex; justify-content: space-evenly; /* background-color: whitesmoke; */ - padding: 10px; + /* padding: 10px; */ max-width: 100%; padding: 20px 0 20px 0; border-radius: 5px 5px 0 0; @@ -52,8 +54,8 @@ h2 { display: flex; flex-direction: column; justify-content: space-between; - background-color: whitesmoke; - padding: 30px; + /* background-color: whitesmoke; */ + padding: 0px 25px 25px 25px; } @@ -75,8 +77,8 @@ form { display: flex; flex-direction: column; justify-content: space-between; - background-color: whitesmoke; - padding: 30px; + /* background-color: whitesmoke; */ + padding: 0px 25px 25px 25px; } /* buttons */ @@ -84,15 +86,18 @@ form { .decending, .ascending { border-radius: 5px; - background-color: rgb(191, 202, 176); - max-width: 70%; - min-width: 30px; - font-weight: 800; + background-color: #a3b8b1; + max-width: 80%; + font-weight: 700; margin: 5px; - padding: 10px; + padding: 5px; + border: none; border: none; + box-shadow: 10px 5px 5px grey; } +/* Changes made: Changed the background color so it is the same color theme as the background. Added a box shadow to the buttons and changed the font weight to 700. */ + .country:hover, .ascending:hover, .decending:hover { @@ -107,11 +112,15 @@ section { /* grid-template-columns: repeat(4, 1fr); */ /* display: flex; */ gap: 5px; - background: whitesmoke; + background: #d9e7e2; grid-template-columns: repeat(auto-fit, minmax(240px, 3fr)); padding: 20px; + border: red; } +/* +Changed the background of section so it is the same as the body background */ + .card { display: flex; border: 2px solid orange; @@ -120,15 +129,22 @@ section { flex-direction: column; } -/* .card-image { - /* min-width: 300px; */ -/* max-width: 100%; */ -/* border: 2px solid hotpink; */ -/* } */ +.card-image { + + width: 100%; + height: 300px; + /* Set a fixed height for all images */ + border: 2px solid hotpink; + overflow: hidden; + /* Ensures the image stays within the container */ + +} img { - max-width: 100%; - border: 2px solid hotpink; - display: block; + width: 100%; + height: 100%; + object-fit: cover; + /* Ensures the image covers the entire container while maintaining aspect ratio */ + /* align-items: center; */ } \ No newline at end of file From e7209d2663c245e0fea8b3ad60cdd5e9539c2e5a Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Thu, 19 Sep 2024 11:30:32 +0200 Subject: [PATCH 08/39] - added functions of filter and sorting buttons --- .vscode/settings.json | 3 ++ index.html | 2 +- script.js | 66 ++++++++++++++++++++++++++++++++++--------- style.css | 2 +- 4 files changed, 57 insertions(+), 16 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 19ee026..038e44e 100644 --- a/index.html +++ b/index.html @@ -34,8 +34,8 @@

Filter on Kitchen

Sort

- +
diff --git a/script.js b/script.js index 6312c79..0da91e9 100644 --- a/script.js +++ b/script.js @@ -193,15 +193,32 @@ const RECIPES = [ ] - const cardContainer = document.getElementById('card-container') -const getRecipes = (recipesArray) => { - recipesArray.forEach(recipes => { +// Select the button with the ID 'all' +const allButton = document.getElementById('all'); +const italyButton = document.getElementById('italy'); +const usaButton = document.getElementById('usa') +const chinaButton = document.getElementById('china') + +// Function to display all recipes +const displayRecipes = (recipesArray, filterCuisine = null) => { + // const getRecipes = (recipesArray) => { + // Clear the card container before adding new content + cardContainer.innerHTML = ''; // <-- Added to clear existing content + + + // Filter recipes if a filterCuisine is provided + const filteredRecipes = filterCuisine + ? recipesArray.filter(recipe => recipe.cuisineType.includes(filterCuisine)) + : recipesArray; + + + filteredRecipes.forEach(recipes => { cardContainer.innerHTML += `
- + ${recipes.name}

${recipes.name}

@@ -211,28 +228,49 @@ const getRecipes = (recipesArray) => { }) } -// getRecipes(RECIPES) -// Eventlisteners +// Display all recipes by default when the page loads +displayRecipes(RECIPES); +// Add event listeners to the buttons +allButton.addEventListener('click', () => { // Event listener for all recipes + displayRecipes(RECIPES); +}); +italyButton.addEventListener('click', () => { // Event listener for Italian recipes + displayRecipes(RECIPES, 'italian'); +}); +usaButton.addEventListener('click', () => { + displayRecipes(RECIPES, 'usa') +}); +chinaButton.addEventListener('click', () => { + displayRecipes(RECIPES, 'china') +}); -//Buttons -const allButton = document.getElementById("all"); +// Buttons for sorting +const ascendingButton = document.getElementById('ascending'); +const descendingButton = document.getElementById('descending'); -const getRecipes = () => { - // We want to get the first breakfast in our array - answer.innerHTML = recipes[0]; -}; +// Sort by recipe name in ascending order +ascendingButton.addEventListener('click', () => { + const sortedRecipes = [...RECIPES].sort((a, b) => a.name.localeCompare(b.name)); + displayRecipes(sortedRecipes); +}); -getRecipes() +// Sort by recipe name in descending order +descendingButton.addEventListener('click', () => { + const sortedRecipes = [...RECIPES].sort((a, b) => b.name.localeCompare(a.name)); + displayRecipes(sortedRecipes); + console.log(sortedRecipes) +}); +// Display all recipes initially +displayRecipes(RECIPES); -allButton.addEventListener("click", getRecipes); diff --git a/style.css b/style.css index 92cc046..9097134 100644 --- a/style.css +++ b/style.css @@ -125,7 +125,7 @@ Changed the background of section so it is the same as the body background */ display: flex; border: 2px solid orange; padding: 20px; - max-width: 100%; + max-width: 240px; flex-direction: column; } From 258333c9924d21cf35b8fb7e740c8173f8010c7e Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Thu, 19 Sep 2024 18:34:17 +0200 Subject: [PATCH 09/39] - added cooking time buttons --- index.html | 8 ++++++++ script.js | 13 +++++++++++++ style.css | 4 ++++ 3 files changed, 25 insertions(+) diff --git a/index.html b/index.html index 038e44e..9d0b6b7 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,14 @@

Filter on Kitchen

+
+

Cooking time

+
+ + +
+
+

Sort

diff --git a/script.js b/script.js index 0da91e9..a02b66b 100644 --- a/script.js +++ b/script.js @@ -269,6 +269,19 @@ descendingButton.addEventListener('click', () => { console.log(sortedRecipes) }); + +//Sort by shortest cooking time +shortestButton.addEventListener('click', () => { + const sortedRecipes = [...RECIPES].sort((a, b) => a.totalTime - b.totalTime); + displayRecipes(sortedRecipes); +}); + +//Sort by longest cooking time +longestButton.addEventListener('click', () => { + const sortedRecipes = [...RECIPES].sort((a, b) => b.totalTime - a.totalTime); + displayRecipes(sortedRecipes); +}); + // Display all recipes initially displayRecipes(RECIPES); diff --git a/style.css b/style.css index 9097134..f1299bd 100644 --- a/style.css +++ b/style.css @@ -83,6 +83,8 @@ form { /* buttons */ .country, +.shortest, +.longest, .decending, .ascending { border-radius: 5px; @@ -100,6 +102,8 @@ form { .country:hover, .ascending:hover, +.shortest:hover, +.longest:hover, .decending:hover { background-color: rgb(96, 96, 122); color: white; From 4d6fa854e8c1dd79eada97b52e664f1e09ba9912 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Fri, 20 Sep 2024 12:02:04 +0200 Subject: [PATCH 10/39] - worked on js: changed the cuisine buttons to make a drop-down menu --- index.html | 16 +++++++--- script.js | 86 ++++++++++++++++-------------------------------------- 2 files changed, 37 insertions(+), 65 deletions(-) diff --git a/index.html b/index.html index 9d0b6b7..11c3015 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,15 @@

Easy Peasy Recipes

-
+ +
+ +
+

Cooking time

@@ -42,8 +50,8 @@

Cooking time

Sort

- - + +
diff --git a/script.js b/script.js index a02b66b..5acead7 100644 --- a/script.js +++ b/script.js @@ -192,98 +192,62 @@ const RECIPES = [ } ] - const cardContainer = document.getElementById('card-container') +const filterDropdown = document.getElementById('filterDropdown') +const ascendingButton = document.getElementById('ascendingButton') +const descendingButton = document.getElementById('descendingButton') +const shortestButton = document.getElementById('shortest') +const longestButton = document.getElementById('longest') -// Select the button with the ID 'all' -const allButton = document.getElementById('all'); -const italyButton = document.getElementById('italy'); -const usaButton = document.getElementById('usa') -const chinaButton = document.getElementById('china') - -// Function to display all recipes -const displayRecipes = (recipesArray, filterCuisine = null) => { - // const getRecipes = (recipesArray) => { - // Clear the card container before adding new content - cardContainer.innerHTML = ''; // <-- Added to clear existing content +// Display all recipes by default when the page loads - // Filter recipes if a filterCuisine is provided - const filteredRecipes = filterCuisine - ? recipesArray.filter(recipe => recipe.cuisineType.includes(filterCuisine)) - : recipesArray; +const displayRecipes = (recipesArray) => { + cardContainer.innerHTML = '' //Clears the content + // Iterating over the whole recipe array to access each recipe object to be able to fill in the $key of the innerHTML afterwards + recipesArray.forEach(recipe => { - filteredRecipes.forEach(recipes => { cardContainer.innerHTML += `
- ${recipes.name} + ${recipe.name}
-

${recipes.name}

-

${recipes.ingredients}

+

${recipe.name}

+

${recipe.ingredients}

` }) } - - -// Display all recipes by default when the page loads -displayRecipes(RECIPES); - -// Add event listeners to the buttons -allButton.addEventListener('click', () => { // Event listener for all recipes - displayRecipes(RECIPES); -}); - -italyButton.addEventListener('click', () => { // Event listener for Italian recipes - displayRecipes(RECIPES, 'italian'); -}); - -usaButton.addEventListener('click', () => { - displayRecipes(RECIPES, 'usa') -}); - -chinaButton.addEventListener('click', () => { - displayRecipes(RECIPES, 'china') -}); - - -// Buttons for sorting -const ascendingButton = document.getElementById('ascending'); -const descendingButton = document.getElementById('descending'); - - +// Buttons for sorting // Sort by recipe name in ascending order ascendingButton.addEventListener('click', () => { - const sortedRecipes = [...RECIPES].sort((a, b) => a.name.localeCompare(b.name)); - displayRecipes(sortedRecipes); -}); + + const sortedRecipes = [...RECIPES].sort((a, b) => a.name.localeCompare(b.name)) + displayRecipes(sortedRecipes) +}) // Sort by recipe name in descending order descendingButton.addEventListener('click', () => { - const sortedRecipes = [...RECIPES].sort((a, b) => b.name.localeCompare(a.name)); + const sortedRecipes = [...RECIPES].sort((a, b) => b.name.localeCompare(a.name)) displayRecipes(sortedRecipes); console.log(sortedRecipes) -}); - +}) //Sort by shortest cooking time shortestButton.addEventListener('click', () => { - const sortedRecipes = [...RECIPES].sort((a, b) => a.totalTime - b.totalTime); + const sortedRecipes = [...RECIPES].sort((a, b) => a.totalTime - b.totalTime) displayRecipes(sortedRecipes); -}); +}) //Sort by longest cooking time longestButton.addEventListener('click', () => { - const sortedRecipes = [...RECIPES].sort((a, b) => b.totalTime - a.totalTime); + const sortedRecipes = [...RECIPES].sort((a, b) => b.totalTime - a.totalTime) displayRecipes(sortedRecipes); -}); +}) // Display all recipes initially -displayRecipes(RECIPES); - - +displayRecipes(RECIPES) From 92911f6c4d3ef33ae6ac9811256f060b8e90cae9 Mon Sep 17 00:00:00 2001 From: gabster94 Date: Fri, 20 Sep 2024 15:26:16 +0200 Subject: [PATCH 11/39] created a random button in html/js --- index.html | 12 +++++++++++- script.js | 8 +++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 11c3015..09417ce 100644 --- a/index.html +++ b/index.html @@ -48,7 +48,6 @@

Cooking time

Sort

-
@@ -57,6 +56,17 @@

Sort

+
+

What's for dinner tonight?

+

Can't decide? Let us help you pick your dinner.

+ + +
+

Cooking time

@@ -48,10 +40,10 @@

Cooking time

Sort

- - - - +
+ + +
@@ -59,10 +51,7 @@

Sort

What's for dinner tonight?

Can't decide? Let us help you pick your dinner.

-
@@ -75,97 +64,9 @@

What's for dinner tonight?

Cheesy Focaccia

-

lorem ipsum lorem ipsum

-
-
- -
-
- grilled -
-
-

Grilled

-

lorem ipsum lorem ipsum

-
-
- -
-
- fish-dish -
-
-

Fish

-

lorem ipsum lorem ipsum

-
-
- -
-
- chicken -
-
-

Baked Chicken

-

lorem ipsum lorem ipsum

-
-
- -
-
- sheperds pie -
-
-

Vegetarian Shepherds's Pie

-

lorem ipsum lorem ipsum

-
-
- -
-
- chicken-paprikash -
-
-

Chicken Paprika

-

lorem ipsum lorem ipsum

-
-
- -
-
- meat -
-
-

Meat

-

lorem ipsum lorem ipsum

-
-
- -
-
- lasagna -
-
-

Vegetarian Lasagna

-

lorem ipsum lorem ipsum

-
-
- -
-
- deep fried fish -
-
-

Deep Fried Fish

-

lorem ipsum lorem ipsum

-
-
- -
-
- garlic -
-
-

Garlic

-

lorem ipsum lorem ipsum

+

Cuisine Type:

+

Ingredients:

+
    --> diff --git a/script.js b/script.js index aa2c4c0..248b6e3 100644 --- a/script.js +++ b/script.js @@ -7,7 +7,7 @@ of the properties make sense to filter on, and some to sort on.*/ const RECIPES = [ { name: 'Cheat’s cheesy focaccia', - cuisineType: ['Italian'], + cuisineType: ['italian'], ingredients: [ '500g pack bread mix', '2 tbsp olive oil , plus a little extra for drizzling', @@ -199,6 +199,9 @@ const descendingButton = document.getElementById('descendingButton') const shortestButton = document.getElementById('shortest') const longestButton = document.getElementById('longest') const randomButton = document.getElementById('random-button') +const selectCountry = document.getElementById('selectCountry') +const countryDropdown = document.getElementById('countryDropdown') + // Display all recipes by default when the page loads @@ -212,23 +215,59 @@ const displayRecipes = (recipesArray) => { const ingredientsList = recipe.ingredients.map(ingredient => `
  • ${ingredient}
    • `).join('') // Handle cuisineType as array or string - const cuisine = Array.isArray(recipe.cuisineType) ? recipe.cuisineType.join(', ') : recipe.cuisineType + // const cuisine = Array.isArray(recipe.cuisineType) ? recipe.cuisineType.join(', ') : recipe.cuisineType cardContainer.innerHTML += ` -
    -
    - ${recipe.name} -
    -
    -

    ${recipe.name}

    -

    Cuisine: ${cuisine}

    -

    Ingredients:

    -
      ${ingredientsList}
    -
    -
    ` +
    +
    + ${recipe.name} +
    +
    +

    ${recipe.name}

    +

    Cuisine Type: ${recipe.cuisineType}

    +

    Ingredients:

    +
      ${ingredientsList}
    +
    +
    ` }) } + + +const filterRecipes = () => { + // get the value from the select + const value = filterDropdown.value + console.log('the user selected', value) + // if the user clicks "all", all the recipes will be shown + + if (value === 'all') { + displayRecipes(RECIPES) + + // if the user clicks on another choice only selected recipes will be shown. Since the cuisine types are sometimes stored as a 'string' and sometimes as an [array], I mentioned + } else if (value === 'american') { + + const americanRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('american')) + displayRecipes(americanRecipes) + + } else if (value === 'asian') { + + const asianRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('south east asian')) + displayRecipes(asianRecipes) + + } else if (value === 'italian') { + const italianRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('italian')) + + displayRecipes(italianRecipes) + + } +} + +// eventListener for the Dropdown menu +filterDropdown.addEventListener('change', filterRecipes) + + + + // Buttons for sorting // Sort by recipe name in ascending order ascendingButton.addEventListener('click', () => { @@ -261,6 +300,8 @@ randomButton.addEventListener('click', () => { const randomRecipe = RECIPES[randomIndex] displayRecipes([randomRecipe]) // Pass an array with the single recipe }) + // Display all recipes initially -displayRecipes(RECIPES) + +displayRecipes(RECIPES) \ No newline at end of file diff --git a/style.css b/style.css index f1299bd..a0b5ee6 100644 --- a/style.css +++ b/style.css @@ -98,8 +98,6 @@ form { box-shadow: 10px 5px 5px grey; } -/* Changes made: Changed the background color so it is the same color theme as the background. Added a box shadow to the buttons and changed the font weight to 700. */ - .country:hover, .ascending:hover, .shortest:hover, @@ -113,8 +111,6 @@ form { section { display: grid; - /* grid-template-columns: repeat(4, 1fr); */ - /* display: flex; */ gap: 5px; background: #d9e7e2; grid-template-columns: repeat(auto-fit, minmax(240px, 3fr)); @@ -122,9 +118,6 @@ section { border: red; } -/* -Changed the background of section so it is the same as the body background */ - .card { display: flex; border: 2px solid orange; @@ -134,14 +127,11 @@ Changed the background of section so it is the same as the body background */ } .card-image { - width: 100%; height: 300px; /* Set a fixed height for all images */ border: 2px solid hotpink; overflow: hidden; - /* Ensures the image stays within the container */ - } @@ -151,4 +141,12 @@ img { object-fit: cover; /* Ensures the image covers the entire container while maintaining aspect ratio */ /* align-items: center; */ +} + +.titleIngredients { + font-weight: bolder; +} + +.ingredients { + color: black; } \ No newline at end of file From e154a6da8f7e43a290ced96c1dc495f782f56757 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Fri, 20 Sep 2024 20:19:28 +0200 Subject: [PATCH 19/39] - added back the const for ingredientsList --- script.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/script.js b/script.js index 5f911f0..bdd667f 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,7 @@ const RECIPES = [ { name: 'Cheat’s cheesy focaccia', - cuisineType: ['italian'], + cuisineType: ['Italian'], ingredients: [ '500g pack bread mix', '2 tbsp olive oil , plus a little extra for drizzling', @@ -154,7 +154,7 @@ const RECIPES = [ }, { name: 'Deep Fried Fish Bones', - cuisineType: ['Chinese', ' south east asian'], + cuisineType: ['Chinese', 'south east asian'], ingredients: ['8 small whiting fish or smelt', '4 cups vegetable oil'], source: 'Serious Eats', totalTime: 31, @@ -193,8 +193,7 @@ const descendingButton = document.getElementById('descendingButton') const shortestButton = document.getElementById('shortest') const longestButton = document.getElementById('longest') const randomButton = document.getElementById('random-button') -const selectCountry = document.getElementById('selectCountry') -const countryDropdown = document.getElementById('countryDropdown') +// const selectCountry = document.getElementById('selectCountry') // Display all recipes by default when the page loads @@ -206,7 +205,10 @@ const displayRecipes = (recipesArray) => { recipesArray.forEach(recipe => { // Get the total time - const time = recipe.totalTime; + // const time = recipe.totalTime; + + const ingredientsList = recipe.ingredients.map(ingredient => `
  • ${ingredient}
    • `) + // Handle cuisineType as array or string // const cuisine = Array.isArray(recipe.cuisineType) ? recipe.cuisineType.join(', ') : recipe.cuisineType @@ -227,7 +229,6 @@ const displayRecipes = (recipesArray) => { } - const filterRecipes = () => { // get the value from the select const value = filterDropdown.value @@ -240,7 +241,7 @@ const filterRecipes = () => { // if the user clicks on another choice only selected recipes will be shown. Since the cuisine types are sometimes stored as a 'string' and sometimes as an [array], I mentioned } else if (value === 'american') { - const americanRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('american')) + const americanRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('American')) displayRecipes(americanRecipes) } else if (value === 'asian') { @@ -249,7 +250,7 @@ const filterRecipes = () => { displayRecipes(asianRecipes) } else if (value === 'italian') { - const italianRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('italian')) + const italianRecipes = RECIPES.filter(recipe => recipe.cuisineType && recipe.cuisineType.includes('Italian')) displayRecipes(italianRecipes) @@ -260,8 +261,6 @@ const filterRecipes = () => { filterDropdown.addEventListener('change', filterRecipes) - - // Buttons for sorting // Sort by recipe name in ascending order ascendingButton.addEventListener('click', () => { From 9fa0be48971c02478d28bfcdc1c2b25b78ca8f1e Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Fri, 20 Sep 2024 20:42:08 +0200 Subject: [PATCH 20/39] - changed css of #filterDropdown --- style.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 0471f06..7471ab2 100644 --- a/style.css +++ b/style.css @@ -55,6 +55,14 @@ h2 { #filterDropdown { cursor: pointer; + border-radius: 10px; + background-color: #adb6b3; + max-width: 80%; + font-weight: 700; + margin: 10px; + padding: 10px; + border: none; + } @@ -84,13 +92,11 @@ form { .ascending { border-radius: 10px; background-color: #74c2a8; - /* background-color: #a3b8b1; */ max-width: 80%; font-weight: 700; margin: 10px; padding: 10px; border: none; - border: none; box-shadow: 10px 5px 5px grey; cursor: pointer; } From 601f6f2aec07867f249be94f5d6680cf3cd516f1 Mon Sep 17 00:00:00 2001 From: gabster94 Date: Sat, 21 Sep 2024 10:40:32 +0200 Subject: [PATCH 21/39] recreated the lists in a way where is integrated in innerHTML to individual information for each card --- script.js | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/script.js b/script.js index bdd667f..740198b 100644 --- a/script.js +++ b/script.js @@ -35,7 +35,7 @@ const RECIPES = [ }, { name: 'Burnt-Scallion Fish', - cuisineType: ['Chinese'], + cuisineType: ['Asian', 'Chinese'], ingredients: [ '2 bunches scallions', '8 tbsp. butter', @@ -62,7 +62,7 @@ const RECIPES = [ }, { name: "Vegetarian Shepherd's Pie", - cuisineType: ['English', 'Balanced', 'High-Fiber'], + cuisineType: ['English', 'Traditional', 'Balanced', 'High-Fiber'], ingredients: [ '2 tablespoons extra-virgin olive oil', '1 large onion, finely diced', @@ -87,7 +87,7 @@ const RECIPES = [ }, { name: 'Chicken Paprikash', - cuisineType: ['Chinese', 'Low-Carb'], + cuisineType: ['Asian', 'Chinese', 'Low-Carb'], ingredients: [ '640 grams chicken - drumsticks and thighs ( 3 whole chicken legs cut apart)', '1/2 teaspoon salt', @@ -154,7 +154,7 @@ const RECIPES = [ }, { name: 'Deep Fried Fish Bones', - cuisineType: ['Chinese', 'south east asian'], + cuisineType: ['Chinese', 'south east asian', 'Asian'], ingredients: ['8 small whiting fish or smelt', '4 cups vegetable oil'], source: 'Serious Eats', totalTime: 31, @@ -205,13 +205,15 @@ const displayRecipes = (recipesArray) => { recipesArray.forEach(recipe => { // Get the total time - // const time = recipe.totalTime; - - const ingredientsList = recipe.ingredients.map(ingredient => `
  • ${ingredient}
    • `) + const time = recipe.totalTime; + + // Handle cuisineType as array or string + const cuisine = Array.isArray(recipe.cuisineType) ? recipe.cuisineType.join(', ') : recipe.cuisineType + + // Convert ingredients array to a list + const ingredientsList = recipe.ingredients.map(ingredient => `
  • ${ingredient}
    • `).join('') - // Handle cuisineType as array or string - // const cuisine = Array.isArray(recipe.cuisineType) ? recipe.cuisineType.join(', ') : recipe.cuisineType cardContainer.innerHTML += `
    @@ -219,10 +221,11 @@ const displayRecipes = (recipesArray) => { ${recipe.name}
    -

    ${recipe.name}

    -

    Cuisine Type: ${recipe.cuisineType}

    -

    Ingredients:

    -
      ${ingredientsList}
    +

    ${recipe.name}

    +

    Total Time: ${time} minutes

    +

    Cuisine: ${cuisine}

    +

    Ingredients:

    +
      ${ingredientsList}
    ` }) From 671947143b9fef968ac7ddd46461d4a97d657896 Mon Sep 17 00:00:00 2001 From: Gitte Beckmann Date: Sat, 21 Sep 2024 20:09:17 +0200 Subject: [PATCH 22/39] - deleted unessesary code in the CSS --- index.html | 15 ++------------- script.js | 6 +++--- style.css | 39 +++------------------------------------ 3 files changed, 8 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index d87ceaa..a83f66f 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,8 @@

    Easy Peasy Recipes

    -
    +
    +

    Type of Kitchen