-
-
-
-
-
-
-
-
-
-
+ return mealData.map((mealDetails) => `
+
+
+
+
+
+
+
+ Add to Cart
+
+
+
${mealDetails.name}
+
$10.20
+
+
+
`
- )
- .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);
+}
+
+function createPagination(curpage, renderedMeals, category) {
+ let n = renderedMeals.length, totalPages = Math.ceil(n / 6);
+ let navcontent = `
`;
+ return navcontent;
}
async function RenderPage() {
-categories.forEach(async (category) => {
- const mealData = await getMealDataByCategory(category);
- const renderedMeals = renderMeals(mealData);
-
- menuContainer.innerHTML += `
- ${category}
-
-
- `;
- });
+ 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);
+ }
+ });
}
-// Call the functions in the desired order
-RenderPage();
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';
+ }
+ });
+}
+
diff --git a/Html-files/cart.html b/Html-files/cart.html
index 111b8c47..b1bb2523 100644
--- a/Html-files/cart.html
+++ b/Html-files/cart.html
@@ -12,44 +12,68 @@
+
+
-
+
+
-
+
+
- 
- 
- 
- 
- 
-