Calculate

by Nevear

HTML

<form name="costcalculator">
 <span class="calc_tit">Выберите Прическу:</span>
  <div class="pricheska-type">
    <select name="pricheskaType" id="pricheskaType">
      <option value="svad">Свадебная прическа</option>
      <option value="vecher">Вечерня прическа</option>
      <option value="lokon">Локоны</option>
      <option value="uklad">Укладка</option>
      <option value="kosi">Косы</option>
      <option value="kos_kan">Косы с канекалоном</option>
      <option value="bredi">Брейды</option>
      <option value="bredi_kan">Брейды с канекалоном</option>
    </select>
  </div>
  
 <span class="calc_tit">Выезд на дом</span>
   <input type="checkbox" id="regionny">

   <div class="region-type">
   <span class="calc_tit">Выберите район:</span>
    <select name="regionType" id="regionType">
    <option value="ne_dom">Не выбран</option>
      <option value="zhd">Железнодорожный</option>
      <option value="comitern">Коминтерновский</option>
      <option value="levo">Левобережный</option>
      <option value="lenin">Ленинский</option>
      <option value="sovet">Советский</option>
      <option value="centr">Центральный</option>
    </select>
  </div>
  
  
  <div class="months">
    <select name="months" id="months">
      <option value="1">1 month</option>
      <option value="2">2 months</option>
      <option value="3">3 months</option>
    </select>
  </div>

  
  <button type="button" onclick="calculatePrice()">Calculate</button>
  <div id="price"></div> 
</form>

<p>Цена имеет приблизетельное значение, возможны расхождения. Уточняйте цену перед регистрацией на услугу.</p>

CSS

#regionny + .region-type {
  display: none;
}


#regionny:checked + .region-type {
  display: block;
}

.region-type select option:first-child {
  display: none;
}

JavaScript

var costs = {

  'svad': {'basePrice': 1000, 'pricePerMonth' : 100, 'maxMonths': 3},
  'vecher': {'basePrice': 500},
  'lokon': {'basePrice': 280},
  'uklad': {'basePrice': 270},
  'kosi': {'basePrice': 205},
  'kos_kan': {'basePrice': 280},
  'bredi': {'basePrice': 400},
  'bredi_kan': {'basePrice': 315},
  
  'ne_dom': {'basePrice': 0},
  'zhd': {'basePrice': 100},
  'comitern': {'basePrice': 150},
  'levo': {'basePrice': 250},
  'lenin': {'basePrice': 250},
  'sovet': {'basePrice': 250},
  'centr': {'basePrice': 250},
}



function calculatePrice()
{

  var pricheska = document.getElementById('pricheskaType').value;
  var region = document.getElementById('regionType').value;
  var months = document.getElementById('months').value;
  var price = costs[region].basePrice + costs[pricheska].basePrice + (costs[pricheska].pricePerMonth * (months - 1));
  document.getElementById('price').innerHTML = price;
	
}