Amount
Calculate
Charges
Nu 0.00
GST (5%)
Nu 0.00
Total
Nu 0.00
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Noto+Serif:wght@400;500&display=swap');
.calc-card {
width: 80%;
max-width: 900px;
margin: 40px auto;
padding: 28px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
@media (max-width: 768px) {
.calc-card {
width: 100%;
margin: 20px 0;
padding: 20px;
border-radius: 0; /* optional: edge-to-edge clean look */
}
}
.input-group {
margin-bottom: 20px;
}
label {
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: #252D60;
display: block;
margin-bottom: 6px;
}
input {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid #e2e6ea;
font-size: 15px;
font-family: 'Noto Serif', serif;
}
input:focus {
outline: none;
border-color: #252D60;
}
/* Button */
.actions {
margin-bottom: 20px;
}
.btn {
width: 100%;
padding: 12px;
border-radius: 8px;
border: none;
font-family: 'Poppins', sans-serif;
font-size: 14px;
cursor: pointer;
}
.secondary {
background: #252D60;
color: #fff;
}
.disable {
opacity: 0.5;
pointer-events: none;
}
/* Results */
.results {
font-family: 'Noto Serif', serif;
}
.row {
display: flex;
justify-content: space-between;
margin: 10px 0;
font-size: 15px;
}
.divider {
height: 1px;
background: #eee;
margin: 12px 0;
}
.total {
font-weight: 500;
font-size: 16px;
}
const amountInput = document.getElementById("amount");
const calculateBtn = document.getElementById("calculate-btn");
const chargesValue = document.getElementById("charges-value");
const gstValue = document.getElementById("gst-value");
const totalValue = document.getElementById("total-value");
// Enable button
amountInput.addEventListener("input", () => {
if (amountInput.value > 0) {
calculateBtn.classList.remove("disable");
} else {
calculateBtn.classList.add("disable");
}
});
// Calculation
const calculateCharges = () => {
const amount = parseFloat(amountInput.value);
let charges = 0;
if (amount <= 100000) {
charges = 35;
}
else if (amount 2000) charges = 2000;
}
else {
charges = (amount / 1000) * 1.75;
if (charges > 15000) charges = 15000;
if (charges < 2000) charges = 2000;
}
const gst = charges * 0.05;
const total = charges + gst;
chargesValue.innerHTML = "Nu " + charges.toFixed(2);
gstValue.innerHTML = "Nu " + gst.toFixed(2);
totalValue.innerHTML = "Nu " + total.toFixed(2);
};
calculateBtn.addEventListener("click", calculateCharges);
