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 Using HTML/CSS, SCSS, GULP and JavaScript OOP

@Pomz010

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 want to prevent input fields to accept zero as first character, here's what I have tried. I used addEventListener with keydown event to detect type of character, then store the key (e.key) in an array container and access that character using array index number. If the character is zero, then it will return a returnValue of false (e.returnValue = false) to prevent zero from being typed in the input field. This works but if user made a mistake and deletes characters using backspace, then the input field will now be able to accept zero as first character again.

Community feedback

Darko 980

@dtomicic

Posted

Hey, I don't know if you are done with this project or just posting for help but if you're done you might consider looking into why none of the buttons work (they don't calculate anything). But since I'm guessing you're still not done and you're just asking for help you can check out this link for the solution to your problem, it's simpler than what you've done, it checks on keyup if the character that was inserted has a length of 0 (meaning it's the first character) and then checks the ASCII code if it matches 48 (which is 0 in ASCII table).

Hope this helps a bit, design looks good you just miss the functionality and you'll be all set. Keep it up

0

@Pomz010

Posted

@dtomicic Hi! Thank you for you feedback. I'm not yet done with this project. Yeah, I'm actually looking for help on how to prevent zero as first character to be typed on input fields. Reset button and custom percentage are not yet working but tip computation are functioning. You can select percentage buttons using mouse click and alternatively navigate and select tip percentage button by pressing tab key and select by pressing space bar. After that, you can press enter on your keyboard to submit and compute for results.

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