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 += `${tag}`
+ }
+ return `
${htmlTags}
`
+
+}
+// Function to display card
+function displayCard({title, description, code_link, tags}) {
+ return `
+
+
+
${title}
+
${description}
+ ${displayTags(tags)}
+
View Code
+
+
+`
+}
// 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 = `
-
-
-
${recipe.title}
-
${recipe.description}
-
View Code
-
-
- `;
+ 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 = `
-
-
-
${recipe.title}
-
${recipe.description}
-
View Code
-
-
- `;
+ 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