Frontend Mentor - Results summary component

This is a solution to the Results summary component 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:

• 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

• Mobile

Links

• Solution URL
• Live Site URL

My process

Built with

• Semantic HTML5 markup
• Sass
• Flexbox
• Mobile-first workflow
• TypeScript
• Vite for development and build process
• GitHub Pages for deployment

What I learned

To dynamically add the data using the provided json data, I make use of code below to dynamically generate the score list items. Also, I use the reduce() method to get the total score and find the average by dividing my number of scores using he length method. I also use object destructuring to extract only the score value from each object.

// Create a variable to accumulate all list items
let listItemsHTML = '';

data.forEach(({ category, score, icon }) => {
  // Construct the HTML structure using template literals
  listItemsHTML += `
    <li class="card__summary-result ${category.toLowerCase()}">
      <div class="card__summary-result-title">
        <img class="card__summary-result-icon" src="${icon}" aria-hidden="true" alt="icon">
        <h3 class="card__summary-result-name">${category}</h3>
      </div>
      <p class="card__summary-result-value"><span>${score}</span> / 100</p>
    </li>
  `;
});

// Append all list items to the container at once
resultsContainer.innerHTML = listItemsHTML;

const totalScore = data.reduce((sum, { score }) => sum + score, 0);
const averageScore = Math.round(totalScore / data.length);

resultScore.innerText = `${averageScore}`;

Continued development

I plan to explore advanced SASS features to enhance the maintainability and scalability of my stylesheets. I also intend to further integrate TypeScript in future frontend projects to reinforce type safety and streamline debugging.

Useful resources

• CSS-Tricks: Flexbox Guide - This guide was instrumental in implementing the flexible layout of the component.
• MDN Web Docs: CSS Display Property - Helped me with controlling element visibility.
• Frontend Mentor Community - Engaging with other developers in the community provided insights and useful tips for handling responsive layouts.

Author

👤 Engr. Animashaun Fisayo

• GitHub
• Twitter
• LinkedIn
• Website
• Blog

Acknowledgments

This project was completed as part of the Frontend Mentor challenge. The platform provided an excellent opportunity to practice and refine my front-end skills through realistic project challenges.