Tip Calculator Challenge | Responsive, BEM and Edge cases with JS
Design comparison
Solution retrospective
It was a long challenge honestly! I have tried BEM first time so do lemme know what all changes I can make, might be I have got the concept wrong. For questions- When using the calculator, I have used onblur event for inputs. Can any1 suggest something better because I don't want my users to be clicking outside the field everytime they need the result. Also to get results, I have used setInterval. Is there any better solution?! Thanks
Community feedback
- @julabinaPosted almost 3 years ago
hi, maybe use Input event
nameOfInput.addEventListener("input", (event) => { /* you can retrieve the event in a variable, or use it wherever you want. */ myVariable = event.target.value; }
1@SGautam1108Posted almost 3 years ago@julabina Ya I did try that, but the problem was it was changing only after the users had completed writing, wasn't realtime in accordance with changes
0@julabinaPosted almost 3 years ago@SGautam1108 if at each change, you launch your calculation function, as on my solution.
nameOfInput.addEventListener("input", (event) => { myVariable = event.target.value; calculFunctionOrDisplayFunction(); }
Marked as helpful1@SGautam1108Posted almost 3 years ago@julabina Oh ok, I get it. I will try it then and let you know the results. Thanks alot!
0
Please log in to post a comment
Log in with GitHubJoin 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