Frontend Mentor - Results Summary Component Solution

This is my solution to the Results Summary Component Challenge on Frontend Mentor. This project is built using HTML, SCSS, and JavaScript, and features dynamically loaded data from a JSON file.

Table of Contents

• Overview
  • The Challenge
  • Screenshot
  • Links
• Installation
  • How to Run SCSS
  • How to Run the Project
• My Process
  • Built With
  • What I Learned
  • Continued Development
• Useful Resources
• Author
• Acknowledgments

---

Overview

The Challenge

Users should be able to:

• 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
• Bonus: Use the local JSON data to dynamically populate the content

Screenshot

Desktop Design

Moblie Design

Links

• Solution URL: Solution
• Live Site URL: Live Site

---

Installation

To run this project locally, follow these steps:

How to Run SCSS

1. Ensure Node.js is installed on your system. Download Node.js here.
2. Install SCSS globally by running:

   npm install -g sass

3. Compile SCSS to CSS: Navigate to the project directory and run:

   sass style.scss style.css

   This will generate the style.css file from the style.scss file.

How to Run the Project

1. Clone this repository or download the project files.
2. Open the index.html file in your browser to view the application.
3. Make sure that the data.json file and all assets are in the correct directory structure for the dynamic loading to work.

---

My Process

Built With

• Semantic HTML5
• SCSS (CSS preprocessor)
• JavaScript for dynamic content
• Mobile-first design principles
• Flexbox and CSS Grid for layout

What I Learned

This project helped me improve my understanding of dynamically loading data using JavaScript and working with SCSS for modular and scalable styles. Below are some highlights:

Dynamic Data Loading

I learned how to fetch data from a local data.json file and dynamically populate the DOM. Here's a snippet:

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    const summaryList = document.querySelector('.summary-list');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.className = `summary-item ${item.category.toLowerCase()}`;
      listItem.innerHTML = `
        <div class="item-info">
          <img src="${item.icon}" alt="${item.category} icon">
          ${item.category}
        </div>
        <p><span>${item.score}</span> / 100</p>
      `;
      summaryList.appendChild(listItem);
    });
  });

SCSS Modularity

Using SCSS variables and mixins allowed me to keep the design consistent and maintainable. Example:

$light-red: hsl(0, 100%, 67%);
$orangey-yellow: hsl(39, 100%, 56%);

.result {
  background: linear-gradient($light-red, $orangey-yellow);
  border-radius: 40px;
}

Continued Development

In future projects, I want to focus on:

• Animating elements with CSS or JavaScript
• Exploring additional preprocessor features like nested selectors and mixins
• Building accessible and keyboard-friendly interactive elements

---

Useful Resources

• MDN Web Docs - Fetch API - Helped me fetch JSON data dynamically.
• The Sass Documentation - A great resource for SCSS concepts.
• Frontend Mentor - For providing this challenge and fostering a great learning community.

---

Author

• LinkedIn - Yashi Singh
• Frontend Mentor - Yashi-Singh-9

---

Acknowledgments

Thanks to the Frontend Mentor community for their support and feedback on solutions! Also, a big shoutout to the creators of SCSS and JavaScript for making development fun and efficient.