-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathShoppingList.html
60 lines (55 loc) · 2.45 KB
/
ShoppingList.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<script language="javascript" type="text/javascript"
src="Scripts/p5.js"></script>
<script language="javascript" type="text/javascript"
src="Scripts/ShoppingList.js"></script>
<style>
input[type='checkbox'] {
margin-left: 20px;
}
.title-container {
position: relative;
}
.close-button {
position: absolute;
top: 0;
right: 0;
background-color: red;
}
/* Show the X button when hovering over the title-container */
.recipe-container:hover .close-button {
visibility: visible;
/*make the cursor show a pointer*/
cursor: pointer;
}
</style>
<title>Shopping List</title>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GSJV2RPDMC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-GSJV2RPDMC');
</script>
<body>
<h1>Introduction to the Shopping List Page</h1>
<p>Welcome to our convenient and efficient Shopping List page! Here, we've designed a smart system that generates a comprehensive shopping list based on the portion size you need for your meals. Whether you're cooking for yourself, your family, or a group of friends, our shopping list will ensure you have all the right ingredients in the perfect quantities.</p>
<h2>How it Works</h2>
<ol>
<li>
<strong>Recipe Integration:</strong> To add a recipe, simply visit the recipe page you desire and click the "Add to Shopping List" button. This will automatically add all the required ingredients to your shopping list for that specific recipe.
<br><br>
Any <strong>Optional</strong> ingredients can be selected using the checkbox
</li>
<br>
<li>
Click on the + or - buttons to change the portion size for the meal you are having. This will automatically update the shopping list to reflect the new portion size.
</li>
</ol>
<br>
<strong> Coming Soon: Add a recipe from this page and add your own ingredients</strong>
</body>
</html>