Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>8 авг 2025</li>

3 <li>0</li>

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

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

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

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

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

9 Содержание:

10 <ul><li><a>Что мы будем делать</a></li>

11 <li><a>Шаг первый. Подготавливаем среду разработки</a></li>

12 <li><a>Шаг второй. Создаём папку проекта</a></li>

13 <li><a>Шаг третий. Делаем разметку интерфейса</a></li>

14 <li><a>Шаг четвёртый. Улучшаем внешний вид</a></li>

15 <li><a>Шаг пятый. Добавляем логику</a></li>

16 <li><a>Шаг шестой. Тестируем приложение</a></li>

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

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

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

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

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

22 Скриншот: Visual Studio Code / Skillbox MediaВведите в строке поиска Live Preview.

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

24 Скриншот: Visual Studio Code / Skillbox MediaПосле установки вы увидите кнопку запуска сервера - она появится на нижней панели редактора. При запуске расширение откроет HTML-страницу в браузере и будет отслеживать все изменения.

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

26 <ul><li>подсветку синтаксиса,</li>

27 <li>автодополнение кода,</li>

28 <li>навигацию по структуре документа,</li>

29 <li>встроенные подсказки и документацию.</li>

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

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

32 <ul><li>index.html - для разметки интерфейса приложения;</li>

33 <li>style.css - стили приложения, задающие его внешний вид;</li>

34 <li>script.js - для описания логики калькулятора на JavaScript.</li>

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

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

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

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

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

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

41 <ul><li>один выведет числовое значение ИМТ;</li>

42 <li>другой - текстовую категорию: например, "нормальный вес" или "избыточный".</li>

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

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

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

46 <ul><li>Запустите Visual Studio Code.</li>

47 <li>В стартовом окне нажмите "Открыть папку..." и выберите созданную папку проекта.</li>

48 <li>В левой панели найдите файл index.html.</li>

49 <li>Откройте его и вставьте следующий HTML-код:</li>

50 </ul><!DOCTYPE html>  <html lang="ru">  <head> <meta charset="UTF-8">  <title>BMI Calculator</title>  <link href="style.css" rel="stylesheet">  </head> <body>  <h1>Калькулятор ИМТ</h1>  <h3>Следи за своим весом!</h3>  <div class="calculator">  <label for="weight">Вес (кг):</label>  <input type="number" class="weight" id="weight" placeholder="Введите ваш вес">   <label for="height">Рост (см):</label>  <input type="number" class="height" id="height" placeholder="Введите ваш рост">   <button onclick="calculate()">Вычислить</button>  <div class="bmi"></div>  <div class="category"></div>  </div>  <script src="script.js"></script>  </body> </html>Откроем предварительный просмотр с помощью расширения Live Preview. Для этого найдём значок расширения в правом верхнем углу панели редактора. Нажмём на него - откроется новая вкладка браузера, где отобразится наше приложение.

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

52 Скриншот: Visual Studio Code / Skillbox MediaКаждое поле ввода содержит подсказку, заданную через атрибут placeholder. Атрибут type="number" указывает, что поле предназначено для ввода числовых значений, - это исключает ввод текста.

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

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

55 <ul><li>в элемент с классом .bmi выводится числовое значение ИМТ;</li>

56 <li>в элемент с классом .category - текстовая интерпретация (например, "Нормальный вес" или "Ожирение").</li>

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

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

59 <ul><li>font-family определяет используемое семейство шрифтов;</li>

60 <li>text-align выравнивает содержимое по центру страницы;</li>

61 <li>background-color задаёт цвет фона.</li>

62 </ul>Вот как это выглядит в коде:

63 body { font-family: Arial, Helvetica, sans-serif; text-align: center; background-color: #91bbbd; }Зададим цвет для заголовка и подзаголовка с помощью свойства color:

64 h1 { color: #504a4a; } h3 { color: #534f49; }Получим такой вид:

65 Скриншот: Visual Studio Code / Skillbox MediaТеперь нам нужно оформить область, где будут располагаться все элементы калькулятора. Делается это так:

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

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

68 Скриншот: Visual Studio Code / Skillbox MediaДальше определим расположение текстовых меток, полей ввода и кнопки:

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

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

71 Скриншот: Visual Studio Code / Skillbox MediaОсталось только стилизовать кнопку.

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

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

74 Скриншот: Visual Studio Code / Skillbox MediaТеперь всё выглядит как задумано.

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

76 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; }Дальше займёмся логикой калькулятора.

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

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

79 function calculate() { // Здесь будет код }Чтобы JavaScript мог что-то изменить на странице - например, узнать, что ввёл пользователь, или показать результат, - ему нужно "дотянуться" до нужных элементов HTML. Например, до полей ввода, кнопки или блоков, куда мы хотим вывести результат.

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

81 <ul><li>document - это вся HTML-страница.</li>

82 <li>querySelector() - это команда, которая ищет элемент на странице по его классу, тегу, ID или любому другому селектору.</li>

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

84 let weightInput = document.querySelector(".weight");<ul><li>".weight" - это CSS-селектор класса (точка означает, что ищем по классу).</li>

85 <li>weightInput - переменная, в которую сохраняем найденный элемент.</li>

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

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

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

89 let weight = parseFloat(weightInput.value); let height = parseFloat(heightInput.value);<ul><li>weightInput.value - это то, что пользователь ввёл в поле "Вес".</li>

90 <li>heightInput.value - то, что он ввёл в поле "Рост".</li>

91 <li>parseFloat() - превращает текст в число, включая десятичные дроби.</li>

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

93 if (isNaN(weight)) { bmiDiv.innerHTML = "Введите ваш вес!"; categoryDiv.innerHTML = ""; weightInput.focus(); // Ставим курсор в поле "Вес" return; // Останавливаем выполнение функции }isNaN() - это команда, которая проверяет, получилось ли число. Если нет - значит, пользователь ничего не ввёл или допустил ошибку.

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

95 if (isNaN(height)) { bmiDiv.innerHTML = "Введите ваш рост!"; categoryDiv.innerHTML = ""; heightInput.focus(); // Ставим курсор в поле "Рост" return; }Если данные введены правильно, рассчитываем индекс массы тела:

96 let bmi = weight / ((height / 100) ** 2);Здесь:

97 <ul><li>делим вес в килограммах на квадрат роста в метрах;</li>

98 <li>height / 100 - превращаем сантиметры в метры;</li>

99 <li>** 2 - возводим рост в квадрат.</li>

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

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

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

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

104 <ul><li>светло-красный - если вес недостаточный;</li>

105 <li>зелёный - если вес в норме;</li>

106 <li>ярко-красный - при избыточном весе;</li>

107 <li>тёмно-красный - при ожирении.</li>

108 </ul>Вот итоговая функция:

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

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

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

111 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 }; }Функция принимает вес и рост и возвращает результат по формуле расчёта ИМТ.

112 function calculateBMI(weight, height) { return weight / ((height / 100) ** 2); }В зависимости от значения ИМТ функция возвращает объект с категорией и цветом фона.

113 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" }; } }Теперь основная функция стала проще и понятнее. Она просто вызывает вспомогательные функции, собирает результат и отображает его на странице.

114 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; }Полный код будет выглядеть вот так:

115 // Получаем данные от пользователя и проверяем, что они корректны 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.

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

117 Скриншот: Visual Studio Code / Skillbox MediaСценарий второй:вводим вес,но поле с ростом оставляем пустым.

118 Скриншот: Visual Studio Code / Skillbox MediaПосле нажатия кнопки появится сообщение: "Введите ваш рост!". Курсор снова окажется в нужном поле.Вводим рости жмём на кнопку:

119 Скриншот: Visual Studio Code / Skillbox MediaТеперь введём оба значения - вес и рост - и снова нажмём кнопку. Приложение рассчитает индекс массы тела и отобразит результат. Если значение ИМТ попадает в норму, фон калькулятора станет зелёным, а надпись сообщит, что вес нормальный.

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

121 Скриншот: Visual Studio Code / Skillbox MediaИМТ станет выше, и фон сменится на красный. Текст подскажет, что у пользователя ожирение.

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

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

124 <ul><li>Найдите файл index.html в папке проекта.</li>

125 <li>Дважды кликните по нему - по умолчанию он откроется в браузере.</li>

126 <li>Если открылся не браузер, а, например, текстовый редактор, кликните правой кнопкой по файлу и выберите "Открыть с помощью", затем укажите нужный браузер (например, Google Chrome или Firefox).</li>

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

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