Submitted over 1 year ago

Tip calculator app w/ (HTML + SASS + JS) 👨‍💻

#accessibility#bootstrap#sass/scss

Adriano• 33,960

@AdrianoEscarabote

Preview site View code

This is a solution for...

Tip calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

👨‍💻 Hello everyone.

This was an excellent challenge to train and improve my knowledge with js! I tried to make my code as clean and readable as possible! If there's anything I can improve on this, I'd love to know!

I added:

👨‍💻 messages if fields are not filled in correctly!
🎨 Added a loading animation while the page doesn't load!

Feel free to leave comments on how I can improve my code.

Thanks! 😊

Community feedback

Mina Makhlouf• 770

@Minamakhlouf

Posted over 1 year ago

Hi Adriano,

Very well designed project

The only feedback I would give is to use a function like .toFixed() which would fix the output to 2 decimal spaces, like how a real bill would look.

Example:

let numberBeforeRounding = 3.141413213123123122132;

let numberAfterRounding = numberBeforeRounding.toFixed(2);

numberAfterRounding;

Output: "3.14"

The only problem with this method is that it gives you the value as a string so you'll have to convert that to number data type with Number();

Hope this helps.

Marked as helpful

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@Minamakhlouf Thank you very much! I had tried using toFixed(), but I didn't quite understand how it worked! helped a lot

F. Russo• 80

@f-russo

Posted over 1 year ago

@AdrianoEscarabote To add to Mina's already good answer, you can prepend + to a string and it will convert it to a number. It's a shortcut for Number().

Example (modified from Mina's comment):

let numberAfterRounding = +numberBeforeRounding.toFixed(2);

Take a look at the Number - Rounding section on Javascript.info for reference.

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@f-russo thanks for the tips man! I already made the change!

Jumagobe• 1,000

@Jumanjigobez

Posted over 1 year ago

I love the solution you did, but I have a suggestion as in, the Number of people you could have made it to be only whole numbers not a decimal like I tried placing 1.5 and it calculated, so the logic gets lost.

I reviewed your index.html and I so on the input you place type="text", Maybe you can try it to be type="number" and check it out maybe :)

Otherwise it is wonderful it calculates nicely only the logic of number of people doesn't make sense.

Hope this will be helpful.

Have a nice day coding, Don't Give Up :)

Marked as helpful

Adriano• 33,960

@AdrianoEscarabote

Posted over 1 year ago

@Jumanjigobez Thanks for the comment! and about the input number I didn't want to put those two arrows next to the number, and the example design didn't use the input number, so to stay the same I used text.

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