JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<table>
  <tr>
    <td>
      <label> Enter the name </label>
    </td>
    <td>
      <input type="text" id="name" />
    </td>
  </tr>
  <tr>
    <td>
      <label>Number of working hours </label>
    </td>
    <td>
      <input type="text" id="hours" />
    </td>
  </tr>
  <tr>
    <td>
      <label>Hourly Rate</label>
    </td>
    <td>
      <input type="text" id="rate" disabled="true" />
      <input type="button" id="clk" onclick="calculate()" />
    </td>
  </tr>
</table>
<br>
<br>
<div id="result">
  <b>Salary Details:</b>
  <br>
  <br> Name:
  <span id="resname"></span>
  <br>
  <br> Salary: <span id="total"></span>
</div>

JavaScript

function calculate() {
  var perrate=0;
  hours = document.getElementById('hours').value;
  rate = document.getElementById('rate');
  if (hours.trim().length <= 0) {
    alert("Hours is null");
    return false;
  }
  if (hours.trim().indexOf('-') == 0 && hours.trim() != parseFloat(hours)) {
    alert("Hours is not an integer");
    return false;
  }
  if (hours > 80) {

    alert("Working time has to be less than 80 hours");
    return false;

  } else if (hours <= 40) {
    perrate = 10.25;
    rate.value = "$"+perrate;


  } else if (hours > 40 && hours > 60) {
  	perrate = 
    rate.value = "$12.25";
  }

}