Калькулятор расчета стоимости услуг

by avgustre

HTML

<div class="container-calc">
     <h2>Калькулятор расчета стоимости услуг</h2> 
    <div class="calc-item">
         <h3>Порода дерева</h3>

        <select name='breed_tree' id="breed_tree">
            <option value="3000">сосна</option>
            <option value="4910">лиственница</option>
            <option value="7638">бук</option>
            <option value="10366">дуб</option>
        </select>
    </div>
    <div class="calc-item">
         <h3>Длина лестницы (В метрах погонных:)</h3>

        <input type="text" class="text" name="height_stairs" id="height_stairs" value="1" placeholder="1" />
    </div>
    <div class="calc-item">
         <h3>Ширина марша</h3> 
        <select name='width_march' id="width_march">
            <option selected="selected">Ширина марша</option>
            <option value="2700">0.9</option>
            <option value="3000">1</option>
            <option value="3300">1.1</option>
            <option value="3600">1.2</option>
            <option value="3900">1.3</option>
            <option value="4200">1.4</option>
            <option value="4500">1.5</option>
            <option value="4800">1.6</option>
            <option value="5100">1.7</option>
            <option value="5400">1.8</option>
            <option value="5700">1.9</option>
            <option value="6000">2</option>
        </select>
    </div>
    <div class="calc-item">
         <h3>Общее количество ступеней</h3> 
        <select name='total_stage' id="total_stage">
            <option selected="selected">Выбрать</option>
            <option value="9000">5</option>
				<option value="12000">6</option>
				<option value="15000">7</option>
				<option value="18000">8</option>
				<option value="21000">9</option>
				<option value="2400">10</option>
				<option value="2700">11</option>
				<option value="30000">12</option>
				<option value="33000">13</option>
				<option value="36000">14</option>
				<option value="39000">15</option>
				<option...

CSS

body {
    background: #ddd;
}
.container-calc {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family:'Segoe UI';
    padding: 25px 0;
}
.container-calc > h2 {
    font-size: 24px;
    font-weight: 700;
    color: #c00;
}
.calc-item {
    padding: 10px 0;
}
.calc-item:nth-of-type(even) {
    background: #f7f7f7;
}
.calc-item h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}
#total {
    font-size: 26px;
    font-weight: 700;
}

JavaScript

$("input, select").change(function () {
    calculate();
});


function calculate() {
    var sum = 0;

    $("input[type='radio']:checked, select[name='total_stage'], select[name='painting'], select[name='type_turn'], select[name='type_stairs'], select[name='railing'], select[name='width_march']").each(function () {

        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);

    });

    var a = parseInt($("#breed_tree").val(), 10);
    var b = parseFloat($("#height_stairs").val());

    var c = a * b;

    var total = c + sum;

    $("#total").html(total.toFixed(2));
}