Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip Calculator App Main

Wallnuts 110

@WallNutss

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm kinda confused when building this. Like when I add an event listener for user input, I can't instantly update the value that the user inputting, so that's why I call function instead reassign the variable each time event started. Mind tell me why is that? any feedback are welcome

Community feedback

P
Patrick 14,325

@palgramming

Posted

you should use number inputs so letters cannot be typed in the inputs https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

0

Wallnuts 110

@WallNutss

Posted

@palgramming But how do I make the arrow thingy in the input box disappear?

0
Roc Tanweer 2,500

@RocTanweer

Posted

I would use buttons instead of divs for percentage options

0

Wallnuts 110

@WallNutss

Posted

@RocTanweer I see, I will do that next, thanks. I thought with div I can manipulate them easier. I was wrong

0

@aUnicornDev

Posted

The e passed below is the event object which has the latest updated value of the <input> tag.

inputPrice.addEventListener('input',(e)=>{
//Use e.target.value 
    price();
})
0

Wallnuts 110

@WallNutss

Posted

@aUnicornDev Thanks, At first I'm doing that, but I can't access the other value which is the people and the tip. Can you elaborate more how to do that? that's why I passed the event to outside function cause it seems more easier that way

0

Please log in to post a comment

Log in with GitHub
Discord logo

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