-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (106 loc) · 4.43 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<title>Recipe Manager</title>
</head>
<body>
<div id="header">
<h1>Recipe Manager</h1>
<div id="navigation">
<button id="add-recipe" type="submit"> Add A Recipe </button>
</div>
<form id="select">
<br>
Or select a meal:
<select onchange="filterRecipesByMeal()" id="meal-selector">
<option>Show All</option>
<option>Dinner</option>
<option>Lunch</option>
<option>Breakfast</option>
<option>Side</option>
<option>Snack</option>
</select>
<!-- <button type="submit" id="meal-select"> Let's go! </button> -->
<br>
<br>
</form>
</div>
<ul id="recipe-list">
<!-- Recipe list displays here -->
</ul>
<section id="recipe-display">
<!-- Single recipe details display here -->
</section>
<div id="add-recipe-div" class="hide">
<form id="add-recipe-form">
<!-- Add a form for adding a new recipe here -->
<div>
<label for="add-name">Recipe Name:</label>
<input required type="text" id="add-name" name="add-name">
</div>
<div>
<label for="add-img">Image HTML:</label>
<input required type="text" id="add-img" name="add-img">
</div>
<div>
<label for="add-video">Video Embed:</label>
<input required type="text" id="add-video" name="add-video">
</div>
<div>
<label for="add-author">Author:</label>
<input required type="text" id="add-author" name="add-author">
</div>
<div>
<label for="add-source">Source Website:</label>
<input required type="text" id="add-source" name="add-source">
</div>
<div>
<label for="add-meal-selector">Meal type:</label>
<select required id="add-meal-selector">
<option></option>
<option>Dinner</option>
<option>Lunch</option>
<option>Breakfast</option>
<option>Side</option>
<option>Snack</option>
</select>
</div>
<div>
<label for="add-preptime">Prep time:</label>
<input required type="text" id="add-preptime" name="add-preptime">
</div>
<div>
<label for="add-cooktime">Cook time:</label>
<input required type="text" id="add-cooktime" name="add-cooktime">
</div>
<div>
<label for="add-servings">Servings:</label>
<input required type="text" id="add-servings" name="add-servings">
</div>
<div>
<label for="add-ingredients">Ingredients:</label>
<input type="text" class="add-ingredient" name="add-ingredients">
<br>
<button type="button" id="btn-add-ingredient"> Add Ingredient </button>
</div>
<div>
<label for="add-instructions">Instructions:</label>
<input type="text" class="add-instructions" name="add-instructions">
<br>
<button type="button" id="btn-add-instructions"> Add new step </button>
</div>
<div>
<label for="init-comm">Initial comment:</label>
<textarea id="init-comm"></textarea>
</div>
<div>
<button type="submit" id="submit-new-recipe"> Add this recipe! </button>
<button type="button" id="add-form-reset"> Reset </button>
</div>
<!-- <label for=""></label><input type="text" id=""> -->
</form>
</div>
<script src="script.js"></script>
</body>
</html>