Open the index.html file in a web browser, and you should see the GST Calculator tool with colorful styling. Enter the amount and select the GST rate, then click the "Calculate" button to see the calculated GST amount and total amount below the button
<!DOCTYPE html>
<html>
<head>
<title>GST Calculator</title>
<link rel="stylesheet" type="text/css" href="body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
.calculator {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
input[type="number"], select {
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
text-align: center;
color: #333;
font-size: 18px;
}
">
</head>
<body>
<div class="container">
<h1>GST Calculator</h1>
<div class="calculator">
<input type="number" id="amount" placeholder="Enter Amount">
<select id="gstRate">
<option value="5">5%</option>
<option value="12">12%</option>
<option value="18">18%</option>
<option value="28">28%</option>
</select>
<button onclick="calculateGST()">Calculate</button>
</div>
<div id="result"></div>
</div>
<script src="function calculateGST() {
var amount = document.getElementById("amount").value;
var gstRate = document.getElementById("gstRate").value;
var gstAmount = (amount * gstRate) / 100;
var totalAmount = parseFloat(amount) + parseFloat(gstAmount);
var result = `Amount: $${amount}<br>GST (${gstRate}%): $${gstAmount}<br>Total Amount: $${totalAmount.toFixed(2)}`;
document.getElementById("result").innerHTML = result;
}
"></script>
</body>
</html>
No comments:
Post a Comment