Submitted about 2 years ago

Tip calculator app - HTML, SCSS, JS, FlexBox, Grid, mobile-first & BEM

#accessibility#bem#sass/scss

darryncodes• 6,430

@darryncodes

Preview site View code

This is a solution for...

Tip calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi everyone 👋

I upped the ante again on this one and really had to persevere to improve my knowledge and experience with JavaScript.

I'm really happy with the result and the styling. I also really appreciate the ui design on this challenge, it looks great 👏

Any feedback that could help me to improve would be very welcome, with a focus on the following:

i'd like to learn a more elegant way to remove special characters on the inputs (perhaps some thoughts on RegEx)
is there a way to avoid leading zero's, for example at the moment you could enter 000100 into the inputs
finally I chose <button> for the tip inputs, is there some more suitable/accessible mark up

Until next time, happy coding 🤙

Community feedback

Emmilie Estabillo• 5,540

@emestabillo

Posted about 2 years ago

Hi @darryncodes, looks pretty good! I personally might try radios for the tips, but that's just my preference.

Here's a short article on how to deal with the leading zeros.

Two things I observed is that the grand total for each person is not taking the tip amount, and any bill that has less than $100 would result to NaN . I haven't done this challenge so I don't know if that is intended behavior. There's an error on the console from the regex that might be causing it.

Hope this helps!

Marked as helpful

darryncodes• 6,430

@darryncodes

Posted about 2 years ago

Hi @emestabillo, thanks for taking the time to comment.

Radio's is an interesting call.

Thanks for the article link, that website looks excellent. However I still haven't managed to make it work with the code snippet 😅

I've fixed the NaN and console error, I had some random bits and pieces knocking about in the code that i left behind accidentally whilst testing stuff out!

Dev Rathore• 2,600

@GitHub-dev12345

Posted about 2 years ago

Your design have over size I suggest you, you this css property to decrease and increase your whole size of design , 😊😊

Dev Rathore• 2,600

@GitHub-dev12345

Posted about 2 years ago

Good Work Bro ❤️👍 My small suggestion : 1.In Card design CSS Code Used this:

transform : scale(0.8); this property decrease the size of card. 😉

large size for increase the number of scale & small size for decrease the number of scale

I hope you find this helpful

darryncodes• 6,430

@darryncodes

Posted about 2 years ago

Hi Dev, thanks a lot and for the comment.

I don't really understand what you mean - what problem would your feedback solve?

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