Submitted over 2 years ago

Tip Calculator using Sass and Vanilla JavaScript (Updates Realtime)

Lance Martija• 185

@lancemartija

Preview site View code

This is a solution for...

Tip calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi, it's my first time building a functioning website using Vanilla JavaScript and Sass. I would like to hear your insights and suggestions on how to improve my skills for my Front-End Development journey.

If possible, I would like to know what you think are the best practices when coding in JavaScript, and I would also love to get some insights with the naming conventions (i.e. BEM) that I've used in this project I made.

I know my JavaScript codes in this project are quite a mess, so it would be of great help for me to get your suggestions on how to improve it.

Thank you for reading and for sending your replies!

Community feedback

Chamu• 12,970

@ChamuMutezva

Posted over 2 years ago

Greetings Lance

id's must be unique, you cannot use an id more than once. A class is suitable for re-usability.
as for headings, an h1 element is supposed to be the first heading element on your site. Using only one h1 element is considered best practise. Headings should ascend in order where an h2 should follow an h1 (h1, h2 ,h3 etc).
the button should have a type, in this case i think reset will do.
change the div with a class of main into an html5 main element - that will also help to clear one of the errors mentioned in the report
form input elements are required to have labels for accessibility reasons

Good lucky

Marked as helpful

Lance Martija• 185

@lancemartija

Posted over 2 years ago

@ChamuMutezva Thank you for your insights! I'll make sure to keep these things in mind once I start my next project.

YksRocks• 100

@YksRocks

Posted over 2 years ago

This is awesome!

Great job. Though I have to point out something not that it is very bad but when I want to type number of persons I have to scroll the page this is a very small thing but it will make it easier to use. I know you can easily fix this. Anyhow, well done.

Lance Martija• 185

@lancemartija

Posted over 2 years ago

@YksRocks Oh, yeah. It tends to happen when you type on the input forms. It's not really a bug... or maybe it is? I'm not sure. Well, even on most websites with forms that support mobile view, it scrolls back to the input form when it's on focus. Anyway, I'll try to find a fix for that if it really is a bug. I'll make a quick adjustment as soon as I can. Thanks for the heads up!

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