Scribd
Upload
31 views3 pages

Assignment Document: Frontend E-Commerce Website

The assignment requires building a basic e-commerce website using HTML, CSS, and JavaScript, focusing on core concepts like form handling and API interaction. Key tasks include creating registration and login pages, a homepage displaying products fetched from a public API, and implementing filtering, searching, and shopping cart functionalities. Bonus features are encouraged, and the final project code must be submitted to a GitHub repository with a README.md file.

Uploaded by

backuplowanshi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views3 pages

Assignment Document: Frontend E-Commerce Website

The assignment requires building a basic e-commerce website using HTML, CSS, and JavaScript, focusing on core concepts like form handling and API interaction. Key tasks include creating registration and login pages, a homepage displaying products fetched from a public API, and implementing filtering, searching, and shopping cart functionalities. Bonus features are encouraged, and the final project code must be submitted to a GitHub repository with a README.md file.

Uploaded by

backuplowanshi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Assignment Document: Frontend E-Commerce Website

Title: Build a Basic E-Commerce Website


Objective: The goal of this assignment is to test your understanding of core
JavaScript concepts, including form handling, API interaction, state management,
and DOM manipulation. You will create a functional e-commerce website using
HTML, CSS, and JavaScript.

Assignment Instructions
1. Register & Login Page:
 Task: Create a register and login page with the following features:
o Form Fields:

 Register form: Name, Email, Password, Confirm Password.


 Login form: Email, Password.
o Validations:

 All fields are required.


 Email should be in a valid format.
 Password should be at least 6 characters.
 Confirm Password must match the Password.
o Local Storage:

 Store the user data (Name, Email, and Password) in


localStorage during registration.
 Validate the user credentials during login using the data from
localStorage.
o Redirect the user to the homepage upon successful login.

2. Home Page:
 Task: Create a homepage to display a list of products.
o Fetch dummy product data from a public API.

o API Endpoint:

 https://fakestoreapi.com/products
 https://dummyjson.com/docs/products
o Display the following product details:

 Product Name
 Image
 Price
 Category

3. Filtering & Searching:


 Task: Implement functionality to filter and search products.
o Filter:

 Provide a dropdown or buttons to filter products based on


their category (e.g., electronics, clothing).
o Search:

 Add a search bar to allow users to search for products by


name.
 Show only the products that match the search query.

4. Shopping Cart:
 Task: Add functionality to allow users to add products to a shopping cart.
o Include an "Add to Cart" button for each product on the homepage.

o Store the cart items in localStorage to persist data across page


reloads.
o Create a Cart Page:

 Display the list of items added to the cart.


 Show the product name, image, quantity, and price.
 Calculate and display the total price of all items in the cart.

Technical Requirements
 Use HTML, CSS, and JavaScript for development.
 Use localStorage for data persistence.
Bonus Features (Optional):
 Include a loading spinner while fetching the API data.
 Implement a "Remove from Cart" functionality in the Cart Page.
 Enhance UI with a responsive design using CSS Flexbox/Grid.
 Any more cool functionality you can add to showcase your javascript skills.
Submission Guidelines:
 Submit the entire project code to the newly created GitHub repository.
 Include a README.md file in the root directory of the project.

You might also like