Scribd
Upload
2 views

VAT Calculator code

This document is an HTML template for a UAE VAT Calculator that calculates a 5% VAT on a given amount in AED. It includes input fields for the amount and displays results for both plus tax and including tax calculations. The calculator is styled with CSS for a modern look and uses JavaScript to perform the VAT calculations dynamically.

Uploaded by

bestcool06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

VAT Calculator code

This document is an HTML template for a UAE VAT Calculator that calculates a 5% VAT on a given amount in AED. It includes input fields for the amount and displays results for both plus tax and including tax calculations. The calculator is styled with CSS for a modern look and uses JavaScript to perform the VAT calculations dynamically.

Uploaded by

bestcool06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UAE VAT Calculator 5%</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 20px;
}

.calculator-container {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
width: 800px;
max-width: 95%;
}

h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 2rem;
font-size: 2.5rem;
background: linear-gradient(to right, #3498db, #2ecc71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.input-group {
margin-bottom: 2rem;
text-align: center;
}

label {
display: block;
color: #34495e;
margin-bottom: 0.8rem;
font-weight: bold;
font-size: 1.2rem;
}

input {
width: 50%;
padding: 1rem;
border: 2px solid #ddd;
border-radius: 12px;
font-size: 1.2rem;
transition: border-color 0.3s ease;
margin: 0 auto;
display: block;
}

input:focus {
outline: none;
border-color: #3498db;
}

.results-container {
display: flex;
justify-content: space-between;
gap: 2rem;
margin-top: 2rem;
}

.result-section {
flex: 1;
background: #f8f9fa;
padding: 1.5rem;
border-radius: 12px;
min-width: 0;
}

.result-section h2 {
margin: 0 0 1rem 0;
padding-bottom: 0.5rem;
font-size: 1.5rem;
border-bottom: 2px solid;
}
.plus-tax h2 {
color: #2ecc71;
border-color: #2ecc71;
}

.including-tax h2 {
color: #3498db;
border-color: #3498db;
}

.result-item {
margin: 1rem 0;
padding: 0.8rem;
background: white;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.result-label {
color: #7f8c8d;
font-size: 1rem;
margin-bottom: 0.3rem;
}

.result-value {
font-size: 1.5rem;
font-weight: bold;
}

.plus-tax .result-value {
color: #2ecc71;
}

.including-tax .result-value {
color: #3498db;
}
</style>
</head>
<body>
<div class="calculator-container">
<h1>UAE VAT Calculator (5%)</h1>
<div class="input-group">
<label for="amount">Enter Amount (AED):</label>
<input type="number" id="amount" placeholder="Enter amount" step="0.01">
</div>
<div class="results-container">
<div class="result-section plus-tax">
<h2>Plus Tax Calculation</h2>
<div class="result-item">
<div class="result-label">Total Amount (VAT Included)</div>
<div class="result-value" id="plusTaxTotal">0.00 AED</div>
</div>
<div class="result-item">
<div class="result-label">VAT Amount (5%)</div>
<div class="result-value" id="vatAmount">0.00 AED</div>
</div>
</div>
<div class="result-section including-tax">
<h2>Including Tax Calculation</h2>
<div class="result-item">
<div class="result-label">Base Amount (VAT Excluded)</div>
<div class="result-value" id="excludingTax">0.00 AED</div>
</div>
<div class="result-item">
<div class="result-label">VAT Amount (5%)</div>
<div class="result-value" id="includedVat">0.00 AED</div>
</div>
</div>
</div>
</div>

<script>
const amountInput = document.getElementById('amount');
const plusTaxTotal = document.getElementById('plusTaxTotal');
const vatAmount = document.getElementById('vatAmount');
const excludingTax = document.getElementById('excludingTax');
const includedVat = document.getElementById('includedVat');

amountInput.addEventListener('input', calculateVAT);

function calculateVAT() {
const amount = parseFloat(amountInput.value) || 0;
const vatRate = 0.05; // 5%

// Plus Tax Calculations


const vat = amount * vatRate;
const totalWithTax = amount + vat;
// Including Tax Calculations
const baseAmount = amount / (1 + vatRate);
const vatIncluded = amount - baseAmount;

// Update results
plusTaxTotal.textContent = totalWithTax.toFixed(2) + ' AED';
vatAmount.textContent = vat.toFixed(2) + ' AED';
excludingTax.textContent = baseAmount.toFixed(2) + ' AED';
includedVat.textContent = vatIncluded.toFixed(2) + ' AED';
}
</script>
</body>
</html>

You might also like