summaryrefslogtreecommitdiff
path: root/recipes.html
blob: 55bddbba60344cd2301da6eca1f96c355caa44fb (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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<meta name="description" content="Vegan Recipes">
	<meta name="keywords" content="vegan, recipes, baking, cooking, animal rights">
	<meta name="author" content="Scott Jones">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>Banana Loaf / Muffins</p>";
	names[1] = "<p>Maple Bread</p>";
	names[2] = "<p>Croutons</p>";
	names[3] = "<p>Chocolate Chip Muffins</p>";
	names[4] = "<p>Pizza Dough</p>";
	names[5] = "<p>Kale Salad</p>";

	//recipe image links
	images[0] = '<img src="images/recipe-images/banana-muffin.JPG">';
	images[1] = '<img src="images/recipe-images/bread-3.JPG">';
	images[2] = '<img src="images/recipe-images/croutons-2.JPG">';
	images[3] = '<img src="images/recipe-images/chocolate-chip-muffins.JPG">';
	images[4] = '<img src="images/recipe-images/pizza.JPG">';
	images[5] = '<img src="images/recipe-images/kale-salad.JPG">';

	//recipe hrefs
	links[0] = '<a href="banana-muffins.md.html"</a>';
	links[1] = '<a href="maple-bread.md.html"</a>';
	links[2] = '<a href="croutons.md.html"</a>';
	links[3] = '<a href="chocolate-chip-muffins.md.html"</a>';
	links[4] = '<a href="pizza-dough.md.html"</a>';
	links[5] = '<a href="kale-salad.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>