HTML code of GST calculator
<!DOCTYPE html>
<html>
<head>
<title>GST Calculator</title>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
<style>
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
input[type=”number”] {
height: 3rem;
}
h4 {
margin-bottom: 1.5rem;
}
button {
margin-top: 1rem;
}
</style>
</head>
<body>
<div class=”container”>
<h4>GST Calculator</h4>
<div class=”row”>
<div class=”input-field col s6″>
<input id=”amount” type=”number” step=”0.01″>
<label for=”amount”>Amount (in INR)</label>
</div>
<div class=”input-field col s6″>
<input id=”gstRate” type=”number” step=”0.01″>
<label for=”gstRate”>GST Rate (%)</label>
</div>
</div>
<div class=”row”>
<div class=”col s6″>
<button class=”waves-effect waves-light btn” onclick=” return calculateGST()”>Calculate</button>
</div>
<div class=”col s6″>
<h5 id=”result”></h5>
</div>
</div>
</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
<script>
function calculateGST() {
var amount = parseFloat(document.getElementById(‘amount’).value);
var gstRate = parseFloat(document.getElementById(‘gstRate’).value);
if (isNaN(amount) || isNaN(gstRate)) {
document.getElementById(‘result’).innerHTML = ‘Please enter valid numbers.’;
return;
}
var gstAmount = (amount * gstRate) / 100;
var totalAmount = amount + gstAmount;
document.getElementById(‘result’).innerHTML = ‘GST Amount: ‘ + gstAmount.toFixed(2) + ‘ INR<br>Total Amount: ‘ + totalAmount.toFixed(2) + ‘ INR’;
}
</script>
</body>
</html>