-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (159 loc) · 5.26 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Recipe Book</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Recipe Book</h1>
<input type="text" id="search-box" placeholder="Search...">
<ul id="recipe-list">
<li>
<a href="recipes/apple-cider-vinegar-concentrate.html">
<div class="recipe-card">
<h2>Apple Cider Vinegar Concentrate</h2>
<p>A concentrated apple cider vinegar drink mixed with honey, spices, and salt.</p>
</div>
</a>
</li>
<li>
<a href="recipes/apple-cider-vinegar-expectorant.html">
<div class="recipe-card">
<h2>Apple Cider Vinegar Expectorant</h2>
<p>A natural expectorant made with apple cider vinegar, lemon juice, honey, and spices.</p>
</div>
</a>
</li>
<li>
<a href="recipes/blackberry-rhubarb-crumble.html">
<div class="recipe-card">
<h2>Blackberry Rhubarb Crumble</h2>
<p>A delicious summer dessert made with fresh blackberries and rhubarb, topped with a sweet and
crunchy crumble.</p>
</div>
</a>
</li>
<li>
<a href="recipes/bone-broth.html">
<div class="recipe-card">
<h2>Bone Broth</h2>
<p>Learn how to make delicious and nutritious bone broth using chicken carcasses, peppercorns, and
water. Optional additions include garlic and apple cider vinegar.</p>
</div>
</a>
</li>
<li>
<a href="recipes/easy-fish-sandwich.html">
<div class="recipe-card">
<h2>Easy Fish Sandwich</h2>
<p>Learn how to make a delicious and easy fish sandwich with this recipe. Frozen breaded fish
filets, buns, and a homemade spicy sauce make this sandwich a quick and easy meal.</p>
</div>
</a>
</li>
<li>
<a href="recipes/golden-tea.html">
<div class="recipe-card">
<h2>Golden Tea</h2>
<p>Cloves, nutmeg, turmeric, and other warming spices combine with honey for a comforting and healthy tea.</p>
</div>
</a>
</li>
<li>
<a href="recipes/jezebel-sauce.html">
<div class="recipe-card">
<h2>Jezebel Sauce</h2>
<p>Sweet and spicy sauce used as an appetizer over cream cheese and a compliment to pork.</p>
</div>
</a>
</li>
<li>
<a href="recipes/kettlecorn.html">
<div class="recipe-card">
<h2>Kettlecorn</h2>
<p>A delicious and easy-to-make snack, Kettlecorn is perfect for movie nights or afternoon munchies.</p>
</div>
</a>
</li>
<li>
<a href="recipes/lemon-curd.html">
<div class="recipe-card">
<h2>Lemon Curd</h2>
<p>Delicious and tangy lemon curd recipe that can be used as a filling for cakes, cupcakes, pies, and more.</p>
</div>
</a>
</li>
<li>
<a href="recipes/mango-lassi.html">
<div class="recipe-card">
<h2>Mango Lassi</h2>
<p>Put mango, yogurt, milk, sugar, and cardamom (if using) into a blender and blend for 2 minutes. If you want a more milkshake consistency and it's a hot day, either blend in some ice as well or serve over ice cubes. Sprinkle with a tiny pinch of ground cardamom to serve.</p>
</div>
</a>
</li>
<li>
<a href="recipes/natural-sunscreen.html">
<div class="recipe-card">
<h2>Natural Sunscreen</h2>
<p>This all-natural sunscreen is easy to make and will keep you protected from the sun's harmful rays.</p>
</div>
</a>
</li>
<li>
<a href="recipes/zucchini-lasagne.html">
<div class="recipe-card">
<h2>Zucchini Lasagne</h2>
<p>Layers of grilled zucchini, ground beef and spaghetti sauce, cottage cheese mixture, mozzarella, and herbs make up this delicious and healthier take on lasagne.</p>
</div>
</a>
</li>
<li>
<a href="recipes/nettle-tea.html">
<div class="recipe-card">
<h2>Nettle Tea</h2>
<p>Pick nettle plants, dry them, and steep them in water to create a refreshing and herbal nettle tea.</p>
</div>
</a>
</li>
<li>
<a href="recipes/chaga-double-extraction.html">
<div class="recipe-card">
<h2>Chaga Double Extraction</h2>
<p>Learn how to make Chaga double extraction tincture using Chaga chunks or powder, vodka or rum, and simple steps. Enjoy the concentrated Chaga goodness!</p>
</div>
</a>
</li>
<li>
<a href="recipes/l-reuteri-yogurt.html">
<div class="recipe-card">
<h2>L. Reuteri Yogurt</h2>
<p>Create your own L. Reuteri yogurt with this easy recipe. Use tablets or already-made yogurt to culture your dairy product for a healthy treat.</p>
</div>
</a>
</li>
</ul>
<script>
// Get the search box and recipe list elements
const searchBox = document.getElementById('search-box');
const recipeList = document.getElementById('recipe-list');
// Add event listener to search box
searchBox.addEventListener('input', function () {
// Get the search term and convert to lowercase
const searchTerm = searchBox.value.toLowerCase();
// Loop through each recipe card
for (let i = 0; i < recipeList.children.length; i++) {
const recipeCard = recipeList.children[i];
// Get the recipe title and convert to lowercase
const recipeTitle = recipeCard.querySelector('h2').textContent.toLowerCase();
// If the search term is not found in the recipe title, hide the recipe card
if (!recipeTitle.includes(searchTerm)) {
recipeCard.style.display = 'none';
} else {
recipeCard.style.display = 'block';
}
}
});
</script>
</body>
</html>