Frontend Mentor - Results summary component solution

This is my solution to the Results summary component challenge on Frontend Mentor. It is my second Frontend Mentor challenge! Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Challenge Level: 1 -> Newbie 🟢

🕒 Estimated time: 3h
🕓 Time taken: 3h50min

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the interface depending on their device's screen size
• See hover states for the continue button

Screenshot

Here is a screenshot of my solution:

Links

• Link to the solution: Results summary challenge
• Live Site URL: See solution on my live site

My process

Built with

• HTML
• CSS
• JavaScript
• React - JS library

What I learned

This challenge was very helpful for me to review how to display data in React from a JSON file. I did not use JSON files so often so it was nice to refresh my memory. However, the project took longer than expacted because I had problems displaying the icons whose path was stored in the JSON file. I tried to read the icon path from the JSON file in a map using {data.icon} as shown below but it did not work.

{
  data.map((data, i) => (
    <div>
      <img src={data.icon} alt={data.category} />
      <ScoreComponent key={i} category={data.category} score={data.score} maxScore="100" />
    </div>
  ))
}

I could not figure out how to do this in a nice way, so I just created my own Icon component which ultimately allowed the icons to appear as intended.

UPDATE: @visualdennis on Frontend Mentor helped me with the JSON icon problem. I had to move all the icon-svg´s into the public folder, which I tried once before. Of course you have to change the icon path in the JSON file after that, which I did before too, but I did not know that ../ already refered to the public folder, so I tried to have a path like "../public/assets/images/icon-verbal.svg" instead of the right path "../assets/images/icon-verbal.svg". Such a small mistake can cost you a lot of time sadly.

Also somehow my solution on Frontend Mentor is not centered in the design comparison, even though it is centered on my live website. I guess this is an issue on Frontend Mentor`s platform, as I could not find a solution that is centered in the design comparison.

Author

• Frontend Mentor - @Orchi1904
• LinkedIn - Alexej Kunz