This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
What I Built
When thinking about comfort food, nothing hits the spot quite like traditional Mexican street tacos. The sizzle of the meat, fresh cilantro, chopped onions, and that spicy salsa that hurts just right—it is pure warmth and nostalgia.
For this challenge, I built a lightweight, interactive landing page and ordering web app for Taquería El Güero Taquero ("Hogar de la Comida Mexicana"). Built entirely with vanilla web technologies, it features an interactive menu, real-time category filtering (Carne, Pollo, Vegano), a floating shopping cart with dynamic total calculation, a photo gallery, and a full contact/order form.
Demo
🌮 View Live Demo (CodeSandbox)
Journey
My goal for this project was to craft a rich, interactive user experience using pure Vanilla Web Technologies (HTML5, CSS3, and JavaScript ES6+) without relying on heavy frameworks or external dependencies.
Key Technical Highlights & Learnings:
- Dynamic Cart Logic: Implemented state management using pure JavaScript to handle adding items, modifying quantities, updating real-time prices, and handling slide-over modal visibility.
-
Smooth Reflow Animations: For the category filters, I used JavaScript to trigger a DOM forced reflow (
void card.offsetWidth;) to restart CSS animations seamlessly when switching tabs. -
Performant Animations with
IntersectionObserver: Used native browser observers to trigger fade-in animations on scroll for menu items and section elements. -
Responsive & Accessible Design: Styled using CSS Variables (
:root), Flexbox, and CSS Grid with dedicated mobile navigation (.hamburger) and accessible markup (aria-modal,role="dialog").
Building this was a fun homage to Mexican street food culture and a great exercise in pushing Vanilla JS capabilities to their full potential!
Code licensed under the MIT License.
Top comments (0)