Frontend Mentor - Tip calculator app solution

This is a solution to the Tip calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Calculate the correct tip and total cost of the bill per person

Screenshot

Links

• Solution URL: Solution
• Live Site URL: Live Site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla Javascript

What I learned

This was a good challenge to learn many things, specially related to customizing inputs. I also remembered some things that i had forgotten.

Some meaningful code snippets:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
::placeholder{
    color:var(--grayish-cyan);
    opacity: 1;
}
::-webkit-input-placeholder { 
    color: var(--grayish-cyan);
}
.buttons {
    grid-template-columns: repeat(auto-fill,minmax(110px,1fr));
    gap:1em;
}

Continued development

My goal is to keep improving on my frontend skills. I want to get really good at CSS and JS. I also want to focus on accesability and semantic HTML.

Author

• Frontend Mentor - @dialejo24
• Github - @dialejo24

Acknowledgments

As always, i want to thank everyone who shares their knowledge via internet or other medium. They are awesome. A big shout out to theOdinProject, freecodecamp, youtubers Kevin Powell and Web dev simplified and all the content creators that teach people how to make the web amazing.