-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (139 loc) · 7.61 KB
/
index.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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>Recipe Selector</title>
<link rel="stylesheet" href="./styles/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Iceberg&family=Montserrat:wght@100&family=Rubik&display=swap"
rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<h1>Recipe Randomizer</h1>
<p>Choose two ingredients from the drop down lists and get a random recipe!</p>
</div>
</header>
<main>
<section class="recipeInput">
<div class="wrapper">
<!-- an H2 with choose ingredients and 2 drop down menus for selections -->
<!-- We have added classes to the H2, and Span because we are adding animations to the H2. Source https://tobiasahlin.com/moving-letters/#9 -->
<h2 class="ml9">
<span class="text-wrapper">
<span class="letters">Choose Your Ingredients</span>
</span>
</h2>
<form action="submitForm">
<div class="formContainer">
<div class="inputContainer container1">
<label for="ingredientSelector1">Choose Your First Ingredient</label>
<select name="ingredientSelector1" id="ingredientSelector1">
<option value="" selected disabled>Choose an option</option>
<option value="chicken breast">Chicken Breast</option>
<option value="steak">Steak</option>
<option value="tofu">Tofu</option>
<option value="bacon">Bacon</option>
<option value="salmon">Salmon</option>
<option value="lemons">Lemons</option>
<option value="lentils">Lentils</option>
<option value="eggs">Eggs</option>
<option value="shrimp">Shrimp</option>
<option value="turkey">Turkey</option>
</select>
</div>
<div class="inputContainer container2">
<label for="ingredientSelector2">Choose Your Second Ingredient</label>
<select name="ingredientSelector2" id="ingredientSelector2">
<option value="" selected disabled>Choose an option</option>
<option value="onions">Onion</option>
<option value="potatoes">Potatoes</option>
<option value="tomatoes">Tomatoes</option>
<option value="corn">Corn</option>
<option value="carrots">Carrots</option>
<option value="rice">Rice</option>
<option value="cauliflower">Cauliflower</option>
<option value="peppers">Peppers</option>
<option value="apples">Apples</option>
<option value="zucchini">Zucchini</option>
</select>
</div>
</div>
<h3>Optional Filters</h3>
<div class="optionalSelections">
<div class="optionalSelectionBox">
<label for="proteinContent">Protein content (g)</label>
<select name="proteinContent" id="proteinContent">
<option value="0">Don't Care</option>
<option value="10">A little</option>
<option value="20">A bit more</option>
<option value="30">A lot</option>
</select>
</div>
<div class="optionalSelectionBox">
<label for="fatContent">Fat content (g)</label>
<select name="fatContent" id="fatContent">
<option value="0">Don't Care</option>
<option value="5">A little</option>
<option value="15">A bit more</option>
<option value="25">A lot</option>
</select>
</div>
<div class="optionalSelectionBox">
<label for="carbsContent">Carbs content (g)</label>
<select name="carbsContent" id="carbsContent">
<option value="0">Don't Care</option>
<option value="10">A little</option>
<option value="20">A bit more</option>
<option value="30">A lot</option>
</select>
</div>
<div class="optionalSelectionBox">
<label for="">Calorie Content (kcal)</label>
<select name="caloriesContent" id="caloriesContent">
<option value="100000">Don't Care</option>
<option value="500">A little</option>
<option value="1000">A bit more</option>
<option value="1500">A lot</option>
</select>
</div>
</div>
<div class="buttonContainer">
<button class="buttonSubmit">Submit</button>
</div>
</form>
<div class="loadingContainer">
<img src="./assets/Bean Eater3-1s-100px.gif" alt="A Gif of Pac-Man eating">
</div>
</div>
</section>
<section class="recipeOutput">
<div class="wrapper">
<!-- A text container for the recipe returned from the API -->
<h2 class="recipeTitle"></h2>
<div class="recipeHolder">
<div class="textContainer">
<p>Choose some ingredients! A recipe based on the ingredients you select be placed here.</p>
</div>
<!-- An img container for the img of the recipe returned from the API -->
<div class="imgContainer">
<p hidden>Recipe Nutrition Facts: <span class="proteinAmount"></span> g of protein, <span class="fatAmount"></span> g of fat, <span class="carbsAmount"></span> g of carbs, <span class="caloriesAmount"></span> kcal of calories</p>
<img src="./assets/unsplashHeader2.jpg" alt="A picture of a recipe">
</div>
</div>
</div>
</section>
</main>
<footer>
<p>
<a href="https://junocollege.com/">Created at Juno College</a>
</p>
</footer>
<script src="script.js"></script>
</body>
</html>