ImAlpha/OdinProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

recipe website complete with 3 recipes

Browse Source
This commit is contained in:
Jacob Delgado 2023-04-04 21:59:25 -07:00
parent ed397d7acc
commit 342800de2f
5 changed files with 161 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
Markdown/TheOdinProjectNotes.md
View File

@ -305,4 +305,24 @@ git remote set-url origin https://'username':'password'@repositorylink
### Recipes ### Recipes
- Project to build a basic recipe website - Project to build a basic recipe website
- Will have a main index page with links to a few recipes - Will have a main index page with links to a few recipes
#### Assignment
- Iteration 1: Initial Structure
- Within the `odin-recipes` directory, create an `index.html` file
- Fill it out with the usual boilerplate HTML and add an `h1` heading "Odin Recipes" to the body
- Iteration 2: Recipe Page
- Create a new directory within the `odin-recipes` directory and name it `recipes`
- Create a new HTML file within the `recipes` directory and name it after the recipe it will contain.
- Ie. `lasagna.html`
- Include an `h1` heading with the recipe's name as its content
- Back in the `index.html` file, add a link to the recipe page you just created
- Use an anchor
- Iteration 3: Recipe Page Content
- An Image of the finished dish under the `h1` heading
- Under the image, it should have an appropriately sized "Description" heading followed by a paragraph or two describing the recipe
- Under the description, add an "Ingredients" heading followed by an **unordered list** of the ingredients needed for the recipe.
- Finally, under the ingredients list, add a "Steps" heading followed by an **ordered list** of the steps needed for making the dish
- Iteration 4: Add More Recipes
- Add two more recipes with the identical page structures to the recipe page you've already created
- Don't forget to link to the new recipes on the index page
- Consider putting all the links in an *unordered list* so they aren't all on one line.
- -

17
odin-recipes/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Odin Recipes</h1>
<ul>
<li><a href="./recipes/lasagna.html">Lasagna</a></li>
<li><a href="./recipes/ChickenTenders.html">Chicken Tenders</a></li>
<li><a href="./recipes/Salmon.html">Grilled Salmon</a></li>
</ul>
</body>
</html>

40
odin-recipes/recipes/ChickenTenders.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Juicy Chicken Tenders</h1>
<img
src="https://www.allrecipes.com/thmb/PVq8orYq_Dqa0eXIsVtn4EVGzV4=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/227447-4ac24b5994b84ebfa5f55f1d96eec84c.jpg">
<h2>Description</h2>
<p>
The Recipe was created by John Chandler, it became one of the most popular lasagna recipes
today and is still replicated and enjoyed.
</p>
<p>
His legacy is the lasagna since he passed away at a young age of 53
</p>
<h2>Ingredients</h2>
<ul>
<li>1 cup pineapple juice</li>
<li>half cup packed brown Sugar</li>
<li>1-third cup light soy sauce</li>
<li>2 pounds chicken breast tenderloins or strips</li>
<li>skewers</li>
</ul>
<h2>Steps</h2>
<ol>
<li>In a small saucepan over medium heat, mix pineapple juice,
brown sugar, and soy sauce. Remove from heat just before the mixture comes to a boil.</li>
<li>Place chicken tenders in a medium bowl.
Cover with the pineapple marinade, and refrigerate for at least 30 minutes.</li>
<li>Preheat grill for medium heat. Thread chicken lengthwise onto wooden skewers.</li>
<li>Lightly oil the grill grate. Grill chicken tenders 5 minutes per side,
or until juices run clear. They cook quickly, so watch them closely.</li>
</ol>
</body>
</html>

41
odin-recipes/recipes/Salmon.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Grilled Salmon</h1>
<img
src="https://www.allrecipes.com/thmb/31qvAWKKQX7k9Px_yN3xh5vv-Nk=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/800839-3ba65bf49ebd49219625dca9140c8bbc.jpg">
<h2>Description</h2>
<p>
Amazingly sweet salmon that is fresh as can be that goes well with veggies.
</p>
<h2>Ingredients</h2>
<ul>
<li>1.5 pounds of salmon fillets</li>
<li>lemon pepper to taste</li>
<li>garlic powder to taste</li>
<li>Salt to taste</li>
<li>1-third cup soy sauce</li>
<li>1-third cup brown sugar</li>
<li>1-third cup water</li>
<li>1-third cup vegetable oil</li>
</ul>
<h2>Steps</h2>
<ol>
<li>Season salmon fillets with lemon pepper, garlic powder, and salt</li>
<li>Stir soy sauce, brown sugar, water, and vegetable oil together in a
small bowl until sugar is dissolved. Place fish in a large resealable
plastic bag; add soy sauce mixture, seal, and turn to coat. Refrigerate
for at least 2 hours.
</li>
<li>Preheat an outdoor grill for medium heat and lightly oil the grate.</li>
<li>Place salmon on the preheated grill, and discard marinade. Cook salmon
until fish flakes easily with a fork, about 6 to 8 minutes per side.</li>
</ol>
</body>
</html>

43
odin-recipes/recipes/lasagna.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>The Best Meat Lasagna</h1>
<img
src="https://www.allrecipes.com/thmb/MkKfYU4oim55CLp39DDuNMuyThA=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/23600-worlds-best-lasagna-armag-4x3-1-b24f9ad518d74090bf197828492c64a6.jpg">
<h2>Description</h2>
<p>
The Recipe was created by John Chandler, it became one of the most popular lasagna recipes
today and is still replicated and enjoyed.
</p>
<p>
His legacy is the lasagna since he passed away at a young age of 53
</p>
<h2>Ingredients</h2>
<ul>
<li>Meat(Italian sausage and lean ground beef)</li>
<li>Onion and garlic</li>
<li>Tomato products(Can of crushed Tomato, two cans of tomato sauce, two cans of tomato paste)</li>
<li>Sugar(two table spoons)</li>
<li>Spices and seasonings(fresh parsley, dried basil leaves, salt, italian seasoning, fennel seeds, and black pepper)</li>
<li>Lasagna noodles</li>
<li>Cheeses(Parmesan, mozzarella, and ricotta)</li>
<li>Egg</li>
</ul>
<h2>Steps</h2>
<ol>
<li>Make the meat sauce</li>
<li>Cook the noodles</li>
<li>Make the ricotta mixture</li>
<li>Layer the lasagna according to the recipe instructions</li>
<li>Cover with foil and bake</li>
<li>Let the lasagna rest before saving</li>
<li>50 minutes in oven at 375 degrees.</li>
</ol>
</body>
</html>