Frontend Mentor - Product list with cart solution

Hi! This is my solution to the Product list with cart challenge on Frontend Mentor. I hope you'll enjoy it and let me know any improvements that I could adopt in the future.

Table of contents

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

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 ✅ Note: the supported screen sizes are: 375px, 768px, 1024px, and 1250px
• See hover and focus states for all interactive elements on the page ✅

Screenshot

This screenshots were taken with Responsively App quick screenshot functionality.

Mobile solution

Tablet solution

Desktop 1024px screen size

Desktop 1250px screen size

Links

• Live Site URL: challenge solution

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• DOM API
• Fetch API
• Rollup

What I learned

Rollup

As its documentation says:

Rollup is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex.

When we use it, we end up with one large JavaScript file (most of the time named bundle.js), which contains all the pieces of code that were allocated in different files and let us use the ES Modules without any worry about supporting old browsers.

1. Instalation.

npm install rollup --save-dev

2. Configuration. In the root folder of our project, we create a file named rollup.config.mjs which contains the basic configuration like the input's file name (main.js) and the output file (bundle.js).

   export default {
     input: "src/main.js",
     output: {
       file: "bundle.js",
       format: "cjs",
     },
   };

3. Integrate bundle in the HTML file

<script src="bundle.js"></script>

Event delegation

By default, when an event occurs on an element, it first runs in the corresponding element, then on its parent, and finally on its ancestors. This is known as bubbling.

We can leverage this phenomenon to manage multiple events without attaching a listener to every single one of them.

Event delegation is an event handling pattern that allows you to handle events only using one event listener in a parent element.

Example code:

<div>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

We add just one listener to the div element

const div = document.querySelector("div");

div.addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    console.log(event.target.innerText);
  }
});

With this code, every single button clicked is going to print its innerText to the console.

Fetch API

A modern approach for getting external resources from a URL. In this project, I used it to extract the data from the file data.json (This is similar on how you'll fetch and obtain data in real projects. ). The return object from the fetch function is a Promise, so it is recommended to use async and await keywords.

Basic usage in the project:

export const getData = async () => {
  const res = await fetch("/data.json");
  const data = await res.json(); //get the bodys's data from the response.
  dataDesserts = data;
};

Intl API

A built-in object that provides internationalization (also knows as i18n) and location formats support for web applications. The core object is Intl.

I used the NumberFormat to represent currency. Here's an example:

export const currency = new Intl.NumberFormat(undefined, {
  style: "currency",
  currency: "MXN",
});

Note: if you specified undefined in the first arguments, the number format will base on the machine location.

Continued development

For the next iterations of this project, I'll integrate Unit tests using Vitest or Jest. If anyone knows a great resource to learn this, please keep me posted.

Also, I want to refactor the source code to suit the SOLID principles.

Useful resources

• Event delegation explained - This article taught me the basics of how to use event delegation pattern.

• JavaScript Fetch API For Beginners - It helps me to learn the different kinds of HTTP method implementations using the fetch API.

• Intl format explained video - A video tutorial that shows you the principal features of Intl formatting API.

• Article going in deep about Intl format.

Author

• Frontend Mentor - @gonzagapa
• LinkInd - Gonzalo Perez