Создание собственного калькулятора ИМТ: пошаговое руководство
programming web-development javascript html5

Создание собственного калькулятора ИМТ: пошаговое руководство

20 марта 2023 г.

В этом блоге;

  • Я покажу вам пошаговый процесс создания простого калькулятора ИМТ.

  • Я предполагаю, что вы можете создать для этого файл HTML и CSS, поэтому я не делаю это за вас. Тем не менее, я предоставлю свою версию кода HTML и CSS ниже для вашего удобства.

В этом блоге я сосредоточусь в основном на JavaScript-части этого калькулятора ИМТ.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>BMI CALCULATOR</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <h1 style="text-align: center">BMI CALCULATOR</h1>
      <h3>What is BMI?</h3>
      <p class="para">                                              
       BMI stands for Body Mass Index, which is a measure of body fat  based on a person's weight and height. It is commonly used to assess whether a person is underweight, normal weight, overweight, or obese. BMI is calculated by dividing a person's weight (in kilograms) by their height(in meters squared).
      </p>
      <p class="para">                                                 
        BMI is a useful tool to assess whether a person is at a healthy   weightor not, but it is not always a perfect indicator of health. For example,someone with a high amount of muscle mass may have a high BMI even though they are not overweight or obese. Additionally, BMI does not take into account other factors such as age, sex, or body composition, so it should be used in conjunction with other measures to assess overall
        health.
      </p>
      <h3>Ranges</h3>
      <p class="para">
        BMI ranges are typically categorized into different levels of bodyweight and are used to indicate whether a person is underweight, normalweight, overweight, or obese. The World Health Organization (WHO) has established the following BMI ranges for adults:
      </p>
      <ul class="para">
        <li>Underweight: BMI below 18.5</li>
        <li>Normal weight: BMI between 18.5 and 24.9</li>
        <li>Overweight: BMI between 25 and 29.9</li>
        <li>Obese: BMI 30 or higher</li>
      </ul>

      <section class="work">
        <h2 class="top">Calculate your BMI</h2>
        <p class="weight"><b>Enter Your Weight in kg</b></p>
        <input type="number" id="weightInput" />
        <p class="height"><b>Enter your height in meters</b></p>

        <input type="number" id="heightInput" />
        <br />
        <button
          type="submit
      "
          id="btn"
        >
          Calculate
        </button>
      </section>

      <h1 id="result">Your BMI is</h1>
      <footer>
        <p class="foot" style="text-align: center">
          Made with ❤ by SHASHANK SHARMA &copy;2023
        </p>
      </footer>
    </div>

    <script src="script.js"></script>
  </body>
</html>

body {
  margin: 0;
  padding-left: 350px;
  padding-right: 350px;
  overflow: auto;
  box-sizing: border-box;
  background-color: #ecf2ff;
}
div {
  border: 5px solid black;
  padding: 40px;
}
.top {
  font-size: 40px;
  color: white;
}

.para {
  font-size: 18px;
}
.work {
  text-align: center;
  background-color: #3e54ac;
}

#result {
  text-align: center;
}

.weight {
  font-size: 24px;
}
.height {
  font-size: 24px;
}
.foot {
  color: black;
  border: 2px solid black;
  padding: 20px;
  font-size: 20px;
}
#btn {
  margin-top: 15px;
  padding: 9px 40px;
  background-color: black;
  color: white;
}

/* CSS MEDIA QUERIES */
@media only screen and (max-width: 600px) {
  /* Adjust font sizes */
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.2rem;
  }
  p {
    font-size: 1rem;
  }
  /* Center align text */
  h1,
  h2,
  h3,
  p {
    text-align: center;
  }
  /* Adjust padding and margins */
  body {
    padding: 0.5rem;
  }
  .para {
    margin: 0.5rem;
  }
  /* Adjust input field sizes */
  #weightInput,
  #heightInput {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

@media only screen and (min-width: 600px) and (max-width: 1200px) {
  /* Adjust font sizes */
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  p {
    font-size: 1.2rem;
  }
  /* Adjust padding and margins */
  body {
    padding: 1rem;
  }
  .para {
    margin: 1rem;
  }
  /* Adjust input field sizes */
  #weightInput,
  #heightInput {
    width: 50%;
    margin-bottom: 1rem;
  }
}

Теперь давайте перейдем к самой интересной части, а именно к JavaScript.

  • Чтобы вам было легче понять, я разделил коды на 7 шагов, чтобы вы могли четко понять логику, не создавая путаницы.

### ШАГ 1

  1. var :- создание переменной
  2. valueOne :- имя, которое мы дали нашей переменной
  3. документ: – документ, из которого мы выбираем элемент.
  4. getElementById(“ ”):  селектор идентификатора для выбора элемента с уникальным идентификатором.

  5. (“weightInput”): – название идентификатора.

Соединяя все вышеперечисленные части, наш код будет выглядеть примерно так;

<код>javascript var valueOne = document.getElementById("weightInput");

* Давайте углубимся в это и попытаемся ясно понять это:-

* Первым делом я создаю переменную для хранения значения, которое пользователь вводит в поле ввода.

  • Далее я даю переменной имя «valueOne», вы можете дать ей любое имя.

    * Теперь, после создания переменной и присвоения ей имени, я могу перейти к интересной части, получая доступ к значению, введенному пользователем в поле ввода.

    * Как уже известно, я могу выбрать любой элемент, изменить его значение, получить от него значение и сделать многое другое с помощью DOM (объектная модель документа).

    * сначала я выбираю документ, из которого я буду получать доступ к информации, в данном случае HTML-документ.

    * После этого я выбираю нужный элемент из документа с помощью селектора.

* Затем я присваиваю уникальный идентификатор выбираемому элементу, поэтому я использую селектор идентификатора: — getElementById(“ ”).

* После всех этих действий я получу значение, введенное пользователем в поле «weightInput».

ШАГ 2

var valueTwo = document.getElementById("heightInput");

* Для шага 2 я делаю все то же самое, что и для шага 1, за исключением имени переменной и имени идентификатора. * Здесь я дал переменной новое имя, чтобы сохранить значение «heightInput», введенное пользователем. * Я также изменил имя идентификатора на #heightInput * Я хочу хранить значения роста и веса отдельно, поэтому я меняю эти две вещи.

ШАГ 3

Теперь, после получения обоих значений и сохранения этих значений в наших переменных, пришло время выполнить вычисления.

Я могу выполнить расчет двумя способами:-

Метод 1 – простое получение значений, сохранение их в переменных и выполнение вычислений.

Способ 2: — с помощью функции()

Давайте рассмотрим оба метода и выясним, какой из них нам подходит.

Метод 1: – просто получить значения, сохранить их в переменных и выполнить расчет

var weight = document.getElementById("weightInput").value;
var height = document.getElementById("heightInput").value;
var bmi = Math.round(weight / (height * height));

* Здесь я сохраняю «weightInput» в новой переменной с именем «weight». * Точно так же я сохраняю «heightInput» в новой переменной с именем «height». * Формула для расчета ИМТ представляет собой деление веса на квадрат роста. * поэтому я создал еще одну переменную, дал ей имя «bmi» и применил к ней формулу. * Как вы видите, там написано Math.round, и вы можете подумать, для чего это нужно? * Итак, что такое мат. round достаточно округлить результат до ближайшего целого числа. * Допустим, пользователь вводит вес 65 кг и рост 1,63 метра. Таким образом, без Math.round мы получаем следующий вывод: // 24.4646016 * Теперь, чтобы округлить это, мы используем Math.round, и тот же вывод выглядит примерно так// 24.

Способ 2: — с помощью функции()

function bmiCalc(weight, height) {
  var bmi = Math.round(weight / (height * height));
  return bmi;
}

Здесь

* Сначала я создал функцию и дал ей имя bmiCalc * Как уже известно, функция принимает два аргумента. В данном случае эти два аргумента — «вес» и «рост». * Затем я сделал то же самое, что и раньше, вставил формулу в новую переменную с помощью Math.round * вернуть ИМТ => возвращает результат после завершения вычисления.

:::подсказка Que) КАКОЙ МЕТОД ЗДЕСЬ ИСПОЛЬЗОВАТЬ?

Ответ) Метод функции()

:::

* Здесь больше подходит метод function, так как его можно использовать повторно. Также с помощью функции я могу разделить «логику вычислений» и «код, извлекающий входные значения». * Логика расчета: функция, которая принимает два аргумента, в данном случае «вес» и «рост», а затем вычисляет ИМТ по формуле. * Код, который извлекает входное значение:- Здесь я говорю о getElementById(“ ”), который извлекает информацию из документа.

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

ШАГ 4

  • Я создал кнопку в нашем HTML-файле и присвоил ей идентификатор btn.
  • Давайте получим доступ к этой кнопке и начнем с ней играть.

Я думаю, к этому времени вы, ребята, должны знать, как мы можем получить доступ к элементу из документа.

var valueThree = document.getElementById("btn");

* Здесь я создал переменную и дал ей имя valueThree, а затем с помощью селектора Id я получил доступ к кнопке из HTML-документа. * Теперь я хочу, чтобы когда пользователь вводит значения и нажимает кнопку, он покажет пользователю ИМТ. Но это не так просто, мы должны написать некоторые закулисные коды, чтобы это работало. * Во-первых, я должен заставить кнопку работать. Какое бы событие ни происходило (в данном случае «щелчок»), оно должно прослушивать это событие, выполнять «закулисные» вычисления, а затем возвращать результат. * Поэтому для этого я должен добавить функцию addEventListener к кнопке, которая прослушивает событие, которое там происходит.

ШАГ 5

(ПРОПУСТИТЕ ЭТОТ ШАГ, ЕСЛИ ВЫ УЖЕ ЗНАЕТЕ О СЛУШАТЕЛЯХ СОБЫТИЙ)

:::подсказка Que) ЧТО ТАКОЕ EVENT LISTENER?

Ответ) Прослушиватель событий — это функция, которую мы прикрепляем к элементу HTML, а затем прослушиваем определенное событие, будь то щелчок мышью, ввод с клавиатуры или что-то еще.

:::

Он принимает два аргумента;

1) сначала происходит «событие», в данном случае событие клика

2) функциональный блок, чтобы выполнить определенный блок кода, который мы хотим работать, когда происходит щелчок.

var button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('I got clicked!');
});

* В приведенном выше фиктивном коде мы получили доступ к кнопке с помощью селектора запросов, а затем добавили к ней прослушиватель событий. * После этого мы пишем код, который всякий раз, когда пользователь нажимает на кнопку, выводит на экран предупреждение «Меня нажали!».

ШАГ 6

valueThree.addEventListener("click", function () {
  var weight = document.getElementById("weightInput").value;
  var height = document.getElementById("heightInput").value;

  var bmi = bmiCalc(weight, height);

* Прочитав шаг 5, я теперь знаю, что прослушиватель событий принимает два аргумента. * Во-первых, я предоставляю аргумент щелчка, потому что здесь «щелчок» — это событие, которое происходит * Во-вторых, я назначил функцию, которая сохраняет входные значения в переменных, выполняет вычисления и возвращает значение ИМТ. * Теперь, когда пользователь вводит вес и рост и нажимает кнопку, прослушиватель событий прослушивает щелчок, вызывает функцию и код выполняется.

ШАГ 7

  • Теперь, когда пользователь получает значения ИМТ, я хочу дать пользователю определенные сообщения в соответствии с полученным значением ИМТ.
  • Для этого я использовал условные выражения.

Я рассмотрел условные операторы в моем предыдущем блоге, так что ознакомьтесь с ним, прежде чем читать приведенный ниже код.

document.getElementById("result").innerHTML = "Your BMI is = " + bmi;
if (bmi < 18.5) {
  document.getElementById("result").innerHTML =
    "Your BMI is " + bmi + ", You are Underweight.";
} else if (bmi >= 18.5 && bmi <= 24.9) {
  document.getElementById("result").innerHTML =
    "Your BMI is " + bmi + ", You are in Normal weight. Keep Maintaining this.";
} else if (bmi >= 25 && bmi <= 29.9) {
  document.getElementById("result").innerHTML =
    "Your BMI is " +
    bmi +
    ", You are Overweight. Try to do workout 2-3 days in week.";
} else if (bmi > 30) {
  document.getElementById("result").innerHTML =
    "Your BMI is " +
    bmi +
    ", You are Obese. Try to do workout 5-6 days in week.";
}
});

Вот и все для этого блога!

Я постарался объяснить это как можно проще, поэтому, если вам понравился блог и вы думаете, что сегодня узнали что-то новое, обязательно оставьте лайк и комментарий.

Не забудьте оставить свой важный отзыв, чтобы я мог улучшить свои будущие блоги.

Также опубликовано здесь п

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE