Tip Calculator (Not Completed)

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! base on the issues you've written I could try make some suggestions:

  • The custom button is not a button, it's an input with a placeholder="Custom" where the user can input random numbers.
  • To add the whole content with the same background, you could try to adjust the css property of the designated classes... for example:

  tip-flex-container {
    display: flex;
    flex-direction: row;
    height: 600px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: white;
    width: 900px;
    margin: auto;
    margin-top: 3rem;
  }
  

  Add the width, margin, margin-top to wrap the whole content and eliminate the border.

  • Adjust the other content as well like inside the .calculating-bill rule set, eliminate the border, background-color and border-radius

  .calculating-bill {
    width: 400px;
    height: 500px;
    flex-wrap: wrap;
    padding: 30px;
  }
  

  • The borders of the button and input tag should display into none.

  From here I think you can adjust the values and make more improvements. I hope this is helpful.

  Marked as helpful

  0

  ---

  

  Cody•170

  @Cod-BiggPosted almost 3 years ago

  @RioCantre Thank you! Do you mind if I ask you one more question? I noticed in the design there is no total button. I added one to make sure the javascript worked. Does the app run on a key press instead of a button?

  0

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @Cod-Bigg The total button is not available because the total bill is calculated based on the number of people and the percentage.

  0

  

  Cody•170

  @Cod-BiggPosted almost 3 years ago

  @RioCantre Sorry, I may be a little confused. If there is no total button then how do the calculations run? There is no button that uses event listener, so how would it know the user is done selecting the tip, and number of people?

  0

  

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  @Cod-Bigg I think by pressing the selected tip button, it will calculate the bill which is divided by the number of people. The flow goes like this, the user enters the bill and number of people then presses the selected tip button which would then appear in the right side section the tip amount and total.

  0
• 

  Matthias Wagner•330

  @MatzeW95Posted almost 3 years ago

  To your first point. The custom "button" Is not a button. It is an input field for a custom value.

  Marked as helpful

  0
• 

  Cody•170

  @Cod-BiggPosted almost 3 years ago

  Got it! Yeah, I got the calculations working correctly. I was just confused since I di not see a total button in the design, but I guess running the calculation after the tip selected makes sense. Appreciate the help!

  0