Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#186 PTBC 10 Stewart - 1.E.1 Recipe Site #186

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

#186 PTBC 10 Stewart - 1.E.1 Recipe Site #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
eeb19a9
update README
Jan 17, 2024
ccab648
Staging files
Jan 20, 2024
c4ecb00
Completed index and cuisine page
Jan 20, 2024
93ab138
Updated README.md
Jan 20, 2024
0fa12dd
Fix: updated the repo url
Jan 20, 2024
9c9536b
Adding remaining recipes for the assignment
Jan 20, 2024
69c5056
Minor updates to dark mode toggle
Jan 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,32 @@
# Rocket Academy Coding Bootcamp: Recipe Site
# All Oven Recipes

A delightful web application showcasing various oven-baked recipes from around the world. This site is perfect for busy professionals looking for quick, delicious oven-baked meals.

## Features

- **Cuisine Showcase**: Explore a variety of recipes, including Mexican and Italian specialties.
- **Dark Mode**: Switch to dark mode for a comfortable browsing experience in low-light conditions.

## Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

### Installing

1. Clone the repository to your local machine:
```shell
git clone https://github.com/nordic-roast/recipe-site-bootcamp.git

2. Open the index.html file in a browser to view the project.

### Usage
- Click on any recipe card to learn more about the dish.
- Toggle the 'Dark Mode' button at the center of the page for a dark theme.


### Built With
- **HTML** - The markup language used
- **CSS** - For styling the application
- **Javascript** - Used to create interactive elements
- **FontAwesome** - For icons
- **GoogleFonts** - For web fonts
52 changes: 45 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<title>The Best Recipes!</title>
</head>
<body>
<h1>Recipes</h1>
</body>
</html>

<head>
<title>All Oven Recipes</title>
<link rel="stylesheet" href="./styles/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon"
href="https://assets-global.website-files.com/63272a4884915258a601e154/63f5d1fbd33aa94a63f0cf93_Rocket%20Favicon.png">
<script src="./js/scripts.js" defer></script>
</head>

<body>

<div class="container section-title">
<span class="title-heading">
All Oven Recipe Homepage
</span>
</div>

<div class="flex-container">
<button id="darkModeToggle" class="btn-secondary">
<i class="fa fa-moon margin-right"></i>
Dark Mode
</button>
</div>

<div class="recipe-list">
<a href="./pages/mexican-bakes.html" class="recipe-item-link">
<div class="recipe-item">
<img width="300px" height="200px"
src="https://elpollonorteno.net/wp-content/uploads/tacos3-fp-scaled-2560x1280.jpg">
<div class="recipe-title">Mexican specialty</div>
</div>
</a>

<a href="./pages/italian-bakes.html" class="recipe-item-link">
<div class="recipe-item">
<img width="300px" height="200px"
src="https://www.the-pasta-project.com/wp-content/uploads/sicilian-baked-pasta-2-001-640x433.jpg">
<div class="recipe-title">Italian specialty</div>
</div>
</a>
</body>

</html>
7 changes: 7 additions & 0 deletions js/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
document.addEventListener('DOMContentLoaded', (event) => {
const toggleButton = document.getElementById('darkModeToggle');

toggleButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
});
});
75 changes: 75 additions & 0 deletions pages/baked-ziti.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Italian Baked Ziti Recipe</title>
<link rel="stylesheet" href="../styles/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon"
href="https://assets-global.website-files.com/63272a4884915258a601e154/63f5d1fbd33aa94a63f0cf93_Rocket%20Favicon.png">
<script src="../js/scripts.js" defer></script>
</head>

<body class="flex-container">
<div class="flex-center">

<div class="recipe-header">
<h1>Italian Baked Ziti</h1>
</div>

<div class="flex-container" style="margin-bottom: 24px;">
<button id="darkModeToggle" class="btn-secondary">
<i class="fa fa-moon margin-right"></i>
Dark Mode
</button>
</div>

<img src="https://i0.wp.com/www.onceuponachef.com/images/2017/10/Baked-Ziti.jpg?w=1680&ssl=1" width="400px"
alt="Italian Baked Ziti">
<div class="recipe-content flex-center">
<h2>Ingredients</h2>
<ul>
<li>1 pound dry ziti pasta</li>
<li>1 onion, chopped</li>
<li>1 pound lean ground beef</li>
<li>2 (26 ounce) jars pasta sauce</li>
<li>6 ounces provolone cheese, sliced</li>
<li>1 1/2 cups sour cream</li>
<li>6 ounces mozzarella cheese, shredded</li>
<li>2 tablespoons grated Parmesan cheese</li>
</ul>

<h2>Directions</h2>
<ul>
<li>Bring a large pot of lightly salted water to a boil. Add ziti pasta, and cook until al dente, about
8 minutes; drain.</li>
<li>In a large skillet, brown onion and ground beef over medium heat. Add spaghetti sauce, and simmer 15
minutes.</li>
<li>Preheat the oven to 350 degrees F (175 degrees C).</li>
<li>Butter a 9x13 inch baking dish. Layer as follows: 1/2 of the ziti, Provolone cheese, sour cream.
</li>
<li>Bake for 30 minutes in the preheated oven, or until cheeses are melted./li>
</ul>
</div>

<section class="container other-cuisines">
<h3>Quick links</h3>
<div>
<span class="btn-primary">
<i class="fa fa-chevron-left margin-right"></i><a href="./italian-bakes.html">Back to previous</a>
</span>
<span class="btn-secondary">
<i class="fa fa-home margin-right"></i><a href="../index.html">Return to home</a>
</span>
<span class="btn-secondary" onclick="window.print();"">
<i class=" fa fa fa-print margin-right"></i>Print
</span>
</div>
</section>

</div>

</body>

</html>
77 changes: 77 additions & 0 deletions pages/beef-taco.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Mexican Beef Tacos Recipe</title>
<link rel="stylesheet" href="../styles/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon"
href="https://assets-global.website-files.com/63272a4884915258a601e154/63f5d1fbd33aa94a63f0cf93_Rocket%20Favicon.png">
<script src="../js/scripts.js" defer></script>
</head>

<body class="flex-container">
<div class="flex-center">

<div class="recipe-header">
<h1>Mexican Beef Tacos</h1>
</div>

<div class="flex-container" style="margin-bottom: 24px;">
<button id="darkModeToggle" class="btn-secondary">
<i class="fa fa-moon margin-right"></i>
Dark Mode
</button>
</div>

<img src="https://kaynutrition.com/wp-content/uploads/2023/08/shredded-beef-tacos.jpg" width="400px"
alt="Mexican Beef Tacos">
<div class="recipe-content flex-center">
<h2>Ingredients</h2>
<ul>
<li>1 lb ground beef</li>
<li>1 packet taco seasoning mix</li>
<li>1/2 cup onion, diced</li>
<li>1 can diced tomatoes, drained</li>
<li>1/2 cup salsa</li>
<li>1/4 cup fresh cilantro, chopped</li>
<li>8 taco shells</li>
<li>1 cup lettuce, shredded</li>
<li>1 cup cheddar cheese, shredded</li>
<li>Sour cream for topping</li>
<li>Guacamole for topping</li>
</ul>

<h2>Directions</h2>
<ol>
<li>In a large skillet, cook ground beef and onion over medium heat until meat is no longer pink; drain.
</li>
<li>Stir in the taco seasoning, diced tomatoes, and salsa. Cook and stir for 5 minutes or until heated
through.</li>
<li>Warm taco shells as per package instructions.</li>
<li>To assemble tacos, fill each shell with the beef mixture</li>
<li>Serve immediately and enjoy!</li>
</ol>
</div>

<section class="container other-cuisines">
<h3>Quick links</h3>
<div>
<span class="btn-primary">
<i class="fa fa-chevron-left margin-right"></i><a href="./mexican-bakes.html">Back to previous</a>
</span>
<span class="btn-secondary">
<i class="fa fa-home margin-right"></i><a href="../index.html">Return to home</a>
</span>
<span class="btn-secondary" onclick="window.print();"">
<i class=" fa fa fa-print margin-right"></i>Print
</span>
</div>
</section>

</div>

</body>

</html>
79 changes: 79 additions & 0 deletions pages/chicken-enchiladas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>Mexican Chicken Enchiladas Recipe</title>
<link rel="stylesheet" href="../styles/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon"
href="https://assets-global.website-files.com/63272a4884915258a601e154/63f5d1fbd33aa94a63f0cf93_Rocket%20Favicon.png">
<script src="../js/scripts.js" defer></script>
</head>

<body class="flex-container">
<div class="flex-center">

<div class="recipe-header">
<h1>Mexican Chicken Enchiladas </h1>
</div>

<div class="flex-container" style="margin-bottom: 24px;">
<button id="darkModeToggle" class="btn-secondary">
<i class="fa fa-moon margin-right"></i>
Dark Mode
</button>
</div>

<img src="https://www.recipetineats.com/wp-content/uploads/2020/03/Chicken-Enchiladas_4.jpg" width="400px"
alt="Mexican Chicken Enchiladas">
<div class="recipe-content flex-center">
<h2>Ingredients</h2>
<ul>
<li>2 cups cooked and shredded chicken</li>
<li>1 onion, finely chopped</li>
<li>2 cloves garlic, minced</li>
<li>2 cups enchilada sauce</li>
<li>1 cup shredded cheddar cheese</li>
<li>1 cup shredded Monterey Jack cheese</li>
<li>8 (8-inch) flour tortillas</li>
<li>1/4 cup fresh cilantro, chopped</li>
<li>1/2 teaspoon ground cumin</li>
<li>1/2 teaspoon chili powder</li>
<li>Salt and pepper to taste</li>
<li>Sour cream for serving</li>
</ul>

<h2>Directions</h2>
<ul>
<li>Preheat oven to 350 degrees F (175 degrees C).</li>
<li>In a medium bowl, mix together the chicken, half of the enchilada sauce, half of the cheddar</li>
<li>Spoon the chicken mixture evenly onto each tortilla.</li>
<li>Pour the remaining enchilada sauce over the top of the filled tortillas and sprinkle with the
remaining cheddar and Monterey Jack cheeses.</li>
<li>Bake in the preheated oven for 20-25 minutes, or until the cheese is bubbly and slightly browned.
</li>
<li>Garnish with chopped cilantro and serve with sour cream.</li>
</ul>
</div>

<section class="container other-cuisines">
<h3>Quick links</h3>
<div>
<span class="btn-primary">
<i class="fa fa-chevron-left margin-right"></i><a href="./mexican-bakes.html">Back to previous</a>
</span>
<span class="btn-secondary">
<i class="fa fa-home margin-right"></i><a href="../index.html">Return to home</a>
</span>
<span class="btn-secondary" onclick="window.print();"">
<i class=" fa fa fa-print margin-right"></i>Print
</span>
</div>
</section>

</div>

</body>

</html>
Loading