Индекс массы тела (ИМТ) — это важный показатель вашего физического здоровья. Он помогает определить, насколько ваш вес соответствует вашему росту. Создание BMI калькулятора с использованием JavaScript, HTML и CSS – отличный способ начать свой путь в мир веб-разработки. В этой статье мы представим вам пошаговое руководство о том, как создать собственный BMI калькулятор.

Подготовка к работе

Перед тем как приступить к созданию калькулятора, убедитесь, что у вас есть следующее:

  1. Знание HTML, CSS и JavaScript: опыт работы с этими технологиями будет полезен, но не обязателен.
  2. Редактор кода: используйте ваш любимый редактор кода, такой как Visual Studio Code, Sublime Text или Notepad++.
  3. Браузер: для проверки вашего калькулятора в реальном времени.
ОНЛАЙН-ПРАКТИКУМ
КАК «ХАКНУТЬ» PYTHON С ПОМОЩЬЮ CHATGPT
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
  • Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
  • Что ждет рынок программирования и почему мы решили сюда пойти
Участвовать бесплатно

Создание файлов HTML, CSS и JavaScript

Шаг 1: HTML

Начнем с создания файла `index.html`. Этот файл будет содержать структуру нашей веб-страницы.

«`html

<!DOCTYPE html>

<html>

<head>

<title>BMI Calculator</title>

<link rel=»stylesheet» type=»text/css» href=»style.css»>

</head>

<body>

<h1>BMI Calculator</h1>

<div id=»calculator»>

<label for=»weight»>Weight (kg):</label>

<input type=»number» id=»weight» placeholder=»Enter your weight» required>

<br>

<label for=»height»>Height (cm):</label>

<input type=»number» id=»height» placeholder=»Enter your height» required>

<br>

<button onclick=»calculateBMI()»>Calculate</button>

<div id=»result»></div>

</div>

<script src=»script.js»></script>

</body>

</html>

«`

В этом HTML-коде мы создали основную структуру страницы, включая поля для ввода веса и роста, а также кнопку «Calculate» для запуска расчета.

Шаг 2: CSS

Теперь создадим файл стилей `style.css` для придания калькулятору привлекательного вида.

«`css

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f0f0f0;

}

h1 {

color: #333;

}

#calculator {

background-color: #fff;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

display: inline-block;

}

label, input, button {

display: block;

margin: 10px 0;

}

button {

background-color: #4caf50;

color: white;

border: none;

padding: 10px 20px;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

«`

Этот CSS-код создает простой и чистый дизайн для калькулятора.

Шаг 3: JavaScript

Создадим файл `script.js` для обработки ввода пользователя и расчета ИМТ.

«`javascript

function calculateBMI() {

var weight = parseFloat(document.getElementById(«weight»).value);

var height = parseFloat(document.getElementById(«height»).value) / 100; // переводим см в метры

var bmi = weight / (height * height);

var result = document.getElementById(«result»);

if (!isNaN(bmi)) {

result.innerHTML = «Your BMI is » + bmi.toFixed(2);

} else {

result.innerHTML = «Please enter valid values.»;

}

}

«`

Функция `calculateBMI` получает вес и рост, затем выполняет расчет ИМТ и выводит результат на страницу.

Шаг 4: результат

Теперь, когда у нас есть все необходимые файлы, откроем `index.html` в браузере. Вы увидите красивый калькулятор BMI, готовый к использованию.

Расчет ИМТ

ИМТ рассчитывается с использованием следующей формулы:

«`

BMI = weight (kg) / (height (m) * height (m))

«`

Где:

— `weight` — ваш вес в килограммах.

— `height` — ваш рост в метрах.

Результат ИМТ интерпретируется следующим образом:

  • Менее 18.5: недостаточный вес.
  • 18.5 — 24.9: нормальный вес.
  • 25 — 29.9: избыточный вес.
  • 30 — 34.9: ожирение I степени.
  • 35 — 39.9: ожирение II степени.
  • 40 и более: ожирение III степени.

Заключение

Создание BMI калькулятора на JavaScript – отличное упражнение для начинающих веб-разработчиков. Вы научились создавать простую веб-страницу, использовать HTML, CSS и JavaScript, а также выполнять базовые математические расчеты. Этот проект также может быть полезным для здорового образа жизни, позволяя отслеживать свой индекс. Надеемся, что данное руководство было полезным, и вы сможете применить полученные знания в своих будущих проектах. А больше учебы – на наших курсах.

3-дневный курс
НАУЧИСЬ СОЗДАВАТЬ TELEGRAM-БОТОВ НА PYTHON С CHATGPT
C НУЛЯ ЗА 3 ДНЯ
  • Освой Python и нейросети и узнай, как гарантированно получить первые 10 заказов
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Создай и прокачай собственного чат-бота
Участвовать бесплатно
Вебинар
ФРИЛАНС И ПРОЕКТНАЯ РАБОТАДЛЯ PYTHON-РАЗРАБОТЧИКА
  • Подарим подборку бесплатных инструментов для написания кода
Участвовать бесплатно