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.

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

JS project recipe library (Kasia) #13

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
# js-project-recipe-library

https://js-recipe-libr.netlify.app/
Binary file added favicon.ico
Binary file not shown.
Binary file added images/carbonara.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/placeholder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 75 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Recipe Library</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="./style.css" />
</head>

<body>
<h1>Recipe Library</h1>
<main>
<button class="random-button" id="random" type="button">
Give me a random recipe!
</button>

<section class="filters">
<div class="filter">
<h2>Filter on kitchen</h2>
<div class="filter-buttons">
<button class="filter-button active" id="all" type="button">All</button>
<button class="filter-button" id="lunch" type="button">Lunch</button>
<button class="filter-button" id="soup" type="button">Soup</button>
<button class="filter-button" id="dessert" type="button">Dessert</button>
<button class="filter-button" id="drink" type="button">Drink</button>
<button class="filter-button" id="snack" type="button">Snack</button>
<button class="filter-button" id="salad" type="button">Salad</button>
<button class="filter-button" id="breakfast" type="button">Breakfast</button>
<button class="filter-button" id="side dish" type="button">Side Dish</button>

</div>
</div>
<div class="sort">
<h2>Sort on price per serving</h2>
<div class="sort-buttons">
<button class="sort-button active" id="highToLow">Descending</button>
<button class="sort-button" id="lowToHigh">Ascending</button>
</div>
</div>
</section>

<section class="errorMessage" id="errorMessage"></section>

Comment on lines +43 to +45

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, why is this here? I am not suggesting it is wrong, just that I did it another way...I think and so find it useful to understand how we can find the same solution but in a different way. Thank you!

<section class="recipeSection" id="recipeSection">
<!-- Recipe placeholder template - W1&2 of the project
<div class="recipe">
<img src="./images/placeholder.png"/>
<h2>Recipe title</h2>
<hr></hr>
<section class="details">
<div class="Cuisine">
<div class="detailsElement"><div class="Recipe-title">Cuisine:</div><div class="Recipe-region">tbd</div></div>
<div class="detailsElement"><div class="Recipe-title">Time:</div><div class="Recipe-time">tbd</div></div>
</div>
</section>
<hr/>
<div class="Recipe-title">Ingredients</div>
<div class="Ingredients">
<ul>
<li>Ingredient 1</li>
<li>Ingredient 2</li>
<li>Ingredient 3</li>
<li>...</li>
</ul>
</div>
</div>-->
</section>
</main>
<!-- JavaScript file -->
<script src="./script.js"></script>
</body>

</html>
Loading