JavaScript Ca - Erica

I have chosen the Rainy Days API
The project is also deployed on Netlify here:
Erica - JS CA

Contents:

• About
• Requirements
• Technologies
• Features
• Process
• Reflection

About:

This is my JavaScript Ca Submission. I have chosen the Rainy Days Api
and created something like a shopping page, although with no real UX/UI consideration
or CSS planning i mind. The focus has been on using an API and coding primarily in js as the assignment required.

Requirements:

User Stories:

• 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.

Required Pages:

1. Home Page - containing product list.
2. Product Page - showing all details of one specific product.
3. Checkout Page - showing all items in your cart/basket.
4. Confirmation page - showing a thank you message. (Mine has a cute picture and confirmation, but no thank you message.)

Technologies used:

• HTML
• CSS
• JavaScript
• ChatGPT
• Netlify

Features:

• The site features the pages as listed in the requirements above,
  as well as a toggleable shopping-bag menu.
• There is a single media query at 800px just so everything stays neat and tidy.
• All links are clickable.
• There is no hard-coded product data.
• Noroff API is where the product info is from.
• The site is deployed on Netlify mostly for convenience if anyone wants to click through it.

Process:

Throughout the development process, I embarked on a journey filled with iterations and refinements.
It commenced with a fetch request in my index.html file to dynamically retrieve data, followed by the implementation of
local storage for single product pages, shopping carts, and the checkout process. During moments of challenge and when troubleshooting minor errors, I leaned on the assistance of ChatGPT, which provided invaluable guidance. Additionally, my classmate Thomas offered insightful input that contributed to the project's success.
The project's evolution was characterized by back-and-forth iterations rather than a linear progression. However it began with the display of all products on the index, followed by the integration of a filter dropdown menu. Subsequently, I developed single product pages to showcase detailed information, integrated a shopping bag dropdown for user interaction, and finalized the checkout process. Lastly, I created a checkout success page to conclude the user journey.
This iterative approach fostered a deeper understanding and allowed for the successful development of the web application. (Ps: this was very much written with ChatGpts assistance.)

Reflection:

(Not by ChatGpt!)
I have struggled to really get the js course this semester. Possibly due to everything seeming very out of context for a long time. Knowing what a variable is and how to write a function is fine, but
ultimately not super easy to translate into specific tasks, at least for me. I honestly feel like through trial and error during this CA I've learned a whole bunch. The assistance from ChatGPT has mostly been me trying to write something, and
then double ckecking with the AI to see if there are ways to improve it, also if something wasn't working for seemingly no apparent reason, it's been helpful. Thomas has helped a bunch as well, and that's been very helpful because he hasn't just given the answers straight up but discussed and talked it through. All in all a fun learning experience.
:)