-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
341 lines (320 loc) · 17.6 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Andrew and Ellen's Cookbook</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link href="css/homepagestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Holtwood+One+SC" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"> -->
</head>
<body>
<div id="searchbar" class="collapsed">
<div id="search-box">
<div id="sliding-panel-outer">
<div id="sliding-panel-inner">
<input type="text" id="myInput" onkeyup="filterRecipes()" placeholder="Search recipes...">
<!-- <button id="search-submit">Search</button> -->
</div><!--#sliding-panel-inner-->
</div><!--#sliding-panel-outer-->
<div class="search-label">
<i class="fa fa-search" style="font-size:35px"></i>
<i class="fa fa-times" style="font-size:35px"></i>
</div>
</div><!--#search-box-->
</div><!--#searchbar-->
<img class="top desktop" src="images/index_header.jpeg" alt="Recipes by Andrew and Ellen">
<img class="top mobile" src="images/index_header_small.jpeg" alt="Recipes by Andrew and Ellen">
<div class="flex-container" id="flex-div">
</div>
<!-- <div class="content">
<div class="image one"></div>
<div class="textBox">
<h1>Bacon Egg and Cheese</h1>
<form method="GET" action="recipe.html">
<input type="hidden" name="field1" value="Bacon Egg and Cheese">
<input type="submit" value="Submit">
</form>
</div>
</div> -->
<header>
<p>Andrew and Ellen</p>
</header>
<script>
recipeData = {
"Pad Thai": {
"image": "pad_thai.jpeg",
"Ingredients": ["Rice noodles","Pad thai sauce", "Chicken thigh", "1 Egg",
"Crushed peanuts", "Bean sprouts","Green onions",
"Lime","Soy sauce", "Crushed red pepper flakes or sriracha", "Garlic (optional)",
"Shredded carrots (optional)"],
"Directions": ["Cut chicken thigh into bite sized pieces",
"Cook chicken over a little bit of oil in a large fry pan and turn heat to high",
"While chicken is cooking, prepare rice noodles according to package instructions",
"Once chicken is close to done, turn heat to medium, add vegetables and cook for 3-4 minutes",
"In another pan, lightly scramble egg",
"Add noodles, pad thai sauce, soy sauce, crushed red pepper, and egg to fry pan and cook on medium to low heat for a couple minutes until everything is cooked through and evenly coated with sauce",
"Top with peanuts and garnish with lime wedge",
"Tip: Feel free to add more veggies to dish— such as red pepper, broccoli, or mushroom"]
},
"Pasta Alfredo": {
"image": "pasta_alfredo.jpeg",
"Ingredients": ["Some type of pasta, wagon wheel or elbows is good",
"5 tablespoons of butter","1 cup of milk (heavier the better)",
"1 clove of minced garlic","8 oz grated parmesan or romano cheese","salt, pepper, and italian herb seasoning to taste"],
"Directions": ["Melt 4 tablespoons butter in a sauce pan over medium heat",
"To the melted butter add garlic and milk, stirring constantly",
"Once milk is warm, add the shredded cheese",
"Continue to stir constantly until the cheese is fully melted in",
"Tip: if the sauce is too thin, add flour one tablespoon at a time until the desired consistency is reached",
"Turn heat to low and add in spices",
"Put a tablespoon of butter in a frying pan and place over medium heat",
"Add cooked pasta to pan and sauté until some of the pasta shapes are golden, but not too hard",
"Add alfredo sauce into pan and stir until pasta is evenly coated",
"Remove from heat and serve",
"Optional: top with bacon, chicken, sausage or meat of choice"]
},
"Quiche": {
"image": "quiche.jpeg",
"Ingredients": ["Uncooked pie crust","4 eggs","1 cup of milk","1 cup of cheese (or to taste)",
"Vegetables and meats of choice (spinach, mushrooms, cubed ham, sausage)","Salt and pepper to taste"],
"Directions": ["Prepare uncooked pie crust in pie dish",
"In a medium mixing bowl, whisk together milk, eggs, salt, and pepper. Mix in half of the cheese",
"Tip: Feel free to play around with adding other spices that might pair well with the vegetables and meats you are using!",
"Arrange vegetables, meats, and the other portion of cheese in the pie crust, distributing everything evenly",
"Carefully pour the egg mixture over the pie crust and add-ins",
"Bake for 45 minutes, until the eggs are fully set in the crust",
"Let cool before serving"]
},
"Fried Rice": {
"image": "fried_rice.jpeg",
"Ingredients": ["Makes a little more than 2 servings",
"1 cup of white rice",
"3 chicken thighs",
"Mixed asian vegetables (Peas carrots broccoli peppers baby corn etc)",
"1 tablespoon of vegatable oil",
"2 teaspoons of minced garlic",
"2 eggs",
"2 tablespoons of sesame oil",
"3 tablespoons of soy sauce",
"1/4 teaspoon of fish oil (around 4 shakes)",
"Black pepper to taste"
],
"Directions": ["Boil 2 cups of water, salted",
"Once water is boiling, add 1 cup of rice and turn heat to low. Cover pot and cook until water is absorbed. Takes about 15 minutes",
"Chop chicken into bite sized pieces",
"Add oil to a pan, put on medium heat",
"Start cooking chopped up chicken in pan",
"Once chicken is mostly cooked, add vegetables and cover to let them steam",
"Add 1 tablespoons of sesame oil (add 1 when rice is added)",
"Add 3 tablespoons of soy sauce (add 1 when rice is added)",
"Add the fish oil",
"Add some black pepper (around 8 shakes)",
"Make a section in the pan for eggs, and then crack and scramble two eggs"
]
},
"Chicken Fajitas": {
"image": "fajitas.jpeg",
"Ingredients": ["Feeds 3ish people",
"3-4 boneless chicken thighs depending on size",
"2-3 Bell Peppers depending on size",
"12px Yellow Onions depending on size",
"1 Tablespoon of minced garlic",
"2+ Tablespoons of olive oil",
"1-2 Tablespoons of cumin",
"Salt and Pepper to taste",
"Sprinkle of red chili flakes",
"A dozen flour tortillas",
"Shredded cheese (sharp cheddar is good)",
"Salsa (Tostitos) and guac (optional)"
],
"Directions": ["First, sautee the bell peppers and onions in oil",
"Add the minced garlic",
"While that is cooking, cut the chicken into bite sized peices, and add to pan",
"Add the cumin, salt, and pepper",
"Microwave tortillas with wet paper towel on top (30s)",
"Set up salsa, guac, and cheese"]
},
"Quiche Bagels": {
"image": "quiche_bagel.jpg",
"Ingredients": ["Makes 2-4 servings (1-2 bagels per person)",
"4 plain bagels",
"2-4 eggs",
"2 tablespoons of milk of choice",
"Fillings of choice (we used garlic, onion, sausage, and pesto)",
"Shredded cheddar cheese (could sub other cheeses)",
"Salt & pepper to taste"
],
"Directions": ["Preheat oven to 375ºF",
"While the oven preheats, prep your bagels. If bagels are whole, slice a thin layer off the top. If presliced, simply use the bigger halves. Taking a sharp knife, carve a line through the dough of the bagel (think of making a circular slice about halfway between the center hole and the edge of the bagel). It should be deep without poking all the way through. Use your fingers to press the dough to the sides and middle of the bagel, immitating the shape of a bundt pan. This will act as the crust of your quiche.",
"In a small bowl, whisk your eggs, milk, and seasonings",
"Pour the egg mixture into the bagel",
"Add your toppings and cover with the shredded cheese",
"Bake for 12 minutes and then broil on high for 2 minutes"]
},
"Birria Tacos": {
"image": "birria_tacos.jpeg",
"Ingredients": ["Makes 2 servings",
"1 white onion",
"2 large tomatoes",
"Cilantro",
"2 Limes",
"1 tablespoon of salt",
"Tostitos avacado salsa",
"1 pound of chicken boneless thighs",
"Shredded cheddar cheese",
"6 flour or corn tortillas",
"2 tablespoons garlic powder",
"2 tablespoons chipotle powder",
"2 tablespoons cumin",
"Vegatable oil"
],
"Directions": ["Cut up onion and tomatoes and add to a bowl (unless you use premade pico de gallo)",
"Add the cilantro, lime, and salt to the bowl",
"Cut up chicken thighs",
"Add oil to pan and cook chicken thighs on medium",
"Add garlic poweder, chipotle powder, and cumin. Feel free to add extra",
"After chicken is done, take chicken out but keep oil in pan",
"Use oil to fry tortillas. Add cheese and chicken, and then close tortilla",
"Let the oil harden the tortilla, and then put on plate. Repeat for all tortillas",
"Add pico de gallo and avacado salsa"]
},
"Bacon Egg and Cheese": {
"image": "bec_sandwich.jpeg",
"Ingredients": ["3 eggs","2 slices of bacon","Hashbrowns","Butter","Vegatable oil", "Salt and pepper", "Sandwich roll or english muffin",
"Ketchup","Hot sauce or sriracha","2 slices of american cheese"],
"Directions": ["First, put the hashbrowns and bacon on a pan",
"If its the same pan, put the heat on medium low. If you are using seperate pans, then put the bacon on low and the hashbrowns on medium",
"Make sure to put plenty of vegatable oil in the hashbrowns",
"While that is going, butter the pan and start the scrambled eggs",
"Mix in salt and pepper into the scrambled eggs",
"Put the roll into the toaster",
"Once the eggs are forming up, turn the heat off and put two slices of cheese onto them",
"Assemble the sandwich, with the eggs first, then cheese, bacon, hashbrowns",
"Finally, top with a lot of ketchup and hot sauce"]
},
"Baked Ziti": {
"image": "baked_ziti.jpeg",
"Ingredients": ["Some type of pasta, elbows or wagon wheels are usually good", "Pasta sauce",
"Mozzarella cheese", "Salt","Spinach (optional)", "Ground beef (optional)", "Italian seasoning (optional)"],
"Directions": ["Start by boiling water, making sure to add a lot of salt",
"Cook the pasta once the water is boiling",
"Start cooking the ground beef and eventually add the sauce to the pan",
"Preheat the oven to 350",
"Mix the pasta and sauce into a baking sheet",
"Add in the spinach",
"Put the cut up mozzarella on top",
"Put the pasta in the oven and bake for 20 minutes"]
},
"Chicken and Cheese Sandwich": {
"image": "chicken_sandwich.jpeg",
"Ingredients": ["1 boneless chicken thigh","2 slices of american (or cheddar) cheese",
"An english muffin", "Salt and pepper", "Mayo", "Relish", "Butter"],
"Directions": ["First, butter the pan","Put the chicken thigh on the pan. Set the heat to medium low",
"Put salt and pepper on the chicken",
"Put english muffin in the toaster",
"Test the chicken by cutting into it",
"Once the chicken is close to done, put the cheese on top",
"Assemble the sandwich, chicken first, then cheese mayo and relish"]
},
"Pulled Pork Sandwich": {
"image": "pulled_pork_sandwich.jpeg",
"Ingredients": ["Cooked pulled pork", "2 slices of cheddar cheese", "Bread roll or hamburger bun","Mayo", "Barbecue sauce"],
"Directions": ["First, put the pulled pork on the stove, medium heat",
"While the pulled pork is cooking, put the bread roll in the toaster",
"Make sure the pulled pork is crispy. Once the pulled pork is almost done, put the slices of cheese on top",
"Assemble the sandwich and put barbacue sauce and mayo on top"]
},
"Chicken Cutlet Bacon Avacado Sandwich": {
"image": "chicken_avo.jpeg",
"Ingredients": ["1 chicken cutlet","1 avacado","2 slices of cheddar or mozzarella cheese",
"1 to 2 slices of bacon","Chipotle mayo or regular mayo and sriracha",
"1 flour tortilla"],
"Directions": ["First, cook the chicken cutlet, either on pan or in oven",
"While that is cooking, cook bacon on medium low heat",
"Cut up avacado",
"Once chicken is almost done, put cheese slices on it",
"Put tortilla on whatever pan is available, and then put chicken and cheese, avacado, and bacon on tortilla",
"Put tortilla on a plate and then add mayo and sriracha"]
}
};
colors = ["yellow", "green", "red", "blue"]
counter = 0
for (i in recipeData) {
if (counter >= colors.length) {
counter = 0;
}
my_form = document.createElement('form');
my_form.method = 'GET';
my_form.action = 'recipe.html';
my_button = document.createElement('button')
my_button.type = "submit";
my_button.className = "box "+colors[counter];
my_form.appendChild(my_button)
my_data = document.createElement('input')
my_data.type = "hidden";
my_data.name = "field1";
my_data.value = i;
my_button.appendChild(my_data)
my_data = document.createElement("img")
my_data.src = "images/"+recipeData[i]["image"]
my_data.alt = i
my_button.appendChild(my_data)
my_data = document.createElement("p")
node = document.createTextNode(i);
my_data.appendChild(node)
my_button.appendChild(my_data)
my_div = document.getElementById("flex-div")
my_div.appendChild(my_form);
// my_form.submit();
counter += 1;
}
$("#searchbar .search-label").on("click", function(e){
e.preventDefault();
$("#searchbar").toggleClass("collapsed");
});//click
function filterRecipes() {
var input = document.getElementById("myInput");
input = input.value.toLowerCase();
my_div = document.getElementById("flex-div")
while (my_div.hasChildNodes()) {
my_div.removeChild(my_div.childNodes[0]);
}
counter = 0
for (i in recipeData) {
if (counter >= colors.length) {
counter = 0;
}
if (i.toLowerCase().includes(input) == true) {
my_form = document.createElement('form');
my_form.method = 'GET';
my_form.action = 'recipe.html';
my_button = document.createElement('button')
my_button.type = "submit";
my_button.className = "box "+colors[counter];
my_form.appendChild(my_button)
my_data = document.createElement('input')
my_data.type = "hidden";
my_data.name = "field1";
my_data.value = i;
my_button.appendChild(my_data)
my_data = document.createElement("img")
my_data.src = "images/"+recipeData[i]["image"]
my_data.alt = i
my_button.appendChild(my_data)
my_data = document.createElement("p")
node = document.createTextNode(i);
my_data.appendChild(node)
my_button.appendChild(my_data)
my_div = document.getElementById("flex-div")
my_div.appendChild(my_form);
}
counter += 1;
}
}
</script>
</body>
</html>