Пишем калькулятор ИМТ на HTML, CSS и JavaScript
2026-02-21 10:59 Diff
https://skillbox.ru/media/code/pishem-kalkulyator-imt-na-html-css-i-javascript/

#статьи

  • 8 авг 2025
  • 0

Простой проект для начинающих фронтендеров.

Иллюстрация: Оля Ежак для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Индекс массы тела (ИМТ) помогает оценить, соответствует ли вес росту. С его помощью легко понять, можно ли съесть ещё один пирожок или пора садиться на диету.

В этой статье создадим с нуля простой калькулятор ИМТ: сверстаем HTML-форму, напишем скрипт на JS и подключим CSS-стили. Всё будет работать прямо в браузере — достаточно открыть HTML-файл.

Содержание:

Рассчитать ИМТ достаточно просто: нужно вес в килограммах разделить на квадрат роста в метрах. Этот индекс ещё называется индексом Кетле — по фамилии известного бельгийского математика, астронома, метеоролога и социолога Адольфа Кетле, который как раз и ввёл в обиход понятие индекса массы тела.

Калькулятор мы будем писать с применением HTML, JavaScript и CSS. На HTML напишем разметку интерфейса, то есть разместим как надо все необходимые компоненты. На JavaScript опишем всю логику приложения. Именно этот код и будет заниматься вычислением индекса Кетле и не только. С помощью CSS мы раскрасим приложение, чтобы оно выглядело красиво. Вот так будет выглядеть результат:

Скриншот: Visual Studio Code / Skillbox Media

Для работы с HTML, CSS и JavaScript подойдёт любой современный редактор кода, но мы будем использовать Visual Studio Code — один из самых популярных и удобных. Он бесплатный, работает на Windows, macOS и Linux и легко настраивается под разные задачи с помощью расширений.

Чтобы было удобнее работать с HTML-файлами, можно установить расширение Live Preview. Оно позволяет открывать вашу страницу в браузере прямо из редактора и автоматически обновлять её при каждом изменении в коде.

После запуска редактора откройте вкладку Extensions (значок из четырёх квадратов на боковой панели).

Скриншот: Visual Studio Code / Skillbox Media

Введите в строке поиска Live Preview.

Выберите расширение от Microsoft и нажмите Install.

Скриншот: Visual Studio Code / Skillbox Media

После установки вы увидите кнопку запуска сервера — она появится на нижней панели редактора. При запуске расширение откроет HTML-страницу в браузере и будет отслеживать все изменения.

Дополнительные расширения для HTML, CSS и JavaScript устанавливать не нужно — VS Code уже по умолчанию поддерживает:

  • подсветку синтаксиса,
  • автодополнение кода,
  • навигацию по структуре документа,
  • встроенные подсказки и документацию.

Сначала создадим необходимые файлы. Перед началом работы создайте папку с именем, например bmi-calculator, в любом удобном месте на компьютере.

Внутри неё разместите три пустых файла:

  • index.html — для разметки интерфейса приложения;
  • style.css — стили приложения, задающие его внешний вид;
  • script.js — для описания логики калькулятора на JavaScript.

Теперь всё готово к началу разработки приложения.

Среда разработки настроена, проектная папка создана — пора переходить к вёрстке. Но прежде чем писать HTML, давайте разберёмся, какие элементы понадобятся нашему калькулятору и зачем.

Для вычисления индекса массы тела (ИМТ) нужно ввести два значения: вес и рост. Эти данные пользователь вводит вручную, поэтому используем два поля ввода — <input>: одно для веса, другое для роста.

Чтобы интерфейс был понятным, рядом с каждым полем добавим подписи — теги <label>. Они подскажут, что именно нужно ввести.

Далее понадобится кнопка (<button>), которая запустит расчёт.

Результат расчёта отобразим на странице с помощью двух тегов <div>:

  • один выведет числовое значение ИМТ;
  • другой — текстовую категорию: например, «нормальный вес» или «избыточный».

Все эти элементы мы поместим внутрь контейнера <div class="calculator«>. Он поможет организовать структуру, стилизовать блок и работать с ним через CSS и JavaScript.

Также добавим заголовок страницы — <h1>, чтобы сразу было понятно, что перед нами калькулятор ИМТ, и подзаголовок — <h3> — как краткий призыв к действию: например, «Следи за своим весом!». Оба тега разместим вне основного контейнера, чтобы сохранить логическую структуру документа.

Теперь можно открыть редактор и приступить к работе:

  • Запустите Visual Studio Code.
  • В стартовом окне нажмите «Открыть папку...» и выберите созданную папку проекта.
  • В левой панели найдите файл index.html.
  • Откройте его и вставьте следующий HTML-код:
<!DOCTYPE html> <!-- Объявление типа документа: HTML5 --> <html lang="ru"> <!-- Начало документа, язык -- русский --> <head> <meta charset="UTF-8"> <!-- Устанавливает кодировку символов: UTF-8 --> <title>BMI Calculator</title> <!-- Название страницы на вкладке браузера --> <link href="style.css" rel="stylesheet"> <!-- Подключение внешнего CSS-файла --> </head> <body> <!-- Основное содержимое страницы --> <h1>Калькулятор ИМТ</h1> <!-- Главный заголовок страницы --> <h3>Следи за своим весом!</h3> <!-- Слоган --> <div class="calculator"> <!-- Контейнер для калькулятора ИМТ --> <label for="weight">Вес (кг):</label> <!-- Подпись к полю ввода веса --> <input type="number" class="weight" id="weight" placeholder="Введите ваш вес"> <!-- Поле ввода веса, принимает только числа --> <br> <!-- Перенос строки (используется для отступа между элементами) --> <label for="height">Рост (см):</label> <!-- Подпись к полю ввода роста --> <input type="number" class="height" id="height" placeholder="Введите ваш рост"> <!-- Поле ввода роста, принимает только числа --> <br> <!-- Перенос строки --> <button onclick="calculate()">Вычислить</button> <!-- Кнопка запуска расчёта ИМТ. Вызывает функцию calculate() из JS --> <div class="bmi"></div> <!-- Блок для вывода рассчитанного значения ИМТ --> <div class="category"></div> <!-- Блок для вывода текстовой категории ИМТ (например, "Норма") --> </div> <!-- Конец блока .calculator --> <script src="script.js"></script> <!-- Подключение внешнего JavaScript-файла с логикой расчёта --> </body> </html>

Откроем предварительный просмотр с помощью расширения Live Preview. Для этого найдём значок расширения в правом верхнем углу панели редактора. Нажмём на него — откроется новая вкладка браузера, где отобразится наше приложение.

Скриншот: Visual Studio Code / Skillbox Media

На этом этапе приложение выглядит минималистично — просто текст и поля ввода. Это нормально: HTML уже готов, CSS-файл подключён, но пока в нём нет стилей. Следующий шаг — добавить оформление и сделать интерфейс симпатичнее.

Скриншот: Visual Studio Code / Skillbox Media

Каждое поле ввода содержит подсказку, заданную через атрибут placeholder. Атрибут type="number« указывает, что поле предназначено для ввода числовых значений, — это исключает ввод текста.

Если нажать на кнопку <button>, вызывается функция calculate(), которая выполняет расчёт.

Результаты отображаются в двух блоках <div>, расположенных под кнопкой:

  • в элемент с классом .bmi выводится числовое значение ИМТ;
  • в элемент с классом .category — текстовая интерпретация (например, «Нормальный вес» или «Ожирение»).

Стили подключаются через тег <link>, а скрипт — с помощью тега <script>. В следующих шагах мы добавим CSS и JavaScript, чтобы калькулятор стал полноценным приложением.

Откроем файл style.css и займёмся внешним видом приложения. Для начала зададим базовые стили для тега body: шрифт, выравнивание текста и цвет фона.

  • font-family определяет используемое семейство шрифтов;
  • text-align выравнивает содержимое по центру страницы;
  • background-color задаёт цвет фона.

Вот как это выглядит в коде:

body { font-family: Arial, Helvetica, sans-serif; text-align: center; background-color: #91bbbd; }

Зададим цвет для заголовка и подзаголовка с помощью свойства color:

h1 { color: #504a4a; } h3 { color: #534f49; }

Получим такой вид:

Скриншот: Visual Studio Code / Skillbox Media

Теперь нам нужно оформить область, где будут располагаться все элементы калькулятора. Делается это так:

.calculator { background-color: #c8c98f; padding: 40px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); display: inline-block; }

Здесь мы задаём фоновый цвет (background-color), внутренние отступы (padding), скругление углов (border-radius) и добавляем лёгкую тень (box-shadow). Свойство display: inline-block указывает, что элемент должен вести себя как блочный, но занимать только ту ширину, которая нужна для его содержимого.

В результате получится аккуратный контейнер:

Скриншот: Visual Studio Code / Skillbox Media

Дальше определим расположение текстовых меток, полей ввода и кнопки:

label, input, button { display: table-cell; margin: 10px 0; }

Здесь снова используется свойство display, но с другим значением — table-cell. Оно заставляет элементы (label, input и button) выстраиваться по принципу таблицы: каждый занимает отдельную «ячейку» в строке. Дополнительно с помощью свойства margin задаются вертикальные отступы между элементами.

В результате элементы располагаются компактно и ровно:

Скриншот: Visual Studio Code / Skillbox Media

Осталось только стилизовать кнопку.

button { background-color: #546154; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } button:hover { background-color: #6e806f; }

Мы задаём для неё фоновый цвет, цвет текста, убираем рамку (border: none), добавляем отступы, скругляем углы и меняем курсор на «указатель» при наведении. Дополнительно с помощью button:hover задаём стиль кнопки при наведении — она будет слегка менять цвет.

В результате получим:

Скриншот: Visual Studio Code / Skillbox Media

Теперь всё выглядит как задумано.

Вот итоговый CSS-код:

body { font-family: Arial, Helvetica, sans-serif; text-align: center; background-color: #91bbbd; } h1 { color: #504a4a; } h3 { color: #534f49; } .calculator { background-color: #c8c98f; padding: 40px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); display: inline-block; } label, input, button { display: table-cell; margin: 10px 0; } button { background-color: #546154; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } button:hover { background-color: #6e806f; }

Дальше займёмся логикой калькулятора.

Научим наше приложение вычислять ИМТ и интерпретировать результаты.

Сначала напишем простую заготовку функции с именем calculate() — именно она будет запускаться, когда пользователь нажмёт кнопку «Вычислить».

function calculate() { // Здесь будет код }

Чтобы JavaScript мог что-то изменить на странице — например, узнать, что ввёл пользователь, или показать результат, — ему нужно «дотянуться» до нужных элементов HTML. Например, до полей ввода, кнопки или блоков, куда мы хотим вывести результат.

Для этого используется специальная команда — document.querySelector.

  • document — это вся HTML-страница.
  • querySelector() — это команда, которая ищет элемент на странице по его классу, тегу, ID или любому другому селектору.

Допустим, у нас есть поле ввода с классом weight. Чтобы получить доступ к этому полю из JavaScript, пишем:

let weightInput = document.querySelector(".weight");
  • ".weight" — это CSS-селектор класса (точка означает, что ищем по классу).
  • weightInput — переменная, в которую сохраняем найденный элемент.

Аналогичным образом мы можем получить и другие элементы:

let heightInput = document.querySelector(".height"); // Поле ввода роста let bmiDiv = document.querySelector(".bmi"); // Блок, в котором появится результат ИМТ let categoryDiv = document.querySelector(".category"); // Блок с текстовым пояснением

Теперь давайте получим значения, которые пользователь ввёл в поля «Вес» и «Рост».

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

let weight = parseFloat(weightInput.value); let height = parseFloat(heightInput.value);
  • weightInput.value — это то, что пользователь ввёл в поле «Вес».
  • heightInput.value — то, что он ввёл в поле «Рост».
  • parseFloat() — превращает текст в число, включая десятичные дроби.

Дальше мы проверим, ввёл ли пользователь вообще какие-то данные. Может быть, он случайно нажал кнопку «Вычислить», ничего не написав в поля. В этом случае показываем сообщение с просьбой ввести данные, а курсор ставим в нужное поле, чтобы человеку было удобнее его сразу заполнить:

if (isNaN(weight)) { bmiDiv.innerHTML = "Введите ваш вес!"; categoryDiv.innerHTML = ""; weightInput.focus(); // Ставим курсор в поле «Вес» return; // Останавливаем выполнение функции }

isNaN() — это команда, которая проверяет, получилось ли число. Если нет — значит, пользователь ничего не ввёл или допустил ошибку.

Такая же проверка для роста:

if (isNaN(height)) { bmiDiv.innerHTML = "Введите ваш рост!"; categoryDiv.innerHTML = ""; heightInput.focus(); // Ставим курсор в поле «Рост» return; }

Если данные введены правильно, рассчитываем индекс массы тела:

let bmi = weight / ((height / 100) ** 2);

Здесь:

  • делим вес в килограммах на квадрат роста в метрах;
  • height / 100 — превращаем сантиметры в метры;
  • ** 2 — возводим рост в квадрат.

Также создаём переменную category, в которую чуть позже запишем текст с расшифровкой результата:

let category = "";

Теперь задаём соответствующее значение для переменной category в зависимости от значения переменной bmi. Когда пользователь ввёл данные и мы рассчитали его ИМТ, нужно понять, в какую категорию он попадает: это может быть недостаточный вес, норма, избыточный вес или ожирение. Чтобы определить это, мы используем условную конструкцию if...else if...else — она помогает выполнять разные действия в зависимости от значения переменной bmi.

Вот как это работает:

if (bmi < 18.5) { category = "Недостаточный вес"; calculator.style.backgroundColor = "#dd7979"; // Светло-красный -- недостаточный вес } else if (bmi < 25) { category = "Нормальный вес"; calculator.style.backgroundColor = "#6ecf66"; // Зелёный -- всё в порядке } else if (bmi < 30) { category = "Избыточный вес"; calculator.style.backgroundColor = "#da5050"; // Ярко-красный -- есть лишний вес } else { category = "Ожирение"; calculator.style.backgroundColor = "#d31c1c"; // Тёмно-красный -- ожирение, серьёзное превышение }

Каждое условие сравнивает значение bmi с заданными порогами. Если оно подходит, присваивается текстовая интерпретация в переменную category, а фон калькулятора (.calculator) окрашивается в определённый цвет:

  • светло-красный — если вес недостаточный;
  • зелёный — если вес в норме;
  • ярко-красный — при избыточном весе;
  • тёмно-красный — при ожирении.

Вот итоговая функция:

function calculate() { let calculator = document.querySelector(".calculator"); let weightInput = document.querySelector(".weight"); let heightInput = document.querySelector(".height"); let bmiDiv = document.querySelector(".bmi"); let categoryDiv = document.querySelector(".category"); let weight = parseFloat(weightInput.value); let height = parseFloat(heightInput.value); if (isNaN(weight)) { bmiDiv.innerHTML = "Введите ваш вес!"; categoryDiv.innerHTML = ""; weightInput.focus(); return; } if (isNaN(height)) { bmiDiv.innerHTML = "Введите ваш рост!" categoryDiv.innerHTML = ""; heightInput.focus(); return; } let bmi = weight / ((height / 100) ** 2); let category = ""; if (bmi < 18.5) { category = "Недостаточный вес"; calculator.style.backgroundColor = "#dd7979" } else if (bmi < 25) { category = "Нормальный вес"; calculator.style.backgroundColor = "#6ecf66" } else if (bmi < 30) { category = "Избыточный вес"; calculator.style.backgroundColor = "#da5050" } else { category = "Ожире��ие"; calculator.style.backgroundColor = "#d31c1c" } bmiDiv.innerHTML = "Ваш ИМТ: " + bmi.toFixed(2); categoryDiv.innerHTML = category; }

Функция calculate() работает корректно, но получилась довольно объёмной — она и получает данные, и проверяет их, и вычисляет ИМТ, и оформляет результат. Это не ошибка, но такой код сложнее читать и поддерживать. Поэтому мы разобьём его на отдельные небольшие функции — так будет проще ориентироваться и вносить изменения при необходимости.

Эта функция находит поля ввода веса и роста, получает введённые значения и проверяет, что они корректны. Если что-то не так, показываем сообщение об ошибке и возвращаем null.

function getUserData() { let weightInput = document.querySelector(".weight"); let heightInput = document.querySelector(".height"); let bmiDiv = document.querySelector(".bmi"); let categoryDiv = document.querySelector(".category"); let weight = parseFloat(weightInput.value); let height = parseFloat(heightInput.value); if (isNaN(weight)) { bmiDiv.innerHTML = "Введите ваш вес!"; categoryDiv.innerHTML = ""; weightInput.focus(); return null; } if (isNaN(height)) { bmiDiv.innerHTML = "Введите ваш рост!"; categoryDiv.innerHTML = ""; heightInput.focus(); return null; } return { weight, height }; }

Функция принимает вес и рост и возвращает результат по формуле расчёта ИМТ.

function calculateBMI(weight, height) { return weight / ((height / 100) ** 2); }

В зависимости от значения ИМТ функция возвращает объект с категорией и цветом фона.

function getCategory(bmi) { if (bmi < 18.5) { return { category: "Недостаточный вес", color: "#dd7979" }; } else if (bmi < 25) { return { category: "Нормальный вес", color: "#6ecf66" }; } else if (bmi < 30) { return { category: "Избыточный вес", color: "#da5050" }; } else { return { category: "Ожирение", color: "#d31c1c" }; } }

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

function calculate() { const calculator = document.querySelector(".calculator"); const bmiDiv = document.querySelector(".bmi"); const categoryDiv = document.querySelector(".category"); const userData = getUserData(); if (!userData) return; const bmi = calculateBMI(userData.weight, userData.height); const result = getCategory(bmi); calculator.style.backgroundColor = result.color; bmiDiv.innerHTML = "Ваш ИМТ: " + bmi.toFixed(2); categoryDiv.innerHTML = result.category; }

Полный код будет выглядеть вот так:

// Получаем данные от пользователя и проверяем, что они корректны function getUserData() { let weightInput = document.querySelector(".weight"); let heightInput = document.querySelector(".height"); let bmiDiv = document.querySelector(".bmi"); let categoryDiv = document.querySelector(".category"); let weight = parseFloat(weightInput.value); let height = parseFloat(heightInput.value); if (isNaN(weight)) { bmiDiv.innerHTML = "Введите ваш вес!"; categoryDiv.innerHTML = ""; weightInput.focus(); return null; } if (isNaN(height)) { bmiDiv.innerHTML = "Введите ваш рост!"; categoryDiv.innerHTML = ""; heightInput.focus(); return null; } return { weight, height }; } // Вычисляем ИМТ по формуле: вес / (рост в метрах)^2 function calculateBMI(weight, height) { return weight / ((height / 100) ** 2); } // Определяем категорию по значению ИМТ и цвет фона function getCategory(bmi) { if (bmi < 18.5) { return { category: "Недостаточный вес", color: "#dd7979" }; } else if (bmi < 25) { return { category: "Нормальный вес", color: "#6ecf66" }; } else if (bmi < 30) { return { category: "Избыточный вес", color: "#da5050" }; } else { return { category: "Ожирение", color: "#d31c1c" }; } } // Основная функция: запускает расчёт и выводит результат function calculate() { const calculator = document.querySelector(".calculator"); const bmiDiv = document.querySelector(".bmi"); const categoryDiv = document.querySelector(".category"); const userData = getUserData(); if (!userData) return; const bmi = calculateBMI(userData.weight, userData.height); const result = getCategory(bmi); calculator.style.backgroundColor = result.color; bmiDiv.innerHTML = "Ваш ИМТ: " + bmi.toFixed(2); categoryDiv.innerHTML = result.category; }

Теперь, когда код готов, можно протестировать калькулятор прямо во встроенном браузере через расширение Live Preview.

Начнём с самого простого случая: оставим оба поля пустыми и нажмём кнопку. Приложение сразу подскажет, что нужно ввести вес. Курсор автоматически переместится в поле ввода веса.

Скриншот: Visual Studio Code / Skillbox Media

Сценарий второй: вводим вес, но поле с ростом оставляем пустым.

Скриншот: Visual Studio Code / Skillbox Media

После нажатия кнопки появится сообщение: «Введите ваш рост!». Курсор снова окажется в нужном поле. Вводим рост и жмём на кнопку:

Скриншот: Visual Studio Code / Skillbox Media

Теперь введём оба значения — вес и рост — и снова нажмём кнопку. Приложение рассчитает индекс массы тела и отобразит результат. Если значение ИМТ попадает в норму, фон калькулятора станет зелёным, а надпись сообщит, что вес нормальный.

Попробуем изменить данные, например уменьшим рост.

Скриншот: Visual Studio Code / Skillbox Media

ИМТ станет выше, и фон сменится на красный. Текст подскажет, что у пользователя ожирение.

Это значит, что калькулятор работает правильно: проверяет данные, рассчитывает ИМТ и корректно реагирует на результаты.

Калькулятор можно запускать не только через Live Preview, но и напрямую в браузере. Для этого:

  • Найдите файл index.html в папке проекта.
  • Дважды кликните по нему — по умолчанию он откроется в браузере.
  • Если открылся не браузер, а, например, текстовый редактор, кликните правой кнопкой по файлу и выберите «Открыть с помощью», затем укажите нужный браузер (например, Google Chrome или Firefox).

Вот так, например, выглядит работающий калькулятор в браузере Firefox:

Скриншот: Firefox / Skillbox Media Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе