Frontend Mentor - Product list with cart solution

This is a solution to the Product list with cart challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• Add items to the cart and remove them
• Increase/decrease the number of items in the cart
• See an order confirmation modal when they click "Confirm Order"
• Reset their selections when they click "Start New Order"
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: Github
• Live Site URL: Product List

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

While working on this project, I learned how to manage state in a vanilla JavaScript application without relying on a framework. I also gained experience in dynamically updating the DOM based on user interactions and handling asynchronous data fetching.

Here are some code snippets that I'm particularly proud of:

// Fetching data from a local JSON file
export const fetchData = async () => {
  const response = await fetch('../data.json');
  return response.json();
};

// Managing the shopping cart state
const updateSelectedProducts = (productItem) => {
  const elements = getProductElements(productItem);
  const quantity = elements.quantityValue.textContent;
  
  selectedProducts[elements.details.name] = createProductObject(
    elements.details,
    quantity
  );
};

Continued development

In future projects, I plan to explore more advanced state management techniques and possibly integrate a lightweight framework or library to handle more complex interactions. I also want to improve my skills in responsive design and accessibility.

Useful resources

• MDN Web Docs - This is an invaluable resource for understanding web standards, JavaScript, and DOM manipulation. I frequently used it to look up methods like fetch, classList, and event handling.

Author

• Frontend Mentor - @anglyh

Acknowledgments

I would like to thank the Frontend Mentor community for providing this challenge and the opportunity to improve my skills.