Using your new skills writing JavaScript, create an interactive online store to display product from an API endpoint. Use one of the three provided API URLs to display products in HTML and allow users to create a basket of items. You may use your existing cross course project code as a starting point or start a fresh project if this is not available. We recommend using an existing project as styling will not be graded, but is nice to have in the final submission
- As a user, I want to view a list of products on the homepage.
- As a user, I want to filter products by category, gender or genre.
- As a user, I want to view a single product page with more detail.
- As a user, I want to add a product to my basket.
- As a user, I want to remove a product from my basket.
- As a user, I want to view a summary of my cart on the checkout page.
- As a user, I want to view an order-confirmation screen after checking out.
The following pages are required to complete this assignment.
- Home Page containing product list
/index.html - Product Page showing all details of a specific product
/product/index.html - Checkout Page showing all items in the basket
/checkout/index.html - Confirmation Page showing a thank you message
/checkout/confirmation/index.html
The following pages are not required to complete this assignment but help to improve the realism for those with extra time.
- Category Pages (e.g. Male/Female Clothing, Movie Genres)
- Terms and Conditions page (this may be AI generated)
- Privacy Policy (this may be AI generated)
- My Profile
- Decide if you will use your existing project, or a fresh project.
- Open your project in GitHub Desktop and VS Code.
- Select one of the three provided endpoints from the list below.
- Checkout the API documentation for your chosen endpoint.
- Work through the requirements in JavaScript one by one.
- Test your work thoroughly and ask for peer review.
- Offer to review two other student's work.
- Make any final changes and submit for delivery.
You have been provided with three options to choose from: • Rainy Days API - Outdoor clothing • GameHub API - Video games • Square Eyes API – Movies
The documentation website for each endpoint explains which options are available on the provided objects. These properties should be used and displayed to the user in your application. You are only required to select one of the endpoints but if you wish to implement more than one that will be accepted
This list is a non-exhaustive list of important things to keep in mind before delivery:
• Errors should be handled for the user, such that they are alerted when something
goes wrong like an API call.
• A loading indicator should be shown to the user whenever they are waiting for an
asynchronous action to finish.
• There should be no hardcoded product data in your final submission.
• Although the focus on marking is on JavaScript, the site still needs to be accessible
and usable for the user. If we cannot access functionality that has been coded, it will
be marked as if the coding was not done.
• Use async instead of then syntax for asynchronous actions.
• Remove all console.log statements before delivery.
• GitHub repository with JavaScript code in the default (main/master) branch • Written reflection on the CA process