Submitted 3 months ago

Tip Calculator

Daniel king•510

@thedanielking

Preview site View code

This is a solution for...Tip calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Im proud that I could come up with the solutions by myself.

What challenges did you encounter, and how did you overcome them?

I had challenges in giving the selected link to be active and also waiting to press "enter" as the event listener;

What specific areas of your project would you like help with?

More on code refractoring and also, when reset button is clicked, how to rest the bill to 0 and also the number of people to 0;

Community feedback

Pdave•460
@Pdave-dcnPosted 3 months ago
Great job, friend. I have some suggestions for you. I think the app dimension is too small, so it would be better to increase it. Also, setting the initial value of inputs to zero in your code is not ideal. Instead of this <input type="text" value="0" id="bill">, try this <input type="text" placeholder="0" id="bill">.
Marked as helpful
0

Pdave•460

@Pdave-dcnPosted 3 months ago

To clear the input fields when the reset button is pressed, you could implement the following:

const resetBtn = document.querySelector('.reset-btn');
const inputBill = document.querySelector('.input-bill');
const inputPeople = document.querySelector('.input-people');

resetBtn.addEventListener('click', () => {
  inputBill.value = '';
  inputPeople.value = '';
});

Please log in to post a comment

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