Skip to content
Submitted about 1 year ago

Results summary component by aronsn

Aron Snekkestad•110
@aronsn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

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

  • Aaron Ragudos•480
    @RagudosPosted about 1 year ago

    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
    Aron Snekkestad•110
    @aronsnPosted about 1 year ago

    @Ragudos Thank you for awesome feedback!

    0
  • Eze Samuel•20
    @Eyepop01Posted about 1 year ago

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

    1
    Aron Snekkestad•110
    @aronsnPosted about 1 year ago

    @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

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