Калькулятор расчета стоимости отделочных работ на чистом JavaScript

Такой калькулятор я использовал в одном из моих проектов, который я выполнял для организации, занимающейся отделкой и ремонтом квартир и домов.

Поставленной целью было сделать минималистический калькулятор с выбором класса ремонта (эконом, капитальный и евро), вводом площади помещения и выбором услуги, при необходимости, демонтажа старого ремонта. После ввода всех этих пунктов, калькулятор автоматически рассчитывает стоимость ремонта, на остове заданной стоимости ремонта и демонтажа за квадратный метр помещения.

Сейчас мы рассмотрим и разберем весь процесс разработки такого калькулятора, а в конце статьи я выложу ссылку на исходники, а вы можете использовать их в своих проектах.

Html разметка

Сейчас мы разберем html разметку калькулятора. Некоторые стили, такие как расположение текста и размеры текста, я сразу вставил в разметку.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор расчета площади</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container_calc">
        <div class="container">
           <h3 style="text-align: center;">Калькулятор расчета стоимости ремонта</h3>         
           <p style="text-align: center;">Класс ремонта:
           <select onchange="calc()" id="type_design">
           <option value="0">Выбрать</option>
           <option value="5000">Эконом</option>
           <option value="7000">Капитальный</option>
           <option value="10000">Евро</option> 
           </p>
           </select>
           <p style="text-align: center;">Площадь помещения:<input type="text" class="ploschad" id="count" value="0" onchange="calc()"/></p>
           <p style="padding-left: 15px;">Требуется демонтаж:<input type="checkbox" onchange="calc()" value="300" id="is_html"/></p>
           <p style="text-align: center; font-size: 12px;">*Цена является ознакомительной и может отличаться от фактической</p>                      
        </div>
        <div class="cena">Стоимость ремонта: <span id="result">0</span> RUB.</div>                   
    </div>
</body>
</html>

Создаем основной контейнер «container_calc» и вспомогательный «container», для дальнейших манипуляций в css.

Тегом «select» с встроенным тегом «option» с атрибутом «value», создаем раскрывающийся список. Input type=’text’ создает поле для ввода площади, а input type=’checkbox’ создает ‘галочку’, для отметки надобности демонтажа. Обращаю внимание на то, что в checkbox прописан атрибут value, со значением 300 – это цена за квадратный метр демонтажа. В поле div с классом «cena», будет выводиться результат подсчетов.

Вкратце разобрали структуру нашего калькулятора. Если вы правильно все сделали, то у вас должно получится вот так:

JavaScript

Теперь разберем именно программную часть калькулятора и заставим его выполнять свои функции.

function calc() {
           let type_design = document.getElementById("type_design");
           let is_html = document.getElementById("is_html");
           let count = document.getElementById("count");
           let result = document.getElementById("result"); 
           let price = 0;
              price += parseInt(type_design.options[type_design.selectedIndex].value);
              price += (is_html.checked == true) ? parseInt(is_html.value) : 0;
              price = parseInt(count.value) * price;
              result.innerHTML = price;
}

Здесь все просто:

  • Объявляем переменные (let) в соответствии с id элементов, которые мы присвоили в html;
  • Прописываем саму работу калькулятора и выводим результат в «result.innerHTML = price»

Теперь проверим работу калькулятора, для этого выберите класс ремонта и введите площадь помещения, результат появится в графе «стоимость ремонта».

Если вы сделали все правильно, то калькулятор должен работать как на картинке выше.

Стили (CSS)

А теперь стилизуем калькулятор:

.container_calc {
    width: 325px;
	height: auto;	
	margin: 100px auto;
    background: #c4aacc;
	background: linear-gradient(#497ad6, #7ea9bb);
    outline: 2px solid rgb(7, 214, 204); 
}

.container {
    padding: 20px 20px 9px;
    color: rgb(255, 255, 255);

}

.cena {
    padding-left: 35px;
    background-color: #0a51d4;
    padding: 20px;
    text-align: center;
    font-weight: 700;
    color: white;
}

.ploschad {
    width: 100px;
}

#type_design {
    width: 148px;
}

Здесь нет ничего сверхъестественного:

  • задаем ширину, длину, отступы и фон для главного контейнера (container_calc);
  • задаем внутренние отступы (padding) для container;
  • задаем стили результату наших расчетов (cena), а именно: внешние отступы (padding), background (цвет фона), центрируем текст (text-align:center), задаем насыщенность текста (font-weight) и цвет (color);
  • задаем размеры (width) для полей с классом ploschad и с id type_design.

Конечный результат

Окончательный результат наших стараний должен выглядеть вот так:

Ссылка на проект и исходный код: area calculator (codepen.io)

Спасибо за внимание!