JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<h1>Inspection Fee Calculator</h1>

<form method="post" action="">

Select the type of home
          <br><input type="radio" name="building" value="375"> detached
          <br><input type="radio" name="building" value="350"> semi-detached
          <br><input type="radio" name="building" value="350"> condo or freehold townhome - end unit
          <br><input type="radio" name="building" value="325"> condo or freehold townhome - interior unit
          <br><input type="radio" name="building" value="299"> condo apartment

<br><br>Is the home within 50 kms of Ottawa?   
          <br><input type="radio" name="distance" value="0"> yes
          <br><input type="radio" name="distance" value="25"> no

<br><br>Is the home less than 50 years old?    
          <br><input type="radio" name="age" value="0"> yes
          <br><input type="radio" name="age" value="25"> no

<br><br>Is the home less than 2000 square feet?    
          <br><input type="radio" name="sqft" value="0"> yes
          <br><input type="radio" name="sqft" value="25"> no
<br><br>

<input type="button" name="button" value="Calculate Fee" onClick="calculateFee(this.form)"> 

<table>
    <tr>
      <td align="right">Total Inspection fee:</td>
      <td>
        <input type="text" name="total" size="30" maxlength="30">
      </td>
    </tr>

</table>

</form>

JavaScript

function calculateFee(frm) {
    var total = 0,
        rads = frm.querySelectorAll('input:checked');
//    window.console&&console.log(rads);
    for (var i = 0; i < rads.length; i++) {
        var num = Number(rads[i].value);
        total += isNaN(num) ? 0 : num;
    }
    frm.total.value = total;
// for access to each radio collection do
//    var building = document.querySelector("[name=building]:checked");
//    if (building) total += Number(building.value);    
}