Frontend Mentor - Results summary component solution

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

Links

• Solution URL: URL here
• Live Site URL: Live site URL here

My process

Built with

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

What I learned

Use a forEach loop in JavaScript to get data from a JSON file

display: grid;
grid-template-columns: 20% 50% 10% 20%;

data.forEach(function (item, index) {
  const taskDiv = document.createElement("div");
  taskDiv.className = `task task${index + 1}`;
  taskDiv.innerHTML = `
      <img class="icon type${index + 1}" src="${item.icon}" />
      <div class="content type${index + 1}">${item.category}</div>
      <div class="number-1">${item.score}</div>
      <div class="number-2">/ 100</div>
    `;
  detailDiv.appendChild(taskDiv);
});

Continued development

Continue to develop features and use material ui to increase the experience.

Useful resources

• forEach method - This method helps me to get element values in data.json

Author

• Website - Boo
• Frontend Mentor - @Boo
• Linkedin - Boo

Acknowledgments

Thank myself.