Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results summary component by aronsn

@aronsn

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My first frontend mentor challenge completed:

  • This solution does dynamically fetch data from the json file. How would do your rate the javascript logic, could it have been done in a simplier way?

  • Added some more :hover states, just for the fun of it and because I like interactivity.

  • Tried to get as close as possible to the design, but I do see that the spacing is a bit off in summary container on desktop, in the area around the button. Didnt find a simple solution without changing the whole layout of both the components. Thought I'd submit and get some feedback for future challenges instead.

Community feedback

@Ragudos

Posted

You did well copying the design! I also did not know that GitHub pages can fetch files. I guess we should not use location.origin for fetching in GitHub pages.

I like that you added hover states, but you might want to take note is that, most of the time, only elements that a user can interact with should have those hover effects.

I like that you used functions to render items as well! I recommend using the forEach method instead because .map creates a new array and is generally used for getting a set of values from an array, while .forEach means that we want to call a function per item in an array.

Marked as helpful

1

@aronsn

Posted

@Ragudos Thank you for awesome feedback!

0

@Eyepop01

Posted

You did well bro... Am a beginner and this exceeded my expectation... 👌❤

1

@aronsn

Posted

@Eyepop01 Thank you! I am not a complete beginner, but I am practicing my fundamentals.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord