Submitted 9 months ago

Responsive tip calculator with HTML, CSS and Vanilla JS

Ray•430

@ray-mak

Preview site View code

This is a solution for...Tip calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

I added a "Calculate Tip" button since the original design did not offer a clear way to submit the inputs.

Also, does anyone know why the hover state for the 5% input gets activated when I hover over the other inputs? It seems to go into the hover state when my mouse is over the "Select Tip %" label.

Thanks in advance!

Community feedback

three•180

@ewlondonPosted 9 months ago

Hello friend, you can fix your hover issue by using proper semantics for a list of buttons like so

<fieldset class="tip-input">
     <legend>Select Tip %</legend>
         <div class="button-container">
            <input id="tip5" type="button" value="5%" />
            <input id="tip10" type="button" value="10%" />
            <input id="tip15" type="button" value="15%" />
            <input id="tip25" type="button" value="25%" />
            <input id="tip50" type="button" value="50%" />
            <input id="custom-input" type="tel" placeholder="Custom" maxlength="5" />
        </div>
</fieldset>

to remove the border from fieldset you can adjust your css file

label,fieldset {
	display: flex;
	flex-direction: column;
	color: var(--dark-grayish-cyan);
}

Marked as helpful

Ray•430

@ray-makPosted 9 months ago

@ewlondon Thanks! That got the job done. I appreciate the advice!

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