@@ -89,159 +90,183 @@ function renderMeals(mealData) {
`
- )//.join(""); // Join the array into a single string
+ ); //.join(""); // Join the array into a single string
}
async function clickHandler(curpage, category) {
- const mealData = await getMealDataByCategory(category);
- const renderedMeals = renderMeals(mealData);
- const mealsToBeDisplayed = renderedMeals.slice((curpage - 1) * 6, curpage * 6);
- paneToBeRendered = document.getElementById(`v-pills-${category}`);
- paneToBeRendered.innerHTML = `
` + mealsToBeDisplayed.join("") + `
` + createPagination(curpage, renderedMeals, category);
+ const mealData = await getMealDataByCategory(category);
+ const renderedMeals = renderMeals(mealData);
+ const mealsToBeDisplayed = renderedMeals.slice(
+ (curpage - 1) * 6,
+ curpage * 6
+ );
+ paneToBeRendered = document.getElementById(`v-pills-${category}`);
+ paneToBeRendered.innerHTML =
+ `
` +
+ mealsToBeDisplayed.join("") +
+ `
` +
+ createPagination(curpage, renderedMeals, category);
}
function createPagination(curpage, renderedMeals, category) {
- let n = renderedMeals.length, totalPages = Math.ceil(n / 6);
- let navcontent = `
`;
+ return navcontent;
}
async function RenderPage() {
- for (category of categories) {
- const mealData = await getMealDataByCategory(category);
- const renderedMeals = renderMeals(mealData);
- const mealsToBeDisplayed = renderedMeals.slice(0, 6);
- const paneToBeRendered = document.getElementById(`v-pills-${category}`);
- paneToBeRendered.innerHTML = `
` + mealsToBeDisplayed.join("") + `
` + createPagination(1, renderedMeals, category);
- createPagination(1, renderedMeals, paneToBeRendered);
- }
+ for (category of categories) {
+ const mealData = await getMealDataByCategory(category);
+ const renderedMeals = renderMeals(mealData);
+ const mealsToBeDisplayed = renderedMeals.slice(0, 6);
+ const paneToBeRendered = document.getElementById(`v-pills-${category}`);
+ paneToBeRendered.innerHTML =
+ `
` +
+ mealsToBeDisplayed.join("") +
+ `
` +
+ createPagination(1, renderedMeals, category);
+ createPagination(1, renderedMeals, paneToBeRendered);
+ }
}
RenderPage();
-
-
// Function to get cart items from local storage
function getCartItems() {
- const cartItems = localStorage.getItem("cartItems");
- return cartItems ? JSON.parse(cartItems) : [];
+ const cartItems = localStorage.getItem("cartItems");
+ return cartItems ? JSON.parse(cartItems) : [];
}
// Function to set cart items to local storage
function setCartItems(cartItems) {
- localStorage.setItem("cartItems", JSON.stringify(cartItems));
+ localStorage.setItem("cartItems", JSON.stringify(cartItems));
}
// Function to handle add to cart button click
function cartBtn() {
- menuContainer.addEventListener("click", (event) => {
- const clickedElement = event.target;
- if (clickedElement.classList.contains("add-to-cart-button")) {
- const productName = clickedElement.dataset.productName;
- const productImgSource = clickedElement.dataset.productImgsource;
- const productPrice = clickedElement.dataset.productPrice;
-
- // Get the current cart items
- const cartItems = getCartItems();
-
- // Check if the item is already in the cart
- const existingCartItem = cartItems.find(
- (item) => item.name === productName
- );
-
- if (existingCartItem) {
- // If the item is already in the cart, increase the quantity
- existingCartItem.quantity += 1;
- } else {
- // If the item is not in the cart, add it with quantity 1
- cartItems.push({
- name: productName,
- imgSrc: productImgSource,
- quantity: 1,
- price: productPrice,
- });
- }
- // console.log(cartItems);
-
- // Save the updated cart items to local storage
- setCartItems(cartItems);
- }
- });
+ menuContainer.addEventListener("click", (event) => {
+ const clickedElement = event.target;
+ if (clickedElement.classList.contains("add-to-cart-button")) {
+ const productName = clickedElement.dataset.productName;
+ const productImgSource = clickedElement.dataset.productImgsource;
+ const productPrice = clickedElement.dataset.productPrice;
+
+ // Get the current cart items
+ const cartItems = getCartItems();
+
+ // Check if the item is already in the cart
+ const existingCartItem = cartItems.find(
+ (item) => item.name === productName
+ );
+
+ if (existingCartItem) {
+ // If the item is already in the cart, increase the quantity
+ existingCartItem.quantity += 1;
+ } else {
+ // If the item is not in the cart, add it with quantity 1
+ cartItems.push({
+ name: productName,
+ imgSrc: productImgSource,
+ quantity: 1,
+ price: productPrice,
+ });
+ }
+ // console.log(cartItems);
+
+ // Save the updated cart items to local storage
+ setCartItems(cartItems);
+ }
+ });
}
cartBtn();
function filterMenu() {
- const priceFilter = document.getElementById('filter-price').value;
-
- const menuItems = document.querySelectorAll('.menu-items .item');
-
- menuItems.forEach(item => {
- const itemName = item.querySelector('h3').innerText;
- const itemPrice = parseFloat(item.querySelector('p').innerText.replace('$', ''));
- let priceMatch = false;
-
- switch (priceFilter) {
- case 'all':
- priceMatch = true;
- break;
- case '0-5':
- priceMatch = itemPrice >= 0 && itemPrice <= 5;
- break;
- case '5-10':
- priceMatch = itemPrice > 5 && itemPrice <= 10;
- break;
- case '10-15':
- priceMatch = itemPrice > 10 && itemPrice <= 15;
- break;
- case '15-20':
- priceMatch = itemPrice > 15 && itemPrice <= 20;
- break;
- }
-
- if (priceMatch) {
- item.style.display = '';
- } else {
- item.style.display = 'none';
- }
- });
-}
+ const priceFilter = document.getElementById("filter-price").value;
+
+ const menuItems = document.querySelectorAll(".menu-items .item");
+ menuItems.forEach((item) => {
+ const itemName = item.querySelector("h3").innerText;
+ const itemPrice = parseFloat(
+ item.querySelector("p").innerText.replace("$", "")
+ );
+ let priceMatch = false;
+
+ switch (priceFilter) {
+ case "all":
+ priceMatch = true;
+ break;
+ case "0-5":
+ priceMatch = itemPrice >= 0 && itemPrice <= 5;
+ break;
+ case "5-10":
+ priceMatch = itemPrice > 5 && itemPrice <= 10;
+ break;
+ case "10-15":
+ priceMatch = itemPrice > 10 && itemPrice <= 15;
+ break;
+ case "15-20":
+ priceMatch = itemPrice > 15 && itemPrice <= 20;
+ break;
+ }
+
+ if (priceMatch) {
+ item.style.display = "";
+ } else {
+ item.style.display = "none";
+ }
+ });
+}
diff --git a/index.html b/index.html
index 33f4495f..e268376e 100644
--- a/index.html
+++ b/index.html
@@ -425,6 +425,44 @@
Laren Green
+ 
+ 
+