From 654561560fd0ad952252af5ca4bccb4795f03e36 Mon Sep 17 00:00:00 2001
From: Brian Greig <brian@resurgencewebdesign.com>
Date: Sat, 14 Oct 2023 00:43:27 -0400
Subject: [PATCH] Added tags

---
 recipes.json |  9 ++++++---
 script.js    | 51 +++++++++++++++++++++++++++++++++------------------
 style.css    | 21 +++++++++++++++++++++
 3 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/recipes.json b/recipes.json
index 49b0f7d..d08511c 100644
--- a/recipes.json
+++ b/recipes.json
@@ -3,18 +3,21 @@
         "id": 1,
         "title": "Fibonacci Series",
         "description": "Generate a Fibonacci series with n terms.",
-        "code_link": "https://www.geeksforgeeks.org/program-for-nth-fibonacci-number/"
+        "code_link": "https://www.geeksforgeeks.org/program-for-nth-fibonacci-number/",
+        "tags": ["recursion", "iterable"]
     },
     {
         "id": 2,
         "title": "Factorial Calculation",
         "description": "Calculate the factorial of a given number.",
-        "code_link": "https://www.javatpoint.com/factorial-program-in-c"
+        "code_link": "https://www.javatpoint.com/factorial-program-in-c",
+        "tags": ["iterable"]
     },
     {
         "id": 3,
         "title": "Prime Numbers",
         "description": "Find prime numbers up to a given limit.",
-        "code_link": "https://www.javatpoint.com/prime-number-program-in-java"
+        "code_link": "https://www.javatpoint.com/prime-number-program-in-java",
+        "tags": ["iterable"]
     }
 ]
diff --git a/script.js b/script.js
index 777beeb..325e31f 100644
--- a/script.js
+++ b/script.js
@@ -12,6 +12,28 @@ window.onload = function () {
     document.getElementById("recipe-form").addEventListener("submit", submitRecipe);
 };
 
+// Function to get display tags
+function displayTags(tags) {
+  let htmlTags = ``;
+  for (tag of tags) {
+    htmlTags += `<span class="tag" onClick="searchTag()">${tag}</span>`
+  }
+  return `<div>${htmlTags}</div>`
+
+}
+// Function to display card 
+function displayCard({title, description, code_link, tags}) {
+  return `
+  <div class="card">
+      <div class="card-body">
+          <h5 class="card-title">${title}</h5>
+          <p class="card-text">${description}</p>
+          ${displayTags(tags)}
+          <a href="${code_link}" class="btn btn-primary" target="_blank">View Code</a>
+      </div>
+  </div>
+`
+}
 // Function to fetch recipes from the JSON file
 function fetchRecipes() {
     fetch("recipes.json")
@@ -30,15 +52,7 @@ function displayRecipes() {
     recipes.forEach(recipe => {
         const card = document.createElement("div");
         card.className = "col-md-4 mb-4";
-        card.innerHTML = `
-            <div class="card">
-                <div class="card-body">
-                    <h5 class="card-title">${recipe.title}</h5>
-                    <p class="card-text">${recipe.description}</p>
-                    <a href="${recipe.code_link}" class="btn btn-primary" target="_blank">View Code</a>
-                </div>
-            </div>
-        `;
+        card.innerHTML = displayCard(recipe);
         recipeList.appendChild(card);
     });
 }
@@ -83,6 +97,15 @@ function searchRecipes() {
     displayFilteredRecipes(filteredRecipes);
 }
 
+//Function to search tag
+function searchTag() {
+ const filteredRecipes = recipes.filter(recipe => {
+      return recipe.tags.includes(event.srcElement.innerText) 
+  });
+
+  displayFilteredRecipes(filteredRecipes);
+}
+
 // Function to display filtered recipes
 function displayFilteredRecipes(filteredRecipes) {
     const recipeList = document.getElementById("recipe-list");
@@ -91,15 +114,7 @@ function displayFilteredRecipes(filteredRecipes) {
     filteredRecipes.forEach(recipe => {
         const card = document.createElement("div");
         card.className = "col-md-4 mb-4";
-        card.innerHTML = `
-            <div class="card">
-                <div class="card-body">
-                    <h5 class="card-title">${recipe.title}</h5>
-                    <p class="card-text">${recipe.description}</p>
-                    <a href="${recipe.code_link}" class="btn btn-primary" target="_blank">View Code</a>
-                </div>
-            </div>
-        `;
+        card.innerHTML = displayCard(recipe);
         recipeList.appendChild(card);
     });
 }
diff --git a/style.css b/style.css
index 530401b..24275fa 100644
--- a/style.css
+++ b/style.css
@@ -16,3 +16,24 @@
     font-size: 24px;
     margin-right: 5px;
 }
+
+.tag {
+  cursor: pointer;
+  display: inline-block;
+    height: 24px;
+    line-height: 24px;
+    position: relative;
+    margin: 0 8px 8px 0;
+    padding: 0 10px 0 10px;
+    background: #777;    
+    -webkit-border-radius: 3px;    
+    border-radius: 3px;
+    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    color: #fff;
+    font-size: 12px;
+    font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
+    text-decoration: none;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    font-weight: bold;
+}
\ No newline at end of file