Tip calculator app

This is a solution to the Tip calculator app challenge on Frontend Mentor.

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

Desktop empty version

Calculated version

Mobile version

Links

• Solution URL: Tip calculator GitHub
• Live Site URL: Tip calculator Live version

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow
• Form use

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

To see how you can add code snippets, see below:

When clicking on button we can prevent form from submitting 2 ways:

<button type="button"></button>

event.preventDefault();

We can reset form using this:

document.getElementById("form").reset();

Continued development

In future projects I want to continue focusing on working with some kind of forms, inputs.

Useful resources

• StackOverflow - This helped me to overcome problem with submitting form, how to round the number to the nearest tenth.
• MDN - Documentation.

Author

• LinkedIn - Eugene Zanevskij
• Frontend Mentor - @EugeneZanevskij