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
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

it took me around 10 whole hours did this, i really need sleep.

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 (no, i used user's input to create the score)

Links

• Solution URL: here is the solution
• Live Site URL: Live site here

My process

This time, oi tried to do it cleaner like my first challenge like layout firs, add border and border-box and all that kind of stuff, in this project, i really make sure that everything, the layout and javascript on desktop and mobile, worked first, then i add some colors.

1. I layout the cotainer

2. i made all the functions

3. I add some colors

This is shorter than before partially because the rest is much like the same as previous challenge that i did, and partially because i did believe no one would look at my README anyway, but if you do, thanks a lot i appreciate it. and partly because as i'm writing this, i'm too tired, it's 11 p.m.

Built with

• div is better
• Flexbox, as usual to make everything cetered
• desktop-first workflow
• no library nor framefork, i don't know how to used them yet

What I learned

This is really stupid, when i target the value number of the input using document.getElementById("reactionvalue").value; i tried to used it to make the score, but i spent 2-3 hours, figuring out why the scores output is NaN, hell and it turns out that the value that i got was not an integer, but a stupid string, i just remembered this is javascript, you can't trust anything, you have to manually set it to ineteger or string, ALWAYS!

Continued development

I wanted to focus on simplifying my code and make it cleaner, more efficient, and easy to read.But right now i'm too tired too think about cleaning my code.

Useful resources

• MDN web docs - I think everyone should know how to use this website, it is like wikipedia made only for coding
• getcssscan - i used this website to copypaste the shadow style

Author

• Frontend Mentor - @ALtera21
• github Profile - ALTera21