Frontend Mentor - Tip calculator app solution

Frontend Mentor - Tip calculator app solution

My Approach to solving the challenge

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

Table of contents

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_screenshot mobile_screenshot

My process

  • Draft out the layout
  • Structure the project using semantic markups
  • Link my external stylesheet and apply generic rules, import and apply font
  • Set my CSS variable
  • Start implementing project layout using flexbox
  • Manipulate DOM to fetch form input values
  • Played around functionality

Built with

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

What I learned

  • Removing the default icons in the number input
  .form-input input[type=number]::-webkit-inner-spin-button, 
  .form-input input[type=number]::-webkit-outer-spin-button{
      -webkit-appearance: none;
      margin: 0;
  }
  • Fetching the values from an input after the user has finished inputting the values and replace the prepended percentage sign from the innertext of the tip percentages button.
  bill.addEventListener("keyup", e => {
      billAmount = Number(e.target.value)
  })

  noOfPeople.addEventListener("keyup", e => {
      numOfPeople = Number(e.target.value)
  })

  Array.from(tipPercentages).forEach(tipPercentage => {
      tipPercentage.addEventListener("click", e => {
          if (e.target.innerText.include("%")){
              tipPercentage = Number(e.target.innerText.replace("%", ""))
          }
      })
  })

Continued development

  • -webkit appearance
  • CSS variables
  • Array Functions

Author

Acknowledgments