JSFiddle - React, Tailwind, and code Playground

by David Underwood

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div style="padding-left: 20px;width: 1024px; text-align: center">

<div class="ownerOccupiedInput">
  <h2 class="display-4">
    Tax Calcuator
  </h2>
  <p class="lead">
    Please input your property value information below calculate your estimated additional school tax.
  </p>
  <div class="checkbox" style="padding-top: 10px">
      <label style="font-size: 1.1em">
        <input id="isHomesteadExempt" type="checkbox" value="">
        <span class="cr"><i class="cr-icon fa fa-check"></i></span>
        Check here if you are 65 or older
      </label>
    </div>
  <div class="propertyValue">
    <div class="propertyValue-group input-group input-group-lg">
      <span class="input-group-addon">$</span>
      <input id="propertyValue" type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="What is your property worth?" required>
      <span class="input-group-addon">.00</span>
    </div>
  
  </div>
  <div class="subDetails">
    <table class="table">
      <tbody>
        <tr>
          <td><strong>Adusted Value</strong></td>
          <td>$133,000.00</td>
          <td><strong>Assessment %</strong></td>
          <td>4%</td>
          <td><strong>Total Assessed Value</strong></td>
          <td>$5,320.00</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div style="padding: 10px 0 0 0;">
    <div class="alert alert-dark" style="font-size: 1.1em" role="alert">
      <b>Your estimated additional school tax will appear here.</b><br>
      Enter property...

CSS

.ownerOccupiedInput {
  text-align: center;
}
.display-5 {
    font-size: 2.0em;
    font-weight: 300;
    line-height: 1.0;
}
.table {
      margin-bottom: 0;
}
.results {
  text-align: left;
}

.checkbox label:after, 
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}

JavaScript

var Calculator = (function() {

  function Owner (isAtOrOverSixtyFive) {
    this.IsAtOrOver65 = isAtOrOverSixtyFive;
  }

  function PropertyType(id, name, assessmentPercentage, isOwnerOccupied) {
    this.Id = id;
    this.Name = name;
    this.IsOwnerOccupied = isOwnerOccupied;
    this.AssessmentPercentage = assessmentPercentage;
  }

  function Property(value, propertyType, owner) {
    this.Value = value;
    this.Owner = owner;
    this.PropertyType = propertyType;
    this.AdjustedValue = function() {
      if(this.Owner !== null) {
        if(this.Owner.IsAtOrOverSixtyFive) {
          if(this.Value > 50000) {
            return this.Value - 50000;
          }
          return this.Value;
        }
      }
    };
    this.AssessedValue =  function() {
      if(this.PropertyType !== null) {
        if(this.PropertyType.IsOwnerOccupied) {
          return this.AssessedValue * this.PropertyType.AssessmentPercentage;
        }
       return this.Value * this.PropertyType.AssessmentPercentage;
      }
    };
  }

  function FindById(list, id) {
      return $.grep(list, function(e){ return e.Id == id; });
  }
  
  return {
  	Run: function() {
    	alert('running');

			var owner = new Owner(true);
      var properties = [];
      var propertyTypes = [];

      propertyTypes.push(new PropertyType("HOO","Owner-Occupied Home",0.04,true));
      propertyTypes.push(new PropertyType("HNO","Non-Occupied Home",0.06,false));
      propertyTypes.push(new PropertyType("MOV","Motor Vehicle",0.06,false));
      propertyTypes.push(new PropertyType("OPP","Other Personal Property (boat, plane, etc)",0.105,false));

      console.log(propertyTypes);

      properties.push(new Property(133000.00,FindById(propertyTypes,"HOO"),owner));

      console.log(properties);

      console.log('asessedValue',properties[0].AssessedValue(), 'adjustedValue', properties[0].AdjustedValue());
  }
};
})();

Calculator.Run();