/tippy-tip-v1

Tippy Tip is a tip calculator and bill splitter that can be accessed on the web. It was made with HTML, CSS and JavaScript

Primary LanguageCSS

Tippy Tip - v1 - Html, CSS, and JavaScript

Overview

Tippy Tip is a single tip calculator and bill splitter then can be accessed on the web. It was made with HTML, CSS and JavaScript

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

Mobile view Web view

Links

My process

  • Establish the goals and user stories
  • Wirebox the HTML elements
  • Style the the HTML elements with CSS
  • Do as much of the validation in HTML as I can
  • Plan out the JavaScript needs
  • Add finish functionality from with JavaScript
  • Test and add further validation

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Javascript

Author

tippy-tip-v1