+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pull_request_template.md b/pull_request_template.md
deleted file mode 100644
index d92c89b..0000000
--- a/pull_request_template.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## Netlify link
-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]
diff --git a/recipe-images/baked-chicken.jpg b/recipe-images/baked-chicken.jpg
deleted file mode 100644
index b580fdc..0000000
Binary files a/recipe-images/baked-chicken.jpg and /dev/null differ
diff --git "a/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg" "b/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg"
deleted file mode 100644
index 4a6128e..0000000
Binary files "a/recipe-images/cheat\342\200\231s-cheesy-focaccia.jpg" and /dev/null differ
diff --git a/recipe-images/chicken-paprikash.jpg b/recipe-images/chicken-paprikash.jpg
deleted file mode 100644
index 361e5fe..0000000
Binary files a/recipe-images/chicken-paprikash.jpg and /dev/null differ
diff --git a/recipe-images/deep-fried-fish-bones.jpg b/recipe-images/deep-fried-fish-bones.jpg
deleted file mode 100644
index d9ed554..0000000
Binary files a/recipe-images/deep-fried-fish-bones.jpg and /dev/null differ
diff --git a/recipe-images/fish-dish.jpg b/recipe-images/fish-dish.jpg
deleted file mode 100644
index 4166fb7..0000000
Binary files a/recipe-images/fish-dish.jpg and /dev/null differ
diff --git a/recipe-images/grilled.jpg b/recipe-images/grilled.jpg
deleted file mode 100644
index fe7a433..0000000
Binary files a/recipe-images/grilled.jpg and /dev/null differ
diff --git a/recipe-images/individual-vegetarian-lasagnes.jpg b/recipe-images/individual-vegetarian-lasagnes.jpg
deleted file mode 100644
index 58fab20..0000000
Binary files a/recipe-images/individual-vegetarian-lasagnes.jpg and /dev/null differ
diff --git a/recipe-images/meat.jpg b/recipe-images/meat.jpg
deleted file mode 100644
index b1896d9..0000000
Binary files a/recipe-images/meat.jpg and /dev/null differ
diff --git a/recipe-images/vegetarian-shepherd's-pie.jpg b/recipe-images/vegetarian-shepherd's-pie.jpg
deleted file mode 100644
index a6d811a..0000000
Binary files a/recipe-images/vegetarian-shepherd's-pie.jpg and /dev/null differ
diff --git a/recipe-images/vegetarian-stir-fried-garlic-s.jpg b/recipe-images/vegetarian-stir-fried-garlic-s.jpg
deleted file mode 100644
index 86babc8..0000000
Binary files a/recipe-images/vegetarian-stir-fried-garlic-s.jpg and /dev/null differ
diff --git a/script.js b/script.js
index 6a61c06..aa0a23f 100644
--- a/script.js
+++ b/script.js
@@ -1,406 +1,278 @@
-/*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.*/
-
-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'
- },
+const MOVIES = [
{
- 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: 'Mad Max: Fury Road',
+ director: 'George Miller',
+ year: 2015,
+ genre: 'Action',
+ rating: 8.1,
+ description: 'In a post-apocalyptic wasteland, Max teams up with Furiosa to escape a tyrannical leader and his army.',
+ img: 'https://neiloseman.com/wp-content/uploads/2015/05/cars.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: 'John Wick',
+ director: 'Chad Stahelski',
+ year: 2014,
+ genre: 'Action',
+ rating: 7.4,
+ description: 'An ex-hitman comes out of retirement to track down the gangsters that killed his dog and took everything from him.',
+ img: 'https://images.squarespace-cdn.com/content/v1/58c9b86bd1758e1f19dec72a/1501069711610-DG98OOT2PVRWH7K317BJ/SKC+Blog+Hero+John+Wick+2+BW.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: '2001: A Space Odyssey',
+ director: 'Stanley Kubrick',
+ year: 1968,
+ genre: 'Sci-Fi',
+ rating: 8.7,
+ description: 'A mysterious black monolith is discovered on the moon, leading to a journey of exploration and philosophical contemplation.',
+ img: 'https://ychef.files.bbci.co.uk/1280x720/p0639ffn.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',
+ title: 'Die Hard',
+ director: 'John McTiernan',
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'
+ genre: 'Action',
+ rating: 8.2,
+ description: 'An NYPD officer tries to save his wife and several others taken hostage by German terrorists during a Christmas party.',
+ img: 'https://static1.colliderimages.com/wordpress/wp-content/uploads/2023/06/die-hard-movies-ranked.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 Hangover',
+ director: 'Todd Phillips',
+ year: 2009,
+ genre: 'Comedy',
+ rating: 7.7,
+ description: 'Three friends wake up from a bachelor party in Las Vegas with no memory of the previous night and the bachelor missing.',
+ img: 'https://cdn.europosters.eu/image/750/posters/the-hangover-strips-i8824.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: 'Superbad',
+ director: 'Greg Mottola',
+ year: 2007,
+ genre: 'Comedy',
+ rating: 7.6,
+ description: 'Two co-dependent high school seniors are forced to deal with separation anxiety after their plan to throw a party goes awry.',
+ img: 'https://media.vanityfair.com/photos/62fa88ecd703349a746d4ea2/4:3/w_1776,h_1332,c_limit/vf-822-superbad-making-of-005.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: 'Anchorman: The Legend of Ron Burgundy',
+ director: 'Adam McKay',
+ year: 2004,
+ genre: 'Comedy',
+ rating: 7.2,
+ description: 'Ron Burgundy is the top-rated newsman in San Diego in the 1970s, but that\'s all about to change for him and his cronies.',
+ img: 'https://www.hollywoodreporter.com/wp-content/uploads/2013/12/anchorman_2.jpg?w=1280'
},
{
- title: 'The Giver',
- author: 'Lois Lowry',
+ title: 'Jurassic Park',
+ director: 'Steven Spielberg',
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'
- }
-]
+ genre: 'Sci-Fi',
+ rating: 8.3,
+ description: 'A theme park featuring cloned dinosaurs is opened, but things go wrong when the dinosaurs escape.',
+ img: 'https://static1.srcdn.com/wordpress/wp-content/uploads/2023/05/jurassic-park-sequels-dinosaurs-humans-more-important.jpg?q=50&fit=crop&w=1140&h=&dpr=1.5'
-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'
+ title: 'The Shawshank Redemption',
+ director: 'Frank Darabont',
+ year: 1994,
+ genre: 'Drama',
+ rating: 9.3,
+ description: 'Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.',
+ img: 'https://i.guim.co.uk/img/media/6495f40152ef3ec8408d1ebfe33fdbf28e7f002b/0_0_3062_1838/master/3062..jpg?width=1200&quality=85&auto=format&fit=max&s=58392c0605f25196166513ff721510c8'
},
{
- 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'
+ title: 'Forrest Gump',
+ director: 'Robert Zemeckis',
+ year: 1994,
+ genre: 'Drama',
+ rating: 8.8,
+ description: 'The presidencies of Kennedy and Johnson, Vietnam, Watergate, and other history unfold through the perspective of an Alabama man with an IQ of 75.',
+ img: 'https://m.media-amazon.com/images/M/MV5BMTcwNzc4NjE1OV5BMl5BanBnXkFtZTcwMTE5NjkyMQ@@._V1_QL75_UX1640_.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"
+ title: 'The Godfather',
+ director: 'Francis Ford Coppola',
+ year: 1972,
+ genre: 'Drama',
+ rating: 9.2,
+ description: 'The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.',
+ img: 'https://wallpapers.com/images/high/the-godfather-red-zigzag-komiqqdvm2mg8eju.webp'
},
{
- 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'
+ title: 'Blue Valentine',
+ director: 'Derek Cianfrance',
+ year: 2010,
+ genre: 'Drama',
+ rating: 8.1,
+ description: `A couple's relationship deteriorates over the course of several years as they navigate the challenges of love, marriage, and parenthood.`,
+ img: 'https://www.intofilm.org/intofilm-production/scaledcropped/970x546https%3A/s3-eu-west-1.amazonaws.com/images.cdn.filmclub.org/film__16416-blue-valentine--hi_res-c050c251.jpg/film__16416-blue-valentine--hi_res-c050c251.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'
+ title: 'Interstellar',
+ director: 'Christopher Nolan',
+ year: 2014,
+ genre: 'Sci-Fi',
+ rating: 8.6,
+ description: 'A team of explorers travel through a wormhole in space in an attempt to ensure humanity’s survival.',
+ img: 'https://www.ljudochbild.se/wp-content/uploads/Interstellar_1.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'
+ title: 'Gladiator',
+ director: 'Ridley Scott',
+ year: 2000, genre: 'Drama',
+ rating: 8.7,
+ description: 'A Roman general is betrayed and sold into slavery, forced to fight as a gladiator in the Colosseum. He seeks revenge against the emperor who ruined his life.',
+ img: 'https://m.media-amazon.com/images/M/MV5BMjExOTEyNDgxOV5BMl5BanBnXkFtZTcwMDU0NjcxNA@@._V1_.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'
+ title: 'Dogville',
+ director: 'Lars von Trier',
+ year: 2003,
+ genre: 'Drama',
+ rating: 8.0,
+ description: 'A woman on the run from the mob seeks refuge in a small town, but the townspeople gradually become increasingly hostile and controlling.',
+ img: 'https://www.destudio.com/sites/default/files/styles/project_media/public/2023-06/photo-3-dogville.jpg?h=dfb83448&itok=n68Nrmp-'
},
{
- 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'
+ title: 'The Matrix',
+ director: 'Lana Wachowski, Lilly Wachowski',
+ year: 1999,
+ genre: 'Sci-Fi',
+ rating: 8.7,
+ description: 'A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers.',
+ img: 'https://www.syfy.com/sites/syfy/files/styles/scale_1280/public/2021/03/the-matrix.jpeg'
},
{
- 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'
+ title: 'Blade Runner 2049',
+ director: 'Denis Villeneuve',
+ year: 2017,
+ genre: 'Sci-Fi',
+ rating: 8.0,
+ description: 'A young blade runner\'s discovery of a long-buried secret leads him to track down former blade runner Rick Deckard, who\'s been missing for thirty years.',
+ img: 'https://vfxblog.com/wp-content/uploads/2019/11/bfb30-096_0010_wvg_v182_1069ab.jpg?w=1200&h=773'
},
{
- 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'
+ title: 'Raiders of the Lost Ark',
+ director: 'Steven Spielberg',
+ year: 1981,
+ genre: 'Action',
+ rating: 8.7,
+ description: 'Archaeologist Indiana Jones embarks on a perilous quest to find the Ark of the Covenant before it falls into the wrong hands.',
+ img: 'https://www.kennedy-center.org/globalassets/whats-on/millennium-stage/2023/05.-may/film_raidersofthelostark_web.jpg?format=webp&width=1600&quality=70'
+
},
- {
- 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'
+];
+
+// Function that shows all movies
+
+const container = document.getElementById('container');
+
+const getMovies = (moviesArray) => {
+ container.innerHTML = '';
+ moviesArray.forEach(movie => {
+ container.innerHTML += `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Browse by Genre
+
+
+
+
+
+
+
+
+
+
+
+
+ Let Fate Choose Your Movie!
+ +
+ 
+
`;
+ });
+}
+
+getMovies(MOVIES);
+
+// Filter movies by genre
+
+document.getElementById('all-btn').addEventListener('click', () => {
+ showMoviesByGenre('all');
+});
+
+document.getElementById('comedy-btn').addEventListener('click', () => {
+ showMoviesByGenre('Comedy');
+});
+
+document.getElementById('drama-btn').addEventListener('click', () => {
+ showMoviesByGenre('Drama');
+});
+
+document.getElementById('sci-fi-btn').addEventListener('click', () => {
+ showMoviesByGenre('Sci-Fi');
+});
+
+document.getElementById('action-btn').addEventListener('click', () => {
+ showMoviesByGenre('Action');
+});
+
+const showMoviesByGenre = (genre) => {
+ let filteredMovies = MOVIES;
+
+ if (genre !== 'all') {
+ filteredMovies = MOVIES.filter(movie => movie.genre === genre);
}
-]
+
+ getMovies(filteredMovies);
+};
+
+
+// Function to display a random movie and hide others
+const showRandomMovie = () => {
+ // Get a random index
+ const randomIndex = Math.floor(Math.random() * MOVIES.length);
+ const randomMovie = MOVIES[randomIndex];
+
+ // Clear the container first (hide all other movies)
+ container.innerHTML = '';
+
+ // Display only the random movie
+ randomMovieContainer.innerHTML = `
+ ${movie.title}
+Director: ${movie.director}, Year: ${movie.year}
+Genre: ${movie.genre}, Rating: ${movie.rating}
+${movie.description}
+
+ 
+
+ `;
+}
+
+// Event listener for the "Show Random Movie" button
+document.getElementById('random-btn').addEventListener("click", showRandomMovie);
+
+
+// Function to handle sorting
+const sortMovies = (sortBy) => {
+ let sortedMovies = [...MOVIES]; // Create a copy of the array to sort
+
+ switch (sortBy) {
+ case 'title':
+ sortedMovies.sort((a, b) => a.title.localeCompare(b.title)); // Sort alphabetically by title
+ break;
+ case 'director':
+ sortedMovies.sort((a, b) => a.director.localeCompare(b.director)); // Sort alphabetically by director
+ break;
+ case 'year':
+ sortedMovies.sort((a, b) => b.year - a.year); // Sort by year, latest to oldest
+ break;
+ case 'rating':
+ sortedMovies.sort((a, b) => b.rating - a.rating); // Sort by rating, highest to lowest
+ break;
+ case 'all':
+ default:
+ sortedMovies = MOVIES; // No sorting, return to original order
+ break;
+ }
+
+ // Display the sorted movies
+ getMovies(sortedMovies);
+};
+
+// Event listener to the dropdown for sorting
+
+document.getElementById('filterDropdown').addEventListener('change', (event) => {
+ const selectedOption = event.target.value;
+ sortMovies(selectedOption);
+});
diff --git a/style.css b/style.css
index e69de29..800b442 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,254 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #f8f9fc;
+ font-family: "Comic Neue", cursive, sans-serif;
+}
+
+.comic-neue-regular {
+ font-family: "Comic Neue", cursive, sans-serif;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.hero {
+ background-image: url(https://img.freepik.com/free-photo/flat-lay-composition-cinema-objects_23-2148115817.jpg?t=st=1726863116~exp=1726866716~hmac=0c291a0ac5f6c25ec8fcb79ea0d15c33c7414def5dc7a0415ccfdf592c6722a0&w=826);
+ background-size: cover;
+ background-position: center;
+ height: 350px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: white;
+}
+
+.hero-h1 {
+ padding: 20px;
+ font-family: "Fascinate Inline", cursive, sans-serif;
+ text-align: center;
+}
+
+.movie-library {
+ padding: 20px;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+}
+
+h1 {
+ font-size: 70px;
+ color: white;
+ font-family: "Fascinate Inline", cursive, sans-serif;
+}
+
+.fascinate-inline-regular {
+ font-family: "Fascinate Inline", cursive, sans-serif;
+ font-weight: 400;
+ font-style: normal;
+}
+
+.controls {
+ display: grid;
+ justify-content: space-around;
+ margin-bottom: 2dv;
+}
+
+.filter {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+select {
+ background-color: #f4f3e4;
+ border: none;
+ border-radius: 20px;
+ padding: 8px 15px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ font-family: "Comic Neue", cursive;
+ font-weight: 900;
+ width: 50%;
+ margin: 25px auto;
+ padding-left: 20px;
+ font-size: 18px;
+
+}
+
+
+h3 {
+ margin-bottom: 10px;
+ color: #333;
+}
+
+h2 {
+ margin-bottom: 10px;
+ color: #333;
+ font-size: 32px;
+}
+
+.filter-btn {
+ background-color: #e4f4e8;
+ border: none;
+ border-radius: 20px;
+ padding: 8px 15px;
+ margin: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ font-family: "Comic Neue", cursive;
+ font-weight: 900;
+ font-size: 18px;
+}
+
+.filter-btn:hover {
+ background-color: #c7e8d4;
+}
+
+.filter-btn.active {
+ background-color: #d2f3c9;
+}
+
+.random-btn {
+ background-color: #c5412d;
+ border: none;
+ border-radius: 20px;
+ padding: 8px 15px;
+ margin: 5px;
+ cursor: pointer;
+ font-weight: bold;
+ color: white;
+ transition: background-color 0.3s ease;
+ font-family: "Comic Neue", cursive;
+ font-weight: 900;
+ font-size: 24px;
+}
+
+.random-btn:hover {
+ background-color: #cc3016;
+}
+
+.random-box {
+ background: white;
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+ width: 90%;
+ padding: 20px 10px;
+}
+
+.randomMovieButtonBox {
+ display: flex;
+ flex-direction: column;
+ margin: 0 auto;
+}
+
+.randomMovieContainer {
+ margin-top: 20px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ width: 50%;
+ margin: 0 auto;
+ flex-direction: column;
+ border-radius: 15px;
+}
+
+.container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+ justify-items: center;
+ margin: 0% auto;
+}
+
+.card {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ border: 1px solid #ddd;
+ border-radius: 15px;
+ width: 100%;
+ padding: 10px;
+ text-align: left;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.2s ease;
+}
+
+.card:hover {
+ transform: translateY(-5px);
+}
+
+.card img {
+ width: 100%;
+ height: 450px;
+ object-fit: cover;
+ border-radius: 10px;
+ margin-bottom: 15px;
+}
+
+
+p {
+ margin: 5px 0;
+}
+
+h4 {
+ margin-top: 10px;
+ font-size: 16px;
+ color: #444;
+}
+
+@media (max-width: 768px) {
+
+ h1 {
+ font-size: 35px;
+ }
+
+ .container {
+ grid-template-columns: 1fr;
+ }
+
+ .card img {
+ height: 330px;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+
+ .randomMovieContainer {
+ margin-top: 20px;
+ padding: 10px;
+ display: flex;
+ justify-content: center;
+ width: 95%;
+ margin: 0 auto;
+ flex-direction: column;
+ }
+
+}
+
+@media (min-width: 769px) and (max-width: 1023px) {
+ h1 {
+ font-size: 56px;
+ }
+
+ .container {
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .randomMovieContainer {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .card img {
+ height: 375px;
+ object-fit: cover;
+ }
+}
${randomMovie.title}
+Director: ${randomMovie.director}, Year: ${randomMovie.year}
+Genre: ${randomMovie.genre}, Rating: ${randomMovie.rating}
+${randomMovie.description}
+