Skip to content
OverviewSolutions
24
Comments
3
Lucca Rodrigues
@ChromeUniverse

All comments

  • Lucca Rodrigues•430
    @ChromeUniversePosted about 2 years ago

    Hi Hasan! Congrats on completing the challenge 🎉

    If you'd like to improve your current solution, here are a couple of suggestions:

    • Use the League Spartan font on the calculator's display and make it bold so it matches with the rest of the design
    • Maybe change the display from an <input> to a simple <p> for displaying text? Input tags are best left to forms.

    Other than that, great job! The app looks great on both desktop and mobile and works nicely too. I particularly liked the color transitions on the highlighted buttons. 🙂 If you're looking for an extra challenge, try rebuilding this with React! Highly interactive web apps such as this calculator are the perfect use case for building with components and introducing state management.

    Hope this helps! Keep up the good work 😉

    Marked as helpful
    1
  • Lucca Rodrigues•430
    @ChromeUniversePosted about 2 years ago

    Hey there Ayjamal! Congrats on completing the challenge 🎉

    The website is working (and looking!) great on both desktop and mobile, and I really liked that little glowy box-shadow effect when you hover over the dice button. Really the only suggestion that comes to mind is adding some more spacing between elements and some more padding to the card to make it less compacted.

    Other than that, awesome job! Keep up the good work 😉

    Marked as helpful
    0
  • Lucca Rodrigues•430
    @ChromeUniversePosted about 2 years ago

    Hey there Anointed, congrats on completing the challenge! 🎉 If you'd like to improve on your current solution, here are a couple of suggestions:

    • Try using the Libre Franklin font with weights 300, 600 and 700 as suggested by the style guide
    • The sizing of the input fields and the button are a bit off: try making them a bit shorter in width and taller in height
    • Try adding some left padding to the form's input field and setting a custom color to the input's placeholder to make it look grayed out.
    • The Instagram icon is a bit different from the one in the design preview - try using the SVG icons that come bundled with the starter files.
    • Lastly, try reducing the hero image's width on desktop - it's looking good on mobile though!

    Great job, hope this helps! 😉

    0