Tip Calculator App

Community feedback

• 

  Bao Dang•110

  @weebaoPosted about 2 years ago

  Hey your app looks great! You probably need to adjust the CSS a bit more to make it look closer to the design but I think it's fine if the website looks good enough for you. You can hide the spinner in the input type number field by using this

  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
  

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Tylerdurden230•120

  @TylerDurden230Posted about 2 years ago

  @weebao Super Useful! thank you!

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Tylerdurden, congratulations for your new solution!

  The box-shadow is a bit too evident, this is due the opacity and blur. The secret to create a perfect and smooth shadow is to have low values for opacity and increase blur try this value instead: box-shadow: 12px 7px 20px 6px rgb(57 75 84 / 8%);

  If you’re not familiar to box-shadow you can use this site to create the shadow design and then just drop the code into the CSS: https://html-css-js.com/css/generator/box-shadow/

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Jacob Marshall•270

  @JacobMarshall0Posted about 2 years ago

  Looks good to me. What bug did you find?

  0

  ---

  

  Tylerdurden230•120

  @TylerDurden230Posted about 2 years ago

  @JacobMarshall0 For Example I don't like when i select a Tip% and when i change focus, it's not selected anymore (visually), the value is still properly stored. I know I could handle this easily with React using states.

  1

  

  Jacob Marshall•270

  @JacobMarshall0Posted about 2 years ago

  @TylerDurden230 I see. You could use normal vanilla JS to handle this, without the need for React. Create a separate class in your CSS and add event listener to your buttons, and in the event handler function take the element and assign the class to it. It should look something like this:

  element.addEventListener("click", () => {
      element.classList.add("selected");
  }
  

  However, with this approach you will also need a function to clear the selected class from the other buttons when you click one, which can be done with .classList.remove("selected");

  Hope this helps solve your problem.

  Marked as helpful

  0

  

  Tylerdurden230•120

  @TylerDurden230Posted about 2 years ago

  @JacobMarshall0 Thanks for the advice. I also thought about this, but i don't really like it. Too many lines in my opinion :) At the end, i will try it anyway

  1