JSFiddle - React, Tailwind, and code Playground

by gooeyteam

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>UK Payee Tax Calculator</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>UK Payee Tax Calculator</h1>
      <form>
        <div class="form-group">
          <label for="income">Income:</label>
          <input type="text" id="income" name="income" required>
        </div>
        <div class="form-group">
          <label for="taxYear">Tax Year:</label>
          <select id="taxYear" name="taxYear" required>
            <option value="2022">2022/23</option>
            <option value="2021">2021/22</option>
            <option value="2020">2020/21</option>
          </select>
        </div>
        <div class="form-group">
          <button type="button" onclick="calculateTax()">Calculate Tax</button>
        </div>
      </form>
      <div id="result"></div>
    </div>
    <script src="taxCalculator.js"></script>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-bottom: 20px;
  text-align: center;
}

form {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 10px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"],
select {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 16px;
  margin-top: 5px;
  margin-bottom: 15px;
}

button[type="button"] {
  display: block;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  padding: 10px 20px;
  cursor: pointer;
  margin: 0 auto;
}

button[type="button"]:hover {
  background-color: #3e8e41;
}

#result {
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 5px;
  text-align: center;
}

JavaScript

function calculateTax() {
  const income = parseFloat(document.getElementById("income").value);
  const taxYear = parseInt(document.getElementById("taxYear").value);
  
  // Basic rate tax
  let basicTax = 0;
  if (income > 0 && income <= 37500) {
    basicTax = income * 0.20;
  } else if (income > 37500) {
    basicTax = 7500 + ((income - 37500) * 0.40);
  }
  
  // Personal allowance
  const personalAllowance = (taxYear === 2022) ? 12570 : 12500;
  const taxableIncome = income - personalAllowance;
  
  // Higher rate tax
  let higherTax = 0;
  if (taxableIncome > 0 && taxableIncome <= 50000) {
    higherTax = taxableIncome * 0.20;
  } else if (taxableIncome > 50000 && taxableIncome <= 150000) {
    higherTax = 10000 + ((taxableIncome - 50000) * 0.40);
  } else if (taxableIncome > 150000) {
    higherTax = 55000 + ((taxableIncome - 150000) * 0.45);
  }
  
  // National Insurance
  const niThreshold = (taxYear === 2022) ? 9672 : 9500;
  const niRate = 0.12;
  const niAmount = (income - niThreshold) * niRate;
  
  const totalTax = basicTax + higherTax;
  const takeHomePay = income - totalTax - niAmount;
  
  const resultElement = document.getElementById("result");
  resultElement.innerHTML = `
    <p>Basic rate tax: £${basicTax.toFixed(2)}</p>
    <p>Higher rate tax: £${higherTax.toFixed(2)}</p>
    <p>National Insurance: £${niAmount.toFixed(2)}</p>
    <h2>Total tax: £${totalTax.toFixed(2)}</h2>
    <h2>Take home pay: £${takeHomePay.toFixed(2)}</h2>
  `;
}