JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<form method="get" action="">
<span>From:</span>
<select id="dd" name="d-delivery" class="recalc">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>  
</select>
<select id="md" name="month-delivery" class="recalc">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>
<select id="yd" name="year-delivery" class="recalc">
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option...

JavaScript

var seasonLookup = [
    {startDay: 1, startMonth:1, endDay: 10, endMonth: 6, season:1},
    {startDay: 21, startMonth:9, endDay: 31, endMonth: 12, season:1},
    {startDay: 11, startMonth:6, endDay: 30, endMonth: 6, season:2},
    {startDay: 1, startMonth:9, endDay: 20, endMonth: 9, season:2},
    {startDay: 1, startMonth:7, endDay: 31, endMonth: 8, season:3},    
    ];

var priceMatrix = {
    bike1: {
        1: { t1: 3, t2: 2, t3: 1},
        2: { t1: 5, t2: 3, t3: 2},
        3: { t1: 10, t2: 7, t3: 5}
    }     ,
    bike2: {
        1: { t1: 3, t2: 2, t3: 1},
        2: { t1: 5, t2: 3, t3: 2},
        3: { t1: 10, t2: 7, t3: 5}
    }    ,
    bike3: {
        1: { t1: 3, t2: 2, t3: 1},
        2: { t1: 5, t2: 3, t3: 2},
        3: { t1: 10, t2: 7, t3: 5}
    }        
};

function getSeason(date){
    var day = date.getDate();
    var month = date.getMonth()+1;
    var year = date.getFullYear();
    for(var i=0;i<seasonLookup.length;i++){
        var s = seasonLookup[i];
        var startDate = new Date(year, s.startMonth-1,s.startDay);
        var endDate = new Date(year, s.endMonth-1,s.endDay);
        if(date >= startDate && date <= endDate)
            return s.season;
    }
    return null;
}

function getPrice(bike, season, days){
  var tier = "";
  if(days <=2)
    tier = "t1";
  else if(days <=7)    
      tier = "t2";
   else
       tier = "t3"
           console.log(days + ' days in season ' + season + ' at ' + priceMatrix[bike][season][tier] + '/day (' + tier + ')')
   return priceMatrix[bike][season][tier] * days;
}

function calculatePrice(startDate, endDate, bike)
{
    console.log(startDate);
        console.log(endDate);
   var currentSeason = getSeason(startDate);
   var totalPrice = 0;
   var daysInSeason = 0;
   var currentDate = startDate;
   while(currentDate<=endDate){
       var season = getSeason(currentDate);
       if(season != currentSeason){
              totalPrice += getPrice(bike,currentSeason,daysInSeason);
             ...