JSFiddle - React, Tailwind, and code Playground

by ethanpil

HTML

<div id="cost_estimate">
    
    <h2>Approximate Area (in Feet) To Be Heated:</h2>
    
    <label for="area_length">Length (ft.)</label>
    <select id="area_length">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
    </select>
    
    <label for="area_width">Width (ft.)</label>
    <select id="area_width">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
    </select>
    <p>
        Total Area: <span id="area_total">1</span> sqft. <br>
        Standard Mat Estimate: <span id="standard_cost">$203 - $235</span> <br>
        Custom Mat Estimate: <span id="custom_cost">$361 - $418</span>
    </p>
 </div>

CSS

body { font-family: arial;}
h2 { font-size: 1.1em; }

JavaScript

$('#area_length, #area_width').change(function(){
   len = $('#area_length').val();
   wid = $('#area_width').val(); 
    
   total_area = len*wid;
   $('#area_total').html(total_area);

 estimator = [
    {"sqft":"1","standard":"$203 - $235","custom":"$361 - $418"},
    {"sqft":"2","standard":"$203 - $235","custom":"$361 - $418"},
    {"sqft":"3","standard":"$203 - $235","custom":"$361 - $418"},
    {"sqft":"4","standard":"$203 - $235","custom":"$361 - $418"},
    {"sqft":"5","standard":"$203 - $235","custom":"$361 - $418"},
    {"sqft":"6","standard":"$203 - $235","custom":"$361 - $418"},
    {"sqft":"8","standard":"$205 - $237","custom":"$361 - $418"},
    {"sqft":"9","standard":"$212 - $245","custom":"$361 - $418"},
    {"sqft":"10","standard":"$220 - $255","custom":"$361 - $418"},
    {"sqft":"11","standard":"$224 - $260","custom":"$428 - $495"},
    {"sqft":"12","standard":"$231 - $267","custom":"$428 - $495"},
    {"sqft":"13","standard":"$239 - $277","custom":"$428 - $495"},
    {"sqft":"14","standard":"$245 - $284","custom":"$428 - $495"},
    {"sqft":"15","standard":"$262 - $304","custom":"$428 - $495"},
    {"sqft":"16","standard":"$277 - $321","custom":"$428 - $495"},
    {"sqft":"17","standard":"$285 - $330","custom":"$428 - $495"},
    {"sqft":"18","standard":"$289 - $335","custom":"$428 - $495"},
    {"sqft":"19","standard":"$299 - $346","custom":"$428 - $495"},
    {"sqft":"20","standard":"$311 - $360","custom":"$428 - $495"},
    {"sqft":"21","standard":"$327 - $378","custom":"$561 - $649"},
    {"sqft":"22","standard":"$329 - $381","custom":"$561 - $649"},
    {"sqft":"23","standard":"$333 - $386","custom":"$561 - $649"},
    {"sqft":"24","standard":"$352 - $408","custom":"$561 - $649"},
    {"sqft":"25","standard":"$358 - $415","custom":"$561 - $649"},
    {"sqft":"26","standard":"$362 - $420","custom":"$561 - $649"},
    {"sqft":"27","standard":"$375 - $435","custom":"$561 - $649"},
    {"sqft":"28","standard":"$388 - $449","custom":"$561 -...