rafat17 / Tip_Calculator_App

A web application that automatically calculates the value of the tip for you based on your input bill.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tip_Calculator_App

A web application that automatically calculates the value of the tip for you based on your input bill.

#Technologies Used:

  • HTML
  • CSS
  • Vanilla JavaScript
  • Realtime database from Google Firebase

#How To Use this Web App:

  • Clone/download this repository
  • Run the login.html file
  • You can sign in to this application by using your valid email address

**N.B:: Internet connection is mandatory to run this application

#Key_features of this app:

  • Lets a user sign in using any form of valid email address
  • The user can easily calculate the tip value by giving the value of the bill as input
  • The user can customise the default tip percentage set at 5%, to any value he wishes to set it at.
  • The user can view the history of his tip calculation.

#Username and password you can use to use this app email: rafatul1704@gmail.com password: fraternity

#App features and their usage:

  • Sign In Feature: Lets the user sign in directly or register in seconds using a valid email address.

login.png

  • Home page: The home page that will be common to each signed in user

home-ui-1.png

  • Default tip calculation: if the user calculates the tip by inputting the bill, the tip percent used will be 5%

home-ui-default-tip.png

  • Custom Tip Setup: The user can change the tip percentage that he want to use for tip calculation or the custom_tip By clicking the "Change Tip %" button, the user will be prompted to set a custom tip.

home-ui-custom-tip-setting.png

  • Custom Tip Calculation: The user can calculate the tip using the custom percentage shown below

home-ui-custom-tip-calc.png

  • Reset to Default: At the click of "Reset" on the index.html or user's main page, the default value of the tip will be set and the custom tip will be removed.

  • View user history: By clicking on the "History" tab of the user's home page, the user can view the history of the user's calculation by redirecting him/her to the "history.html" page. If no history is found, "No HISTORY Found !" will be displayed. Both scenarios are shown below.

home-ui-no-history.png home-ui-no-history.png

  • Clear History from User's profile: At the click of "Clear History" on the history.html page of the web app, all of the users history will be cleared and hence "No HISTORY Found !" will be displayed again.

About

A web application that automatically calculates the value of the tip for you based on your input bill.


Languages

Language:JavaScript 55.4%Language:HTML 23.8%Language:CSS 20.8%