blob: 90f57f3bdf9a393445f622b8d867cdd80897d176 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<title>Pantry of Plants</title>
<link rel="stylesheet" href="../style/style.css">
<script src="../scripts/image-slide.js" defer></script>
</head>
<body>
<header>
<nav>
<a href="index.html"><img src="../images/pantry-of-plants-logo.png" class="logo"></a>
<div class="nav-text-outer">
<a href="recipes.html" class="nav-text">Recipes</a>
<a href="about.html" class="nav-text">About</a>
</div>
</nav>
</header>
<div class="content">
<div id="recipe-search">
<h1>Recipes</h1>
<input type="text" id="searchInput" onkeyup="search()" placeholder="Search recipes..." />
</div>
<div id="recipe">
</div>
<script>
//setup arrays for recipe data
var names = [];
var images = [];
var links = [];
//recipe names
names[0] = "<p>Vegan Banana Loaf / Muffins</p>";
names[1] = "<p>Vegan Maple Bread</p>";
//recipe image links
images[0] = '<img src="../images/recipe-images/banana-muffin.JPG">';
images[1] = '<img src="../images/recipe-images/bread-3.JPG">';
//recipe hrefs
links[0] = '<a href="banana-muffins.md.html"</a>';
links[1] = '<a href="maple-bread.md.html"</a>';
//show arrays in console
console.log(names, images, links);
var box;
//loop through recpie names, images, and links to display on page
for (var i = 0; i < names.length; i++) {
box = document.createElement('div');
box.className = 'boxes';
box.innerHTML = links[i] + names[i] + images[i];
document.getElementById('recipe').appendChild(box);
}
//function to search recipes
function search() {
// Declare variables
var input, filter, div, boxes, a, i, txtValue;
input = document.getElementById('searchInput');
filter = input.value.toUpperCase();
div = document.getElementById("recipe");
boxes = document.getElementsByClassName('boxes');
// Loop through all boxesst items, and hide those who don't match the search query
for (i = 0; i < boxes.length; i++) {
a = boxes[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
boxes[i].style.display = "";
} else {
boxes[i].style.display = "none";
}
}
}
</script>
</div>
<footer>
<a href="mailto:scott@pantryofplants.ca" class="mail">Contact: scott@pantryofplants.ca <img src="../images/mail.svg" class="mail-2"></a>
<p>© 2021 Pantry of Plants</p>
</footer>
</body>
</html>
|