Frontend Mentor – Results summary component solution

This is a solution to the Results summary component challenge on Frontend Mentor.

Overview

I am using Vue to structure this project and using Vite to build it. The preview page is deployed on GitHub Pages. You can visit it here.

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

Screenshot

Links

My process

  • whole design:
    • flex is used to lay out the page.
    • This page has “left-card” and “right-card”.
    • Two part mentioned above is wrapped by a “wrapper” div.
  • right design:
    • Four “dataBar”s are generated by v-for command, and their style is controlled by v-bind command.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • vue.js – JS library

What I learned

  1. I learned how to use v-for and v-bind to generate elements and control their style.

 <div class="card-right">
    <h2>Summary</h2>
    <div v-for=" (data, index ) in dataList" :key="data.category" class="dataBar" :style="colors[index]">
        <!-- img with path of data.icon -->
        <div class="icon" >
            <img :src=data.icon alt="icon">
        </div>
        <h3 :style="TextColors[index]">{{data.category}}</h3>
        <div class="score-end">
            <span class="strong">{{data.score}}</span>
            <span class="weak">/ 100</span>
        </div>
    </div>
    <button>Continue</button>
</div>

Author

problems

  • I have a problem with the “SVG” icons in the build stage.
    • Solve: I put the icons in the public folder and use the hard-code (http//…/*.svg) path in src to load them.

HELP ME:

  • I think this is not a good way to solve this problem.
  • If you have any good idea, please tell me in the issue part of my project.

Thank you very much!

GitHub

View Github