@RioCantre
Posted
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-billrule set, eliminate theborder,background-colorandborder-radius
.calculating-bill {
width: 400px;
height: 500px;
flex-wrap: wrap;
padding: 30px;
}
- The borders of the
buttonandinputtag 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
@Cod-Bigg
Posted
@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?
@RioCantre
Posted
@Cod-Bigg The total button is not available because the total bill is calculated based on the number of people and the percentage.
@Cod-Bigg
Posted
@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?
@RioCantre
Posted
@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.
