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

Responsive Tip calculator app with flexbox and vanilla javascript

Zajac• 150

@Zajaczkowski23

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback about the page is welcome.

Community feedback

Elaine• 11,400

@elaineleung

Posted

Hi Zajac, great job building this out! I think you got pretty close to the original design and you also got most of the pieces. Here are some things you can look into:

  • Right now the button doesn't remain pressed when I click on it; see whether you can add a line in your button's event listener function to also add/remove a styling class whenever it is pressed.

  • The text color in the input is fairly light and looks almost like a placeholder; I suggest using a darker text color to match the color in the design.

  • Lastly, the reset button should be disabled (remain grey) until the calculation is made, which is when it should light up. I also missed this point the first time when I built my app until I saw the other solutions and realized I misunderstood what was going on, that it wasn't meant to be a hovered color but active color

Once again, great job working on this, keep building! 😊

Marked as helpful

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