Калькулятор покупки на Jquery

191

02 февраля 2018, 23:22

Мой пост не совсем по теме, пожалуйста, не ругайте =)

Написал калькулятор JQuery, - просьба взглянуть на JS код и сказать насколько он кривой и что нужно/можно улучшить?

Калькулятор считает почти на лету (после заполнения полей зеленого цвета, он делает подсчет) работает по on('change')

Сам код:

$(document).ready(function($) { 
  var $price_buy_car = $('#price_buy_car'), 
    $price_customs_car = $('#price_customs_car'), 
    $engine_capacity = $('#engine_capacity'), 
 
    $our_earnings = $('#our_earnings'), 
    $account_use = $('#account_use'), 
    $delivery_america = $('#delivery_america'), 
    $delivery_container = $('#delivery_container'), 
    $delivery_title = $('#delivery_title'), 
    $distributions = $('#distributions'), 
    $unloading_odessa = $('#unloading_odessa'), 
    $certificate = $('#certificate'), 
    $assessment = $('#assessment'), 
    $broker = $('#broker'), 
    $removal_odessa_container = $('#removal_odessa_container'), 
    $tow_truck_kharkiv = $('#tow_truck_kharkiv'), 
    $forwarding_escort_services = $('#forwarding_escort_services'); 
 
  $('input,select ').on('change', function() { 
 
    //Цена авто 
    var $price_buy_car_total = parseInt($price_buy_car.val()); 
 
    //Расчет Пошлины 
    var $duty = parseInt($price_customs_car.val()) * 0.1; 
    //Вывод расчета Пошлины 
    var $duty_calc = $('#duty').html($duty); 
 
    //Расчет  Акциза 
    var $excise_tax = 0.276 * parseInt($engine_capacity.val()) * 1.1; 
    //Вывод расчета  Акциза 
    var $excise_tax_calc = $('#excise_tax').html($excise_tax); 
 
    //Расчет НДС     
    var $vat = (parseInt($price_customs_car.val()) + $duty + $excise_tax) * 0.2; 
    //Вывод расчета НДС     
    var $vat_calc = $('#vat').html($vat); 
 
    // Статические расходы 
    var $our_earnings_total = parseInt($our_earnings.val()), 
      $account_use_total = parseInt($account_use.val()), 
      $delivery_america_total = parseInt($delivery_america.val()), 
      $delivery_container_total = parseInt($delivery_container.val()), 
      $delivery_title_total = parseInt($delivery_title.val()), 
      $distributions_total = parseInt($distributions.val()), 
      $unloading_odessa_total = parseInt($unloading_odessa.val()), 
      $certificate_total = parseInt($certificate.val()), 
      $assessment_total = parseInt($assessment.val()), 
      $broker_total = parseInt($broker.val()), 
      $removal_odessa_container_total = parseInt($removal_odessa_container.val()), 
      $tow_truck_kharkiv_total = parseInt($tow_truck_kharkiv.val()), 
      $auction_percent_total = $('#auction_percent option:selected').val(), 
      $auction_percent_total_calc = parseInt($auction_percent_total), 
      $forwarding_escort_services_total = parseInt($forwarding_escort_services.val()); 
 
    var $static_costs_total = $our_earnings_total + 
      $account_use_total + 
      $delivery_america_total + 
      $delivery_container_total + 
      $delivery_title_total + 
      $distributions_total + 
      $unloading_odessa_total + 
      $certificate_total + 
      $assessment_total + 
      $broker_total + 
      $removal_odessa_container_total + 
      $tow_truck_kharkiv_total + 
      $auction_percent_total_calc + 
      $forwarding_escort_services_total; 
 
    //Расчет всей стоимости авто     
    var $total = ($duty + $excise_tax + $vat + $static_costs_total) + $price_buy_car_total; 
    //Вывод расчета всей стоимости авто 
    var $total_calc = $('#Total').html($total); 
  }); 
});

.need-data-input { 
  background-color: rgba(139, 195, 74, 0.5); 
  color: #000; 
} 
 
#Total { 
  font-size: 20px; 
  font-weight: 700; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Car price calculator</title> 
 
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
  <link rel="stylesheet" href="css/main.css"> 
 
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
  <script src="js/main.js"></script> 
 
</head> 
 
<body> 
 
  <div class="container"> 
    <h1 class="text-center">Калькулятор стоимости авто из США</h1> 
    <br> 
    <div class="row"> 
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-126 col-xl-12"> 
 
        <form> 
 
          <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="price_buy_car">Цена покупки авто</label> 
                <input type="text" class="form-control need-data-input" id="price_buy_car" placeholder="Цена покупки авто" required> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="price_customs_car">Цена оценки на таможне</label> 
                <input type="text" class="form-control need-data-input" id="price_customs_car" placeholder="Цена оценки на таможне" required> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="engine_capacity">Объем двигателя</label> 
                <input type="text" class="form-control need-data-input" id="engine_capacity" placeholder="Объем двигателя" required> 
              </div> 
            </div> 
          </div> 
 
          <br> 
 
          <h2>Статические расходы</h2> 
 
          <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="our_earnings">Наш заработок</label> 
                <input type="text" class="form-control need-data-input" id="our_earnings" placeholder="Наш заработок" required value="500"> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="account_use">Пользование аккаунтом</label> 
                <input type="text" class="form-control" id="account_use" placeholder="Пользование аккаунтом" required value="150"> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="delivery_america">Доставка по Америке</label> 
                <input type="text" class="form-control need-data-input" id="delivery_america" placeholder="Доставка по Америке" required value="700"> 
              </div> 
            </div> 
          </div> 
 
          <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="delivery_container">Доставка контейнера</label> 
                <input type="text" class="form-control" id="delivery_container" placeholder="Доставка контейнера" required value="750"> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="delivery_title">Доставка тайтл</label> 
                <input type="text" class="form-control" id="delivery_title" placeholder="Доставка тайтл" required value="100"> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="distributions">Раздачи</label> 
                <input type="text" class="form-control" id="distributions" placeholder="Раздачи" required value="400"> 
              </div> 
            </div> 
          </div> 
 
          <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="unloading_odessa">Разгрузка Одесса</label> 
                <input type="text" class="form-control" id="unloading_odessa" placeholder="Разгрузка Одесса" required value="120"> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="certificate">Cертификат</label> 
                <input type="text" class="form-control" id="certificate" placeholder="Cертификат" required value="350"> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="assessment">Оценка</label> 
                <input type="text" class="form-control" id="assessment" placeholder="Оценка" required value="150"> 
              </div> 
            </div> 
          </div> 
 
          <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="broker">Брокер</label> 
                <input type="text" class="form-control" id="broker" placeholder="Брокер" required value="150"> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="removal_odessa_container">Снятие контейнера Одесса</label> 
                <input type="text" class="form-control" id="removal_odessa_container" placeholder="Снятие контейнера Одесса" required value="400"> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="tow_truck_kharkiv">Эвакуатор до Харькова</label> 
                <input type="text" class="form-control" id="tow_truck_kharkiv" placeholder="Эвакуатор до Харькова" required value="250"> 
              </div> 
            </div> 
          </div> 
 
          <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="exampleSelect1">% аукциона</label> 
                <select class="form-control need-data-input" id="auction_percent"> 
                <option value="">% аукциона</option> 
                <option value="450">от 0 - 3000$ - 450$</option> 
                <option value="600">3000$ - 7000$ - 600$</option> 
                <option value="750">7000$ - 15000$ - 750$</option> 
                <option value="850">15000$ - 25000$ - 850$</option> 
                <option value="950">25000$ - 35000$ - 950$</option> 
                <option value="2,5">35000$ - выше - 2,5%</option> 
              </select> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <label for="forwarding_escort_services">Услуги экспедирования и сопровождения</label> 
                <input type="text" class="form-control" id="forwarding_escort_services" placeholder="Услуги экспедирования и сопровождения" required value="500"> 
              </div> 
            </div> 
          </div> 
 
          <br> 
          <h2>Расчет</h2> 
 
          <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <span>НДС - 20%</span> 
                <div id="vat">Ожидание входных данных</div> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <span>Пошлина - 10%</span> 
                <div id="duty">Ожидание входных данных</div> 
              </div> 
            </div> 
 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div class="form-group"> 
                <span>Акциз - 0,276</span> 
                <div id="excise_tax">Ожидание входных данных</div> 
              </div> 
            </div> 
          </div> 
 
          <br> 
          <h2>Итого:</h2> 
 
          <div class="row"> 
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> 
              <div id="Total"></div> 
            </div> 
          </div> 
        </form> 
      </div> 
    </div> 
  </div> 
 
 
</body> 
 
</html>

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Проверка на заполненность поля. PHP

Вопрос такой как при условии заполнено ли поле, выводить html c полями PHPПробую так:

182

PHP

PHP constructor: private или public?

Какая разница между public и private в случае с конструктором PHP-класса и на каких основаниях следует выбирать модификатор доступа для конструктора...

200

PHP

Оптимизация изображений с Imagepick

Есть скрипт на сервере, который декодирует изображение base64 и загружает на сервер и скрипт, который оптимизирует его после загрузкиХотелось...

169

PHP

В чем ошибка PHP

когда отправляю запрос на этот php получаю ошибку 500 в php я практический вообще не разбираюсь помогите пожалйуста на этот файл передается пост...

164