Design comparison
Solution retrospective
I have a question about the custom percentage tip. For my code, I ended up using a form to input the custom tip value. The problem is that when the value is added, my JavaScript function (for the calculation) won't start until I click on the custom tip form again. Is there a way to do this process in one go? Or else what other way did you tackle that part?
Process :
- Click on the custom tip form to input value
- JavaScript function starts but the input value is 0 --- (want to skip this step)
- Move the cursor away from the custom tip form --- (want to skip this step)
- Move the cursor back to the custom tip form and click on it --- (want to skip this step)
- JavaScript function starts (takes inputted value)
Any feedback is welcomed and appreciated :)
Community feedback
- @ChamuMutezvaPosted about 3 years ago
- to answer your question, use the
inputeventListener in place of the click eventListener.
There are several things that needs to be changed for it to be operable by assistive technology users.
- semantic matters, use elements that are built for the job. A div is not an interactive element - using it for the percentages will require much more extra work to allow keyboard users operate the calculator. Use radio buttons or buttons.
- input elements must have a label
- just use one form element that will be the main parent for all the input elements, no need to create a form for each element.
- headings should ascend in order h1, h2, h3 etc. Only using one h1 is considered best practice
Marked as helpful0 - to answer your question, use the
- @prathmeshgodsePosted about 3 years ago
Try using input EventListener to check the value of the custom tip percentage. Check out this W3Schools Page for details
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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