Skip to content

A responsive website helps students to understand basic JavaScript concepts, implement responsiveness using Bootstrap and CSS, and host using Azure Static Web Apps service.

License

Notifications You must be signed in to change notification settings

KiranAminPanjwani/Tracker-Expense-Calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tracker-Expense Calculator

Our easy-to-use budgeting calculator will help users to understand their expenses and manage their money. The budget process depends on an accurate calculation of expenses and revenues (Total Expenses = Net Revenue - Net Income) so that the user can calculate their total expenses. Utilizing our free expense calculator will take control of your spending!

Visit the website here: Tracker Expense Calculator

image

image

image

image

Working:

After entering to our website, user will be able to either use the calculator in the guest mode or by signing in to their account.

  • Guest mode can be accessed by clicking the "Get Started" button available on the home page. The user can use the calculator in guest mode without creating an account. However, without logging into the user's account will prevent them from saving their records.
  • User must log in either manually or using credentials in order to save the record.
    There are 4 options on the login form:
    1. Use GitHub to sign in
    2. Use Twitter to sign in
    3. Use a Google account to sign in
    4. Enter your email address and password to log in. (Before logging in, user must Signup.)

Guest Mode Functionalities:

guestMode.mp4

Without logging into their account, users can compute their spending using the guest mode. In this mode, the ability to save records is limited, and the username will not be displayed in the upper right corner.

User Account Functionalities:

UserAccount.mp4

The user could simply compute their spending after logging into their account, save their records, and view their username in the upper right corner of the screen. The user has the option to sign in or out whenever needed.

Responsiveness:

  • The website has responsive styling of homepage, forms and calculator.
MobileView.mp4
MobileViewCalculator.mp4

Built with:

⭕ HTML ⭕ CSS ⭕ Bootstrap ⭕ JavaScript

How to use:

  • Clone the repository
  • Go to the directory
  • Run index.html file
  • And follow the procedure shown above in the video.

Feedback✌🏼

➡Share your feedbacks and suggestions by reaching out to me.✨
➡Or simply create an issue to this repository if you want to fix a bug or add a new feature.

Show some ❤️ by starring⭐ this repository!

About

A responsive website helps students to understand basic JavaScript concepts, implement responsiveness using Bootstrap and CSS, and host using Azure Static Web Apps service.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published