<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GST Calculator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
<style>
body {
background-color: #f8f9fa;
}
.container {
max-width: 500px;
margin-top: 50px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.form-control {
margin-bottom: 20px;
}
.result {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>GST Calculator</h1>
<form id="gstForm">
<div class="form-group">
<label for="amount">Amount (in INR):</label>
<input type="number" class="form-control" id="amount" required>
</div>
<div class="form-group">
<label for="gstRate">GST Rate (%):</label>
<input type="number" class="form-control" id="gstRate" required>
</div>
<button type="submit" class="btn btn-primary">Calculate</button>
</form>
<div class="result" id="result"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#gstForm').submit(function (event) {
event.preventDefault();
var amount = parseFloat($('#amount').val());
var gstRate = parseFloat($('#gstRate').val());
if (isNaN(amount) || isNaN(gstRate)) {
$('#result').text('Please enter valid amount and GST rate.');
return;
}
var gstAmount = (amount * gstRate) / 100;
var totalAmount = amount + gstAmount;
$('#result').text('GST Amount: ' + gstAmount.toFixed(2) + ' INR | Total Amount: ' + totalAmount.toFixed(2) + ' INR');
});
});
</script>
</body>
</html>
Documentation
Step 1:- Open txt file from the folder for code
Step 2:- Copy all code
Step 3:- Open your website dashboard or blog
Step 4:- Add HTML element
Step 5:- Paste all code in your html element
Step 6:- Save file
Done you are successfully Pasted code in your website.
