Индекс массы тела (ИМТ) — это важный показатель вашего физического здоровья. Он помогает определить, насколько ваш вес соответствует вашему росту. Создание BMI калькулятора с использованием JavaScript, HTML и CSS – отличный способ начать свой путь в мир веб-разработки. В этой статье мы представим вам пошаговое руководство о том, как создать собственный BMI калькулятор.
Подготовка к работе
Перед тем как приступить к созданию калькулятора, убедитесь, что у вас есть следующее:
- Знание 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> <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, а также выполнять базовые математические расчеты. Этот проект также может быть полезным для здорового образа жизни, позволяя отслеживать свой индекс. Надеемся, что данное руководство было полезным, и вы сможете применить полученные знания в своих будущих проектах. А больше учебы – на наших курсах.