Submitted over 2 years ago

tip calculator html, css, javascript, flexbox

ellienndea• 130

@ellienndea

Preview site View code

This is a solution for...

Tip calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Updated version after I got valuable feedback for the first attempt. Also fixed issues from the html report. 😊

Hi everybody, thanks for checking out my tip calculator solution. :) It was quite challenging for me. I tried my best to make it accessible for everybody. Now it works. I also tried to keep my code read-able, so I hope you guys find it clear enough. Any feedback is welcome! Happy coding! Linda 😃

Community feedback

Axseinga• 430

@axseinga

Posted over 2 years ago

Hi ellienndea,

Congrats on finishing this challenge!

Here are some suggestions from me:

you can center your calculator vertically on the desktop design, so it does not stick to the bottom of the page,
I would make the "coded by" paragraph much smaller, it looks really big on the desktop and it breaks into two lines on the mobile,
you can change the event of event listener to "input" instead of "change" as it was suggested to me as well (I used originally "keyup"). With the "change" your event fires only when User clicks outside after filling the inputs,
you can try to break your javascript code into smaller functions so it's more readable :) article about good practices in JS

I hope it will be helpful for you :) It's not so easy challenge. Great work!

Marked as helpful

ellienndea• 130

@ellienndea

Posted over 2 years ago

@axseinga Hi, thank you so much for your elaborate feedback. Those are all very good points and I will work through them while improving my code for the tip calculator. Happy coding! 😊

Chamu• 12,970

@ChamuMutezva

Posted over 2 years ago

Greetings Ellienndea

Well done, you did well on this project. The calculation are working well, one thing that you need to take care of are numbers below zero - you validated for zero but not amounts less than zero

Happy coding

ellienndea• 130

@ellienndea

Posted over 2 years ago

@ChamuMutezva Hi Chamu, thanks for your feedback. As it is a tip calculator to calculate the tip for a bill to pay, I would say there won't be any values less than zero. It is not a regular calculator. Thanks anyway! ;) Happy coding!

Chamu• 12,970

@ChamuMutezva

Posted over 2 years ago

@ellienndea, I am imagining a visually impaired accidentally hitting the negative sign and what the confusion might bring

ellienndea• 130

@ellienndea

Posted over 2 years ago

@ChamuMutezva Thanks for your reply. What would be a good solution for that? An error message or calculating negative values? Don't the screen readers give error msgs? 🤔

Axseinga• 430

@axseinga

Posted over 2 years ago

@ellienndea when you get your billValue you get to add an if statement to it, that if this value is larger than 0 then the rest of the code run (or other way). I noticed that you use only the "let" keyword, we use "let" only if the variable will change (like e.g. counters), have a look at this article about const and let. I noticed as well that you use if(people == 0), you should always use "===" which is strict equality comparison. Have a look here why.

ellienndea• 130

@ellienndea

Posted over 2 years ago

@axseinga Hi, thank you for your advice and the links. :) I will read them and improve my code accordingly. Happy coding! Linda 😊

Please log in to post a comment

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