Premium GST Calculator – HTML CSS JavaScript GST Tax Calculator source code

Getting Started

Follow the steps below to set up and use the Premium GST Calculator Pro in your project.

Step 1: Download the Source Code

Download the source code package and extract all files into your preferred project folder.

gst-calculator-pro/
├── index.html
├── assets/
│   ├── css/
│   ├── js/
│   └── icons/
└── README.md

Step 2: Open the Project

Open the project folder using any code editor:

• Visual Studio Code
• Sublime Text
• Notepad++
• WebStorm

Step 3: Launch the Calculator

Open the index.html file in your browser.

Or use a local server:

Live Server (VS Code)

Step 4: Calculate GST

Enter:

• Amount
• GST Rate
• Sale Type

Choose:

• Add GST
• Remove GST

The calculator will instantly display:

• Original Amount
• GST Amount
• CGST
• SGST
• IGST
• Final Amount

Step 5: Select GST Rate

Choose predefined GST slabs:

3%
5%
12%
18%
28%

Or enter a custom GST rate manually.

Step 6: Switch Between IGST & CGST/SGST

Select:

Intrastate Sale

Shows:

CGST + SGST

Or

Interstate Sale

Shows:

IGST

The tax breakdown updates automatically.

Step 7: View Real-Time Dashboard

The dashboard displays:

• Original Amount
• Total GST
• CGST
• SGST
• IGST
• Final Amount

All values update instantly as you type.

Step 8: Analyze GST Comparison

Use the visual comparison bar to compare:

Base Amount
VS
GST Amount

This helps users understand tax distribution visually.

Step 9: Detect GST Percentage

Use the GST Percentage Finder.

Enter:

Base Amount
Final Amount

The tool automatically calculates and displays the detected GST percentage.

Step 10: Download GST Report

Click:

Download Invoice Report

The application generates a professional PDF report containing:

• Original Amount
• GST Breakdown
• Final Amount
• Tax Summary

Step 11: View Calculation History

The calculator automatically stores recent calculations using Local Storage.

Features:

• Recent GST calculations
• Quick review
• Persistent browser storage
• One-click history clear option

Step 12: Enable Dark Mode

Click the moon icon to switch between:

☀ Light Mode
🌙 Dark Mode

The application remembers user preferences.

Step 13: Change Theme Colors

Choose from:

• Blue
• Purple
• Green
• Orange

Theme colors update instantly across the entire interface.

Step 14: Customize the Project

You can easily modify:

• GST Rates
• Theme Colors
• Dashboard Cards
• Tax Labels
• PDF Report Name
• Icons
• Branding
• Company Logo

Simply edit the HTML, CSS, and JavaScript files.

Key Features Included

✔ GST Add Calculator

✔ GST Remove Calculator

✔ GST Inclusive Calculator

✔ GST Exclusive Calculator

✔ CGST Calculator

✔ SGST Calculator

✔ IGST Calculator

✔ GST Percentage Finder

✔ GST Comparison Bar

✔ GST Invoice Preview

✔ PDF Export

✔ Calculation History

✔ Local Storage Support

✔ Dark Mode

✔ Theme Switcher

✔ Glassmorphism UI

✔ Responsive Design

✔ Mobile Friendly

✔ Real-Time Calculation

Browser Compatibility

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari
• Opera

Ideal Use Cases

• GST Calculation Tools
• Tax Management Systems
• Accounting Software
• Business Applications
• Invoice Systems
• Finance Dashboards
• Educational Projects
• Web Development Portfolios