1 files changed, 97 insertions, 0 deletions
diff --git a/recipes.html b/recipes.html
new file mode 100644
index 0000000..573d390
--- /dev/null
+++ b/recipes.html
@@ -0,0 +1,97 @@
+<!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>Banana Loaf / Muffins</p>";
+	names[1] = "<p>Maple Bread</p>";
+	names[2] = "<p>Maple Bread</p>";
+	names[3] = "<p>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">';
+	images[2] = '<img src="images/recipe-images/bread-3.JPG">';
+	images[3] = '<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>';
+	links[2] = '<a href="maple-bread.md.html"</a>';
+	links[3] = '<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>