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

Tip Calculator App

Chantae 320

@taepal467

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

Jansel 190

@JanselLopez

Posted

Hello 🙃, there are some improvements there that you could implement:

  1. Use flexbox to align the content instead of placing a large margin that does not make it responsive, here are some links to learn flexbox interactively ( flexboxfroggy, flexboxdefense)
  2. Instead of placing images of the dollar sign you can place a background-image to your inputs, this makes them not leave the input, you can try something like this:
  background-image: url(../assets/images/icon-dollar.svg);
  background-repeat: no-repeat;
  background-size: calc(contain);
  background-position-y: center;
  background-position-x: 15px;
  1. In addition to eliminate the "arrows" in the number type input you can put this in your input in css
"appearance: textfield;" 

There are some more improvements but I think that with this the page should give a good change, I hope it has been helpful 😊.

Marked as helpful

0

Chantae 320

@taepal467

Posted

@JanselLopez Thank you so much! I deleted the img tags and used the CSS code you gave me. Works much better!

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