Rainydays-JS

Rainydays cross-course project

Description

This project is part of a course assignment to practice HTML, CSS, and JavaScript skills. The project involves developing a responsive website based on a design brief, integrating dynamic content from an API, and enhancing user interaction through usability testing.

Requrements for pages

• Home
• List of jackets
• A jacket specific page, showing product details such as description, price and an add to cart button
• A checkout page
• A checkout completed page
• About
• Contact

Built With

• HTML
• CSS
• Javascript
• WordPress

Project Overview

Initial Development

The website was initially developed using semantic HTML and DRY CSS principles to ensure a clean and maintainable codebase. The design is fully responsive, providing an optimal viewing experience across various devices without horizontal scrollbars. Accessibility considerations were integrated from the start, ensuring the site adheres to WCAG guidelines.

API Integration

To enhance the functionality of the website, API integration was implemented. The product list and product detail pages were modified to fetch data dynamically from an external API, replacing hardcoded data. This integration includes:

• Dynamic fetching and displaying of products from the API.
• Loading indicators to improve user experience.
• Robust error handling to manage data fetching issues.

Usability Testing

User testing was conducted to identify and implement improvements in the website's interaction and usability. The process included:

• Planning and conducting usability tests.
• Collecting and analyzing user feedback.
• Implementing enhancements based on the feedback.
• Conducting accessibility testing to ensure ease of use for all users.

Link

Netlify: https://grand-stardust-f81e12.netlify.app

Contact

Feel free to reach out to me for any inquiries or collaboration opportunities:

• Email: vbpedersen@outlook.com
• LinkedIn: LinkedIn

Getting Started

Installing

To get started with this project, follow these steps:

1. Clone the repository by running the following command in your terminal:

   git clone https://github.com/Veronicabrun/Rainydays-JS.git
   

2. Once the repository is cloned, navigate to the project directory:

   cd Rainydays-JS
   

3. Install the dependencies:

   npm install
   

Running

To run the app, use the following command:

  npm run start