-
Notifications
You must be signed in to change notification settings - Fork 7
/
script.js
120 lines (102 loc) · 3.55 KB
/
script.js
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
110
111
112
113
114
115
116
117
118
119
120
// Define an array to store recipes
let recipes = [];
// Load recipes from the JSON file on page load
window.onload = function () {
fetchRecipes();
const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", searchRecipes);
// Add event listeners to form submit button
// 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 justify-content-center custom-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")
.then(response => response.json())
.then(data => {
recipes = data;
displayRecipes();
});
}
function displayRecipes() {
const recipeList = document.getElementById("recipe-list");
recipeList.innerHTML = "";
recipes.forEach(recipe => {
const card = document.createElement("div");
card.className = "col-lg-4 col-md-6 col-sm-12 mb-4"; // Adjust column size based on screen width
card.innerHTML = displayCard(recipe);
recipeList.appendChild(card);
});
}
// Function to add a new recipe
function submitRecipe(event) {
event.preventDefault();
const title = document.getElementById("title").value;
const description = document.getElementById("description").value;
const codeLink = document.getElementById("code-link").value;
if (title && description && codeLink) {
const newRecipe = {
title,
description,
code_link: codeLink
};
recipes.push(newRecipe);
displayRecipes();
saveRecipes();
document.getElementById("recipe-form").reset();
}
}
// Function to save recipes to the JSON file
function saveRecipes() {
fetch("recipes.json", {
method: "POST",
body: JSON.stringify(recipes),
});
}
// Function to search recipes
function searchRecipes() {
const searchInput = document.getElementById("search-input");
const searchTerm = searchInput.value.toLowerCase();
const filteredRecipes = recipes.filter(recipe => {
return recipe.title.toLowerCase().includes(searchTerm) || recipe.description.toLowerCase().includes(searchTerm);
});
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");
recipeList.innerHTML = "";
filteredRecipes.forEach(recipe => {
const card = document.createElement("div");
card.className = "col-md-4 mb-4";
card.innerHTML = displayCard(recipe);
recipeList.appendChild(card);
});
}