🚀 Built a Simple E-commerce App Using HTML, CSS & JavaScript – No Frameworks, Just Pure Web Tech!

Over the past few days, I challenged myself to build a fully functional mini e-commerce app using just vanilla JavaScript, HTML, and CSS. Here's a breakdown of the project, how it works, and some insights I gained along the way 👇

🛒 App Overview

The app displays a list of products (Whey, Creatine, and Oats), lets users add items to a shopping cart, calculate the total cost, and even simulate a checkout process. It may be simple, but the core functionality mirrors real-world e-commerce platforms.

🔍 Key Features

✅ Dynamic Product Rendering
Products are stored in a JavaScript array and rendered dynamically into the DOM using createElement and innerHTML.

✅ Cart Functionality
When users click “Add to cart,” items are added to an in-memory cart[] array, and the cart view updates in real time.

✅ Price Calculation
Total cost is calculated every time an item is added or removed, and displayed in the UI.

✅ Checkout Button
Clicking "Checkout" clears the cart and shows a success alert (mimicking a purchase flow).

💻 Code Architecture

HTML defines the basic structure:

A #product-list container for dynamic product cards.
A #cart-items section for the shopping cart.
A hidden #cart-total that appears when items are added.

CSS brings everything to life with:

A responsive grid for product cards.
Soft shadows, transitions, and modern styling.
Clean UI for both products and cart items.

JavaScript handles:

DOM manipulation (document.createElement, innerHTML)
Event delegation for handling button clicks
Cart array logic and state management

✨ What I Learned

🔹 Even basic apps teach a lot about DOM manipulation, state, and UX
🔹 Managing dynamic UI updates manually (without React) helped me understand re-rendering deeply
🔹 Styling from scratch reinforces good CSS architecture and responsiveness

💬 Final Thoughts

Building this project with just core web technologies made me more confident in what I learned. Understanding the fundamentals makes you a better developer – no matter what tools you use.

If you're learning web dev, I highly recommend trying this type of project. Want to see the code? Let’s connect! 📬

E-commerce App