HTML,CSS and Javascript

Solution retrospective
This is my first Javascript challenge, so PLEASE give me feedbacks to enhance my skills
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Deevyn9
Hi Tarik, your Solution is great and functional, good work.
Marked as helpful - @abhik-b
👋 Hello Tarik , Wonderful solution , it looks responsive & works correctly , Well Done 🤩🤩🤩
Since this is your first JS challenge , your hard work has paid off !! However I think you should follow some tutorials to create javascript projects because there are lot of stuff you should know before creating complex projects. For example you are listening for
keyup
events but instead you should be listening forchange
events.Other than that your solution is cool & keep coding this amazing solutions 👍
Marked as helpful - @tkressma
Hey there! Great solution - it works as it should. The web app is very responsive as well!
I have one general tip for you. In JavaScript, there is a concept called Event delegation.
Consider your code: on lines 52,56, 94-98 and 183-187, you create many separate event listeners to perform the same event upon being clicked: ActivatingReset(), erasevalueoncustom(), makeCalculations().
Using Event delegation, you can apply a single event listener to the parent container (class="percent") and have whatever child you click on "bubble" up towards the event listener. This will allow your code to follow the D.R.Y. principle.
For example, you can replace all of those repetitive lines of code with this:
document.querySelector(".percent") .addEventListener('click', event => { if (event.target.className === 'percentBtn') { //Assign inputs a class of "percentBtn" makecalculations(); } });
You can read more here: https://dmitripavlutin.com/javascript-event-delegation/, but certaintly watch some YouTube videos on this powerful concept. Happy coding!
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