Frontend Mentor - Tip calculator app solution

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
  • 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: tip-calculator-app-files
• Live Site URL: tip-calculator-site

My process

• Draft out how I want the layout to look
• Structure the project using semantic markups
• Link my CSS and apply my generic rules, import and apply font
• Set my CSS variable
• Start implementing project layout using flexbox
• Manipulate DOM to fetch form input values
• Still ongoing...

Built with

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

What I learned

  .form-input input[type=number]::-webkit-inner-spin-button, 
  .form-input input[type=number]::-webkit-outer-spin-button{
      -webkit-appearance: none;
      margin: 0;
  }

  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

• LinkedIn - Oghenemeru Avwemoya
• Frontend Mentor - @skiboss
• Twitter - @meruAvwemoya

Acknowledgments

@devdre1909 [Future Academy Africa] (https://futureacademy.africa)