Mokaya-project frontend بستخدام HTML,css,javascript

Frontend Project

Coffee Shop Website

Frontend Project

A responsive and interactive coffee shop e-commerce website that allows users to

browse, filter, and purchase products. The project simulates a real-life online coffee store

and includes the following key features:

Product Categorization: Products are grouped into sections like Coffee, Ice Coffee,

Croissant, and Sweet Dessert.

Dynamic Filtering System: Users can filter products by type, price, color, size, and

category using custom JavaScript logic.

Product Grid Layout: All products are displayed in a responsive grid, with 3 items per

row for a clean and consistent look.

Product Details Page: Clicking on a product opens a detailed view with product image,

description, price, quantity selector, and an "Add to Cart" button.

Shopping Cart Page: A separate page that lists selected items, calculates the total price,

and allows users to remove or update items.

Hover Effects & Animations: Smooth image hover effects and subtle UI animations to

enhance user experience.

Fully Responsive: Works seamlessly on desktops, tablets, and mobile devices.

Modern UI Design: Elegant and clean interface using warm coffee-themed colors and

rounded card components.

This project demonstrates strong skills in building modular, user-friendly e-commerce

frontends, DOM manipulation, and state handling using JavaScript.