Delicious Samosa, Kachori, Pani Puri and more, right to your doorstep within 5 km.
- -At ChaatBazar, we bring you the authentic flavors of India's vibrant street food culture, freshly prepared and delivered hot right to your door. Our passion is to share the love of chaat, snacks, and beverages made from time-tested recipes.
- -
- Founder & Head Chef - Crafting every dish with love and authenticity.
-10+ years of culinary expertise specializing in authentic Indian street food and handcrafted signature recipes.
-
- Customer Support - Always here to assist you with your orders.
-Ensures smooth customer experience, quick assistance, and seamless order support from start to finish.
---The Samosas were crispy and flavorful, delivered piping hot! Amazing service and quality.
- - Meera K. -
--Love the variety and authentic taste. The Pani Puri is the best I've had outside India!
- - Arjun P. -
--Quick delivery and very friendly staff. The Kachoris are my go-to snack now. Highly recommended!
- - Sneha M. -
Delicious Samosa, Kachori, Pani Puri and more, right to your doorstep within 5 km.
+ +At ChaatBazar, we bring you the authentic flavors of India's vibrant street food culture, freshly prepared and delivered hot right to your door. Our passion is to share the love of chaat, snacks, and beverages made from time-tested recipes.
+
+ Founder & Head Chef - Crafting every dish with love and authenticity.
+
+ Customer Support - Always here to assist you with your orders.
+++The Samosas were crispy and flavorful, delivered piping hot! Amazing service and quality.
+ - Meera K. +
++Love the variety and authentic taste. The Pani Puri is the best I've had outside India!
+ - Arjun P. +
++Quick delivery and very friendly staff. The Kachoris are my go-to snack now. Highly recommended!
+ - Sneha M. +
${highlightedDesc}
- - ${outOfStockBadge} -- No items found matching your filters. -
`; - return; - } - - filtered.forEach(item => { - menuContainer.appendChild(createCard(item, query)); - }); - }, 800); -} - -function renderCart() { - if (!cartItemsContainer) return; - - if (cart.length > 0) { - showSkeletonCartItems(cart.length); - } - - setTimeout(() => { - cartItemsContainer.innerHTML = ""; - - if (cart.length === 0) { - cartItemsContainer.innerHTML = - `- Your cart is empty. -
`; - if (checkoutBtn) checkoutBtn.disabled = true; - if (cartTotal) cartTotal.textContent = "Total: ₹0"; - return; - } - - cart.forEach(({ item, quantity }) => { - const cartItem = document.createElement("div"); - cartItem.className = "cart-item"; - cartItem.tabIndex = 0; - cartItem.setAttribute( - "aria-label", - `${item.name}, quantity ${quantity}, - price ${formatPrice(item.price * quantity)}` - ); - - cartItem.innerHTML = ` -${formatPrice(item.price)} each
-- ${formatPrice(item.price * quantity)} -
- -You haven't placed any orders yet. Explore our delicious street food menu!
- Explore Menu -${item.description}
+ + ++ No items found for "${filter}". +
`; + return; + } + + filteredItems.forEach(item => { + menuContainer.appendChild(createCard(item)); + }); + }, 1200); // remove/reduce when using a real API +} + +function renderCart() { + // 1. Show skeletons briefly when cart first opens + if (cart.length > 0) { + showSkeletonCartItems(cart.length); + } + + setTimeout(() => { + cartItemsContainer.innerHTML = ""; + + if (cart.length === 0) { + cartItemsContainer.innerHTML = + `+ Your cart is empty. +
`; + checkoutBtn.disabled = true; + cartTotal.textContent = "Total: ₹0"; + return; + } + + cart.forEach(({ item, quantity }) => { + const cartItem = document.createElement("div"); + cartItem.className = "cart-item"; + cartItem.tabIndex = 0; + cartItem.setAttribute( + "aria-label", + `${item.name}, quantity ${quantity}, + price ${formatPrice(item.price * quantity)}` + ); + + cartItem.innerHTML = ` +${formatPrice(item.price)} each
++ ${formatPrice(item.price * quantity)} +
+ ++ No items found +
+ `; + + } + } + + searchInput.addEventListener("keyup", searchMenu); + searchBtn.addEventListener("click", searchMenu); + + searchInput.addEventListener("keydown", (e) => { + if (e.key === "Enter") { + searchMenu(); + } + }); + +} + +function setupContactForm() { + const form = document.getElementById("contact-form"); + const formSuccess = document.getElementById("form-success"); + + const nameInput = form.querySelector("#name"); + const emailInput = form.querySelector("#email"); + const messageInput = form.querySelector("#message"); + + const errorName = form.querySelector("#error-name"); + const errorEmail = form.querySelector("#error-email"); + const errorMessage = form.querySelector("#error-message"); + + form.addEventListener("submit", (e) => { + e.preventDefault(); + + // Clear previous errors and hide any success banner + errorName.textContent = ""; + errorEmail.textContent = ""; + errorMessage.textContent = ""; + formSuccess.style.display = "none"; + + const nameVal = nameInput.value.trim(); + const emailVal = emailInput.value.trim(); + const messageVal = messageInput.value.trim(); + + let valid = true; + + // Validate Name — empty check first, then length + if (nameVal === "") { + errorName.textContent = "Name is required."; + valid = false; + } else if (nameVal.length < 2) { + errorName.textContent = "Name must be at least 2 characters."; + valid = false; + } + + // Validate Email — empty check first, then format + if (emailVal === "") { + errorEmail.textContent = "Email is required."; + valid = false; + } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailVal)) { + errorEmail.textContent = "Please enter a valid email address."; + valid = false; + } + + // Validate Message — empty check first, then length + if (messageVal === "") { + errorMessage.textContent = "Message is required."; + valid = false; + } else if (messageVal.length < 10) { + errorMessage.textContent = "Message must be at least 10 characters."; + valid = false; + } + + if (!valid) return; + + // Show inline success banner and reset form after 3 s + formSuccess.style.display = "block"; + setTimeout(() => { + form.reset(); + formSuccess.style.display = "none"; + }, 3000); + }); +} + +function setupNewsletterForm() { + const newsletterForm = document.getElementById("newsletter-form"); + const emailInput = newsletterForm.querySelector("#newsletter-email"); + + newsletterForm.addEventListener("submit", (e) => { + e.preventDefault(); + + const emailVal = emailInput.value.trim(); + if (!emailVal || !/\S+@\S+\.\S+/.test(emailVal)) { + alert("Please enter a valid email address."); + return; + } + + alert("Thank you for subscribing!"); + + newsletterForm.reset(); + }); +} + +// ===== Initialization ===== +function showToast(message) { + + const toast = + document.createElement("div"); + + toast.className = "toast-message"; + + toast.textContent = message; + + document.body.appendChild(toast); + + setTimeout(() => { + toast.classList.add("show"); + }, 100); + + setTimeout(() => { + toast.remove(); + }, 3000); + } + +function init() { + renderSpecials(); + renderMenu("All"); + updateCartCount(); + renderCart(); + + setupFilterButtons(); + setupCartToggle(); + setupOrderNowScroll(); + setupSearch(); + setupContactForm(); + setupNewsletterForm(); +} + +document.addEventListener("DOMContentLoaded", init); + +// ===== Skeleton UI Helpers ===== + +/** + * Creates one skeleton card element that matches .card dimensions. + */ +function createSkeletonCard() { + const el = document.createElement("div"); + el.className = "skeleton-card"; + el.setAttribute("aria-hidden", "true"); + + el.innerHTML = ` + + + + + + + `; + + return el; +} + +/** + * Injects `count` skeleton cards into a container. + * @param {HTMLElement} container + * @param {number} count + */ +function showSkeletonCards(container, count = 3) { + container.innerHTML = ""; + + for (let i = 0; i < count; i++) { + container.appendChild(createSkeletonCard()); + } +} + +/** + * Creates one skeleton cart-item element that matches .cart-item dimensions. + */ +function createSkeletonCartItem() { + const el = document.createElement("div"); + el.className = "skeleton-cart-item"; + el.setAttribute("aria-hidden", "true"); + + el.innerHTML = ` + +
-