GST Calculator Tool
GST Calculator Tool
Please fill all fields correctly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background: linear-gradient(135deg, #4facfe, #00f2fe);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
max-width: 400px;
width: 100%;
}
h1 {
margin-bottom: 1.5rem;
font-size: 2rem;
color: #fff;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
color: #fff;
}
input[type="number"],
select {
width: 100%;
padding: 0.8rem;
border-radius: 25px;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 1rem;
}
button {
background-color: #fff;
color: #00f2fe;
padding: 0.8rem 1.2rem;
border-radius: 25px;
border: none;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s;
width: 100%;
}
button:hover {
background-color: #00f2fe;
color: #fff;
}
#result-section {
margin-top: 2rem;
background-color: rgba(255, 255, 255, 0.2);
padding: 1.5rem;
border-radius: 10px;
}
#result-section h3 {
margin-bottom: 1rem;
}
#original-amount,
#gst-amount,
#final-amount {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.hidden {
display: none;
}
#error-message {
color: #ff6b6b;
margin-top: 1rem;
}document.getElementById('gst-form').addEventListener('submit', function (e) {
e.preventDefault();
const amount = parseFloat(document.getElementById('amount').value);
const gstRate = parseFloat(document.getElementById('gst-rate').value);
const gstType = document.getElementById('gst-type').value;
const errorMessage = document.getElementById('error-message');
const resultSection = document.getElementById('result-section');
const originalAmountElement = document.getElementById('original-amount');
const gstAmountElement = document.getElementById('gst-amount');
const finalAmountElement = document.getElementById('final-amount');
// Reset error and result messages
errorMessage.classList.add('hidden');
resultSection.classList.add('hidden');
if (isNaN(amount) || isNaN(gstRate) || gstRate <= 0 || amount <= 0) {
errorMessage.classList.remove('hidden');
return;
}
let originalAmount, gstAmount, finalAmount;
if (gstType === 'inclusive') {
finalAmount = amount;
originalAmount = amount / (1 + gstRate / 100);
gstAmount = finalAmount - originalAmount;
} else {
originalAmount = amount;
gstAmount = (originalAmount * gstRate) / 100;
finalAmount = originalAmount + gstAmount;
}
originalAmountElement.textContent = `Original Amount: ₹${originalAmount.toFixed(2)}`;
gstAmountElement.textContent = `GST Amount (${gstRate}%): ₹${gstAmount.toFixed(2)}`;
finalAmountElement.textContent = `Final Amount: ₹${finalAmount.toFixed(2)}`;
resultSection.classList.remove('hidden');
});
Comments
Post a Comment