Arabic E-commerce Store (Vanilla JS)
An Arabic (RTL) e-commerce front-end built with HTML, CSS, and vanilla JavaScript. It features category filtering, a cart sidebar with live totals, a product details modal, and a Typed.js animated hero subtitle.
HTML
CSS
Responsive Design
RTL
UI Clone
Font Awesome
Google Fonts
Project Overview
Features
Native Arabic RTL layout.
Category filtering (Men's, Women's, Electronics, Jewelry, All).
Dynamic product grid with loading effect.
Live cart sidebar with count/total updates.
Product modal with ratings and "Add to cart".
Typed.js rotating promo messages.
Tech Stack
HTML+CSS|VanillaJS|RTL|Typed.js
Implementation
UI Structure: Header + filters + product grid + cart + modal.
Core JS: products[] array, displayProducts(), addToCart(), updateCartUI() with reduce(), showProductDetails().
How It Works
Load: All products in grid.
Filter: Instant category switching.
Details: Full modal display.
Cart: Live count/total updates.
Checkout: Success + reset.
Native Arabic RTL layout.
Category filtering (Men's, Women's, Electronics, Jewelry, All).
Dynamic product grid with loading effect.
Live cart sidebar with count/total updates.
Product modal with ratings and "Add to cart".
Typed.js rotating promo messages.
Tech Stack
HTML+CSS|VanillaJS|RTL|Typed.js
Implementation
UI Structure: Header + filters + product grid + cart + modal.
Core JS: products[] array, displayProducts(), addToCart(), updateCartUI() with reduce(), showProductDetails().
How It Works
Load: All products in grid.
Filter: Instant category switching.
Details: Full modal display.
Cart: Live count/total updates.
Checkout: Success + reset.
ContactMe
Have a question or want to work together? Send me a message using the form below.