DEV Community

Kathy Kiwn
Kathy Kiwn

Posted on

Simple Value Added Tax Calculator Tool using JS

This is the simple VAT Calculator tool designed to calculate the Value Added Tax (VAT) for a given amount and VAT rate. Users can input the amount and the corresponding VAT rate, and upon clicking the "Calculate" button, the tool will compute the VAT amount and the total amount, including VAT. The result is then displayed on the page.

The calculator provides a clean and user-friendly interface with input fields for the amount and VAT rate, a button to trigger the calculation, and a display area for the calculated VAT and total amount. The tool helps users quickly determine the VAT associated with a specific amount based on the provided VAT rate.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>VAT Calculator</title>
</head>
<body>
    <div class="calculator">
        <h1>VAT Calculator</h1>
        <label for="amount">Enter Amount:</label>
        <input type="number" id="amount" placeholder="Enter amount" step="0.01">
        <label for="vatRate">VAT Rate (%):</label>
        <input type="number" id="vatRate" placeholder="Enter VAT rate" step="0.1">
        <button onclick="calculateVAT()">Calculate</button>
        <p id="result">VAT: $0.00</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode
function calculateVAT() {
    var amount = parseFloat(document.getElementById("amount").value);
    var vatRate = parseFloat(document.getElementById("vatRate").value);

    if (isNaN(amount) || isNaN(vatRate)) {
        alert("Please enter valid numbers");
        return;
    }

    var vatAmount = (amount * vatRate) / 100;
    var totalAmount = amount + vatAmount;

    document.getElementById("result").innerText = "VAT: $" + vatAmount.toFixed(2) + " | Total: $" + totalAmount.toFixed(2);
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.