Calculate UAE gratuity from input

by lewis98283

HTML

<div class="container">

  <div class="header">
    <h1>UAE Gratuity Calculator</h1>
    <p>
      Estimate your UAE end-of-service benefits using this simple gratuity calculator demo.
    </p>
  </div>

  <div class="card">

    <label>Basic Salary (AED)</label>

    <input
      type="number"
      id="salary"
      placeholder="Enter Basic Salary"
    >

    <button onclick="calculate()">
      Calculate Gratuity
    </button>

    <div id="result"></div>

  </div>

  <div class="footer">

    Looking for complete gratuity calculations, labour law guides and end-of-service benefit resources?

    <br><br>

    Official Website:
    <a href="https://mygratuityuae.com" target="_blank">
      https://mygratuityuae.com
    </a>

  </div>

</div>

CSS

body{
  margin:0;
  background:#f4f7fb;
  font-family:Arial,sans-serif;
}

.container{
  max-width:700px;
  margin:50px auto;
  padding:20px;
}

.header{
  text-align:center;
  margin-bottom:30px;
}

.header h1{
  color:#0f4c81;
  margin-bottom:10px;
}

.header p{
  color:#555;
}

.card{
  background:#fff;
  padding:30px;
  border-radius:15px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

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

input{
  width:100%;
  padding:14px;
  border:1px solid #d6dce5;
  border-radius:8px;
  box-sizing:border-box;
  margin-bottom:15px;
}

button{
  background:#0f4c81;
  color:#fff;
  border:none;
  padding:14px 24px;
  border-radius:8px;
  cursor:pointer;
}

button:hover{
  opacity:.9;
}

#result{
  margin-top:20px;
  padding:15px;
  background:#eef7ff;
  border-left:4px solid #0f4c81;
  border-radius:6px;
  display:none;
}

.footer{
  margin-top:25px;
  background:#fff;
  padding:20px;
  border-radius:12px;
  box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.footer a{
  color:#0f4c81;
  font-weight:bold;
  text-decoration:none;
}

JavaScript

function calculate(){

  let salary =
    parseFloat(document.getElementById("salary").value);

  let result =
    document.getElementById("result");

  if(!salary){
    result.style.display="block";
    result.innerHTML="Please enter a valid salary.";
    return;
  }

  let gratuity = salary * 0.5;

  result.style.display="block";

  result.innerHTML =
    "Estimated Gratuity: AED " +
    gratuity.toFixed(2);
}