Пишем калькулятор ИМТ на HTML, CSS и JavaScript

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

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

Содержание:

• Что мы будем делать
• Шаг первый. Подготавливаем среду разработки
• Шаг второй. Создаём папку проекта
• Шаг третий. Делаем разметку интерфейса
• Шаг четвёртый. Улучшаем внешний вид
• Шаг пятый. Добавляем логику
• Шаг шестой. Тестируем приложение

Что мы будем делать

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

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

Шаг первый

Подготавливаем среду разработки

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

Читайте также:

Visual Studio Code: установка, настройка, русификация и список горячих клавиш

Устанавливаем Live Preview

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

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

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

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

После установки вы увидите кнопку запуска сервера — она появится на нижней панели редактора. При запуске расширение откроет 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. Для этого найдём значок расширения в правом верхнем углу панели редактора. Нажмём на него — откроется новая вкладка браузера, где отобразится наше приложение.

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

Каждое поле ввода содержит подсказку, заданную через атрибут 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;
    }

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

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

.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 указывает, что элемент должен вести себя как блочный, но занимать только ту ширину, которая нужна для его содержимого.

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

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

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

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

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

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

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 задаём стиль кнопки при наведении — она будет слегка менять цвет.

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

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

Вот итоговый 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: как их объявлять, вызывать и использовать без ошибок

Чтобы 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) окрашивается в определённый цвет:

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

Читайте также:

Условные операторы, if, else и switch в JavaScript: с чего начать и как не ошибиться

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

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

Получаем и проверяем данные: getUserData()

Эта функция находит поля ввода веса и роста, получает введённые значения и проверяет, что они корректны. Если что-то не так, показываем сообщение об ошибке и возвращаем 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 };
}

Вычисляем ИМТ: calculateBMI(weight, height)

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

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

Определяем категорию: getCategory(bmi)

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

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" };
  }
}

Основная функция: calculate()

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

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.

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

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

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

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

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

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

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

Как открыть калькулятор в браузере

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

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

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