Tip Calculator in Vanilla JS and HTML

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, ughm. Did you code on this on a large screen? The layout for me is bad since it is really big. But zooming out, the layout seems kinda nice, just the size needs to be fixed for other screen resolutions. The mobile layout is good, just needs a little bit of padding to the left and right side of the body to prevent it from touching the sides.

  Regarding your concern, Conrad already said a great tip about that. But let me explain it a bit more. Well to be more clearer, I'll just create a small snippet that you can look. If that is your desired outcome, if it's not, just drop it here and maybe I can help with it.

  Some suggestions would be:

  • Of course first, make the layout be good and responsive in other screen resolutions as well and not only for large screens.
  • You don't really need to adds stylings on the html element. Typically, on the html element, you would just see these stylings:

  html {
    box-sizing: border-box; # or any other box-sizing values
    font-size: 100%;
  }
  

  Instead of applying it on the html element, apply it on the body tag.

  • The .container selector that holds the tip calculator itself, I would not recommend position: absolute on it. Leave it on the flow. If you try to inspect your layout in dev tools, hover on the body tag. You will see that the body have a small dimension and doesn't really captures the calculator itself. That is the effect of position: absolute.
  • A website needs to have at least 1 h1 tag. On this one, it could be the "SPLITTER" text, or it could be a screen-reader only text.
  • On the input of the calculator, on the bill. You can see that when it has focus, it shifts a bit the elements at the bottom, this is because you are adding a border to it right. To make it not do that, make the element already have the border but the color of it is transparent. It would be like: border: 3px solid transparent and when it have the focus just transition the border-color. This way it won't shift the element. You can apply this on other input elements on your solution.
  • I think that the logic on your tip calculator is not correct? Checking that one out would be really great.
  • This challenge could have used more accessibility features, but if you are starting out, it's fine, but as you go along, remember to add accessibility as a goal on websites.

  Other than those, great work.

  1
• 

  Conrad•950

  @ConradMcGrifterPosted about 3 years ago

  You can make a css class with the active styles and then toggle it on and off with javaScript

  0