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
  • Useful resources
• 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: Fronted Mentor
• Live Site URL: Vercel

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• CSS Modules - For styles

What I learned

This is my first time with ReactJS. I started the course of Max Schwarzmüller from Udemy. I was in the third of this course, when I start this challenge and I wanted to try, if I can finished this challenge.

I used the Create React app and CSS Modules.

What I have leart in CSS is, that for the hover on input is better to use the outline than the border, because border cause "jumping" of the rest of the content.

Accessibility is the really importnat part for me, but I am still learning :)

Continued development

I want to finished the React course and then I want to try next challenge from Fronted Mentor - the memory game.

Useful resources

• Create React App - a comfortable environment for learning React, and it is the best way to start building a new single-page application in React.
• Udemy course ReactJS by Max Schwarzmüller

Author

• Frontend Mentor - @sirriah

Acknowledgments

I would like to thank to James from Frontend Mentors Slack, that he push me to the right way :)