ianwelerson/tip-calculator

This project was a study about different ways to create the same Tip Calculator: VanillaJS, TypeScript and Vue 2

Tip calculator - TypeScript

This project was a study about different ways to create the same project. This was made using TypeScript, but you can switch between branches and view the Vue.js 2 and VanillaJS version. All versions was made using Jest and Cypress.

The idea behind this version is to use TypeScript, with Cypress and Jest.

This is the VanillaJS version with TypeScript so all configurations was made by me, including the Webpack and Babel to work with TypeScrip.

Test Environment

https://tip-calculator-ts.netlify.app/

Built with

• TypeScript
• Babel
• SCSS
• Webpack
  • HTML Webpack Plugin
  • Babel Loader
  • TypeScript Loader
  • Mini CSS Extract Plugin
  • Style Loader
  • CSS Loader
  • SASS Loader
  • Webpack Dev Server
• Jest
• Cypress

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

The project ideia is from Frontend Mentor challenges.

Screen

Author

• Website - IanWelerson.com
• Twitter - @IanWelerson