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

• Frontend Mentor - Tip calculator app solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
  • 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

• Desktop preview -

• Mobile design:

  • complete state - screenshot
  • empty state - screenshot
  • active state - see desktop

• Tablet design:

  • complete state - screenshot
  • empty state - screenshot
  • active state - see desktop

• Desktop design:

  • complete state - screenshot
  • empty state - screenshot
  • active state - screenshot

Links

• Solution URL: solution posted on Frontend Mentor
• Live Site URL: visit live site

My process

Built with

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

What I learned

MDN WEB DOCS - Alignment and auto margins - This helped me in the desktop layout where I needed to align the reset button vertically to the bottom of the flex container.

Author

• Frontend Mentor - @OnyedikachiOzoani
• Stack Overflow - @coding-nerd

Acknowledgments

All thanks to Frontend Mentor for sharing such an educative challenge. This challenge tested my Flexbox Layout, Grid Layout, and JavaScript DOM manipulation and Algorithmic thinking skills.

Thanks for checking out my project.