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

result-summary-component React, Tailwind, Vite

@EmilBacklund

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


This is for me the first "project" built using Vite, React, and Tailwind in combination.

The performance score is actually dynamic from the summary score, made it with some help from chatGPT.

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Great solution. Pretty cool you have make use of ChatGPT as well. I also use it a lot, when doing the notification page challenge, i gave it the whole text content to convert it to a nicely structured data JSON and it did pretty well haha

Keep up the great work!

1

@EmilBacklund

Posted

@visualdenniss Thanks! :) Looked at your solution on this challenge and made som changes on my code. I had a problem with the height on mobile, but works fine now after I used min-height: 100vh; and display: grid; as you did :D

And yeah ChatGPT is awesome, use it for everything now, almost more then Google!

2
P
visualdennis 8,375

@visualdenniss

Posted

@EmilBacklund Oh, happy to hear my solution was helpful! :)

yea same here :)

0
P
visualdennis 8,375

@visualdenniss

Posted

@EmilBacklund, just noticed your button has a smooth transition, but i thought transitions don't work with linear-gradients, but looks like you've found a nice workaround with ::before and changing opacity: 0 to 1, as well as making it z-index: -10 to not to cover the text. Nice trick!

1

@EmilBacklund

Posted

@visualdenniss Haha, yes, it took me a while to find a solution that worked the way I wanted :D

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