Samir Store — Frontend Project

A simple, modular e-commerce frontend built with HTML, CSS, and vanilla JavaScript (ES Modules). It lists products from a public API, supports filtering and search, and includes a cart UI with localStorage persistence. It also ships with basic login/register/contact forms and validation.

Features

• Product listing: Fetches products from fakestoreapi.com and renders responsive cards.
• Product details: Deep link to a product page using URL query params (no backend required).
• Cart with localStorage: Add/remove items, increment/decrement quantity, total price, persistent across reloads.
• Filtering & search: Filter by rating count, rating score, price > average, and live text search.
• Responsive filters UI: Sidebar on desktop, slide-in panel on small screens.
• Forms & validation: Register/Login/Contact forms with live validation feedback.
• Animations & icons: Animate.css (with optional WOW.js) and Font Awesome icons.

Tech Stack

• Languages: HTML5, CSS3, JavaScript (ES6 modules)
• Libraries (CDN):
  • Bootstrap 5.3.x (layout & components)
  • Font Awesome 7.x (icons)
  • Animate.css 4.x (CSS animations)
  • WOW.js (optional JS trigger for Animate.css; initialized only if present)
  • SweetAlert2 (user-friendly alerts; used in forms)
• APIs:
  • FakeStore API for products: https://fakestoreapi.com/products
  • REST Countries (register form country list): https://restcountries.com/v3.1/all?fields=name,cca2

Project Structure

final project - remove card and filters/
├─ index.html                 # Landing page with hero + calls to action
├─ home.html                  # Products list + filters + cart panel
├─ product.html               # Single product page
├─ contactus.html             # Contact form page
├─ login.html                 # Login page
├─ register.html              # Register page
├─ css/
│  ├─ index.css               # Landing/marketing styles
│  ├─ cart.css                # Cart-related styles
│  ├─ contactus.css           # Contact page styles
│  └─ style.css               # Shared/product page styles
├─ images/                    # Static images
├─ js/
│  ├─ api.js                  # Base API URL (FakeStore)
│  ├─ createDom.module.js     # Small DOM helper to create elements
│  ├─ filtering.module.js     # All filtering logic
│  ├─ products.module.js      # Load & render product list (cards)
│  ├─ cart.module.js          # Cart state, rendering, persistence
│  ├─ script.js               # Page glue: load, filter, totals, responsive filters
│  ├─ product.js              # Product details page logic
│  ├─ validation.module.js    # Reusable validation helpers
│  ├─ login.js                # Login form logic + validation
│  ├─ register.js             # Register form logic + validation + countries fetch
│  └─ contact.js              # Contact form logic + validation

How to Run

• Option A (recommended): Use VS Code Live Server (or any static server) and open index.html.
• Option B: Open index.html directly in a modern browser.

Notes:

• APIs are remote (CORS-enabled). A static server is recommended for a smoother experience.
• Ensure internet connectivity for CDNs (Bootstrap, Font Awesome, Animate.css, SweetAlert2) and APIs.

Usage Guide

• Landing: index.html includes marketing hero and navigation to home.html.
• Products: Visit home.html to load products and interact with filters/search.
• Product details: Click “See More” on a product card to open product.html with all details passed via URL params.
• Cart: Click the cart button (top-right) to open the offcanvas cart. Update quantities or remove items. Data persists in localStorage.
• Forms: login.html, register.html, contactus.html include validation and SweetAlert2 feedback.

File-by-File Documentation

• js/api.js

  • Exposes API_URL pointing to https://fakestoreapi.com/products.
  • Customize this to switch product data source.

• js/createDom.module.js

  • Tiny DOM factory: createdom(tag, parent, text, classes, id, href, src, alt, cssText).
  • Returns the created element. Helps build UIs declaratively.

• js/products.module.js

  • loadObjects(): Synchronously fetches API_URL via XMLHttpRequest and caches the array in objects.
    • Returns [] on failure.
    • Note: synchronous XHR blocks the main thread. It’s kept to match the original behavior; consider migrating to fetch() async.
  • takelist(list): Renders responsive product cards into #products. Each card includes image, title, price, category, a “See More” link, and an Add/Remove Cart button that reacts to current cart state.

• js/cart.module.js

  • productCart: Array state loaded from localStorage.getItem("products").
  • locaStorageSetter(list): Persists the cart.
  • addToCart(product): Adds with defaults for quantity and total, persists, re-renders, and dispatches cart-updated event.
  • removeProduct(id): Removes item by id.
  • clearCart(): Empties the cart, persists, re-renders, and dispatches cart-updated.
  • renderCart(list): Builds the cart UI in #cart. Supports +/- quantity and per-item total. Shows an empty state when applicable.

• js/filtering.module.js

  • filtering(objects, count, rate, price, input, avg, takelist) filters products:
    • Reviews > 300 (if #count is checked)
    • Rating > 3 (if #rate is checked)
    • Price > average (if #price is checked)
    • Live text match in title/description/category/price
  • Calls takelist() with the filtered array.

• js/script.js

  • Page orchestrator used by home.html:
    • Loads products and initially renders a loader then the grid via takelist().
    • Computes average price for the price filter display.
    • Binds filter and search events to update the list.
    • Manages cart offcanvas: renders, total price, clear button visibility, and #productNum counter.
    • Handles responsive filters panel for small screens.
    • Subscribes to cart-updated to keep the UI in sync.
    • Initializes WOW.js if present: new WOW({ animateClass: 'animate__animated', offset: 0 }).init();.

• js/product.js

  • Reads all product details from URL params and populates the product page (#img, #title, #description, #price, #cate, #rating).
  • Controls a single Add/Remove Cart button (#productcart) based on cart membership. Reacts to cart-updated.

• js/validation.module.js

  • checkinputEmpty(id): Emptiness + error message/toggling classes.
  • checkRegex(id, pattern, errorMsg): Regex validation with success/error UI feedback.

• js/login.js

  • Validates email and password non-empty, email regex. On success shows SweetAlert then redirects to home.html.

• js/register.js

  • Loads country list from REST Countries API and populates a datalist.
  • Validates all fields (emptiness + regex), checks terms & password confirmation.
  • On success shows SweetAlert then redirects to login.html.

• js/contact.js

  • Validates Name/Email/Subject/Message with basic patterns, shows SweetAlert on success, and resets the form.

• Root HTML pages

  • home.html: product grid, filters, offcanvas cart, totals, and clear button.
  • product.html: single product details and add/remove cart button.
  • login.html, register.html, contactus.html: respective forms and SweetAlert feedback; include cart offcanvas so the cart icon/num stays consistent.

• css/*.css

  • index.css: hero/landing section and general marketing styles used by index.html.
  • style.css: shared styles for product grid, filters, etc.
  • cart.css: cart layout, item rows, totals.
  • contactus.css: dedicated styling for the contact page.

API Documentation

• FakeStore API

  • Base URL: https://fakestoreapi.com/products
  • Used in js/api.js → consumed in js/products.module.js via loadObjects().
  • Expected shape per product (simplified):

    {
      "id": 1,
      "title": "...",
      "price": 10.99,
      "description": "...",
      "category": "...",
      "image": "https://...",
      "rating": { "rate": 3.9, "count": 120 }
    }

• REST Countries

  • URL: https://restcountries.com/v3.1/all?fields=name,cca2
  • Used in js/register.js to populate the countries datalist. Falls back to a static subset if the API fails.

Customization Guide

• Change product API source: Edit js/api.js → API_URL.
• Initial loading UX: Update the loader markup in js/script.js (products.innerHTML block) and its CSS.
• Product card UI: Edit markup generation inside js/products.module.js → takelist(); adjust classes and structure as needed.
• Cart storage key: localStorage key is "products" in js/cart.module.js. Rename if you need multiple carts.
• Cart behavior: Tweak quantity logic and totals in js/cart.module.js (renderCart() and addToCart()).
• Filters thresholds: Update checks in js/filtering.module.js (e.g., rating count > 300, rate > 3).
• Search fields: Modify the fields used in text filtering in js/filtering.module.js.
• Responsive filters: CSS and toggle behavior live in css/style.css and js/script.js (filterMeda() and bindToggle()).
• Form regex rules: Update patterns & messages in js/validation.module.js, js/login.js, js/register.js, js/contact.js.
• CDN versions: You can pin or upgrade Bootstrap/FA/Animate/SweetAlert2 in each HTML file’s <head> or before </body>.

Known Notes / Tips

• loadObjects() uses a synchronous XHR to keep the original behavior. For production, prefer fetch() with proper loading states.
• Some pages use SweetAlert2 (Swal). Ensure its CDN script is included on those pages.
• WOW.js is initialized only if present. If you want scroll-triggered animations, include WOW.js CDN before js/script.js.

License

This project is for educational/demo purposes (workshop). Use and adapt freely.

Licensing & Attributions

• End-user licensing: see LICENSE.md (Commercial EULA). You are granted a non-transferable license to create one End Product per license.
• Third-party licenses and attributions: see CREDITS.md (Bootstrap, Font Awesome, Animate.css, WOW.js, SweetAlert2, FakeStore API, REST Countries).

Support

• Scope: installation help, usage questions for built-in features, and bug fixes reproducible in a clean copy.
• Exclusions: custom features, backend integrations, server configuration.
• Response time: within 2 business days. See SUPPORT.md for details.

Browser Support

• Tested on latest stable versions of Chrome, Edge, and Firefox.
• Progressive enhancement: animations and certain APIs are optional; the core experience (listing, cart, forms) works without WOW.js.
• Fallbacks: if external APIs are unavailable, consider adding data/products.json and switching API_URL to local data.

Packaging (Envato-style)

Suggested distribution structure:

item/
├─ main/
│  ├─ index.html
│  ├─ home.html
│  ├─ product.html
│  ├─ contactus.html
│  ├─ login.html
│  ├─ register.html
│  ├─ css/
│  ├─ js/
│  ├─ vendor/           # local copies of Bootstrap/FA/Animate/WOW/SweetAlert2 (optional)
│  ├─ images/
│  └─ data/             # products.json fallback (optional)
├─ documentation/
│  └─ index.html
├─ CHANGELOG.md
├─ LICENSE.md
├─ CREDITS.md
└─ SUPPORT.md