Создаем BMI Calculator на JavaScript: шаг за шагом для начинающих

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

Если вы еще не начали карьеру в IT, приходите на наш бесплатный вебинар, чтобы узнать, как начать зарабатывать с помощью зерокодинга и нейросетей!

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

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

Знание HTML, CSS и JavaScript: опыт работы с этими технологиями будет полезен, но не обязателен.
Редактор кода: используйте ваш любимый редактор кода, такой как Visual Studio Code, Sublime Text или Notepad++.
Браузер: для проверки вашего калькулятора в реальном времени.

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

Шаг 1: HTML

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

«`html

<!DOCTYPE html>

<html>

<head>

<title>BMI Calculator</title>

</head>

<body>

<h1>BMI Calculator</h1>

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

<br>

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

<br>

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

</div>

</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, а также выполнять базовые математические расчеты. Этот проект также может быть полезным для здорового образа жизни, позволяя отслеживать свой индекс. Надеемся, что данное руководство было полезным, и вы сможете применить полученные знания в своих будущих проектах. А больше учебы – на наших курсах.