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

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
• ES6 JavaScript

What I learned

One of the key things I learned from this task was how to get a string from an element and convert it to a float or integer.

I also learned how to set a maximum amount of characters into an input field using JS. See snippet below.

function limit(element) {
  let max_chars = 8;
  if (element.value.length > max_chars) {
    element.value = element.value.substring(0, max_chars);
  }
}

Continued development

Create a normal calculator

Useful resources

• Stack Overflow - This helped me use JS to limit the amount of characters that can be entered into an input field.
• MDN Web Docs - This helped me understand how to convert a string into a float.

Author

• Frontend Mentor - @jkellerman