Forem: Shashank Sharma

HOW TO MAKE BMI CALCULATOR

Shashank Sharma — Sat, 18 Mar 2023 12:03:51 +0000

In this blog, I will walk you through a step-by-step process to create a simple BMI Calculator.
I assume you can create HTML and CSS File for this, so I am not making it for you. Although, I will provide my version of the HTML and CSS code below for your convenience.
In this blog, I focus mainly on the JavaScript part of this BMI Calculator.

<!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;
  }
}

Now, Let's move to the interesting part, which is JavaScript.

To help you understand more easily, I divided the codes into 7 steps, So that you can understand the logic clearly without creating any mess.

STEP-1

1) var :- Creating a variable

2) valueOne :- The name we have given to our variable

3) document:- The document from which we are selecting the element

4) getElementById(“ ”) :- Id selector to select the element with a unique ID

5) (“weightInput”) :- The name of the Id.

By joining all the above parts, our code will look something like this;

var valueOne = document.getElementById("weightInput");

Lets deep dive into this and try to understand it clearly:-
First thing first, I have to create a variable to store the value which the user enters in the input field.
Here, I am giving the variable the name “valueOne”, you can give any name you want.
Now after creating the variable and giving it a name, I can now move to the interesting part, now I have to access the value entered by the user in the input field.
As known already, I can select any element, change its value, get the value from it, and do many more things using DOM(Document Object Model).
first I select the document from which I will be accessing the information, in this case, an HTML document.
After that, I select the desired element from the document using the selector.
If you wanna learn about selectors, check out this blog of mine:- "Understanding DOM(Document Object Model)"
Here, I give the unique Id to the element I am selecting, so I am using the ID selector:- getElementById(“ ”).
Now, after doing all these steps, I will get the value entered by the user in the “weightInput” field.

STEP-2

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

Everything I did in step-1, goes exactly the same for step-2, except the variable name and Id name.
I gave the variable a new name here to store the “heightInput” value entered by the user.
I also changed the Id name to #heightInput
I want to store the height and weight values separately, That’s Why I change these two things.

STEP-3

Now, after getting both the values and storing those values in our variables, it's time to do the calculation.

I can do the calculation here with two methods:-

Method-1:- by simply retrieving the values, storing them in variables, and doing the calculation.

Method-2:- by using the function()

Let's see both methods and figure out which one works well for us.

Method-1:- by simply retrieving the values, storing them in variables, and doing the calculation.

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

Here, I store ‘weightInput’ in a new variable called ‘weight’
Similarly, I store ‘heightInput’ in a new variable called ‘height’
The formula to calculate BMI is weight divided by the square of height.
so I created another variable and give it the name ‘bmi’ and applied the formula there.
As you see, there is Math.round written there and you might be thinking what is it for?
So, what Math. round will do is it will round off the output to its nearest integer.
Let's say, the user enters weight as 65kg and height as 1.63 meters. So without Math.round we get the output like this // 24.4646016
Now to round this off, we use Math.round and the same output looks something like this// 24.

Method-2:- by using the function()

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

Here,

I first created a function and give it the name of bmiCalc
As Known already, the function takes two arguments. In this case, those two arguments are ‘weight’ and ‘height’
Then I did the same as what I did early, imbedded the formula in a new variable with Math.round
return bmi => returns the output after the calculation is done.

**Que) WHICH METHOD SHOULD WE USE HERE?

Ans) The Function Method()

The function method is more appropriate here as it can be reused again. Also by using the function, I can separate the ‘calculation logic’ and the ‘code that retrieves the input values’.

Calculation logic:- a function that takes two arguments, in this case, ‘weight’ and ‘height’, and then calculate BMI using a formula.

Code that retrieves input value:- Here, I am talking about getElementById(“ ”), Which is retrieving information from the document.
**
Now, it's time to make the BMI calculator more functional and write some more codes for the ‘button’ element so that when the user enters height and weight and clicks the button, BMI gets displayed on the screen.

STEP-4

I created a button in our HTML file and gave it an Id of ‘btn’.

Let’s access this button and start playing with it.

Now, by this time I think you guys will know how we can access the element from the document.

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

Here I created a variable and gave it the name of valueThree and then using the Id selector, I accessed the button from the HTML document.
Now, what I want here is, when the user enters the values and clicks the button, it will show the BMI to the user. But, it's not that simple, we have to write some behind the scene codes for this to work.
First, I have to make the button work. Whatever event is happening (in this case ‘click’), it should listen to that event, do the behind-the-scenes calculation, and then returns the output.
So for that, I have to add a function called addEventListener to the Button which listens to the event that is happening there.

STEP-5

**(SKIP THIS STEP IF YOU ALREADY KNOW ABOUT EVENT LISTENERS)

Que) WHAT IS EVENT LISTENER?

Ans) Event listener is a function that we attach to an HTML element and then it listens for the specific event to happen, be it a mouse click, or keyboard input, or anything else.

It takes two arguments;

1) first is the ‘event’ that is happening, in this case, click event

2) function block, to execute a specific block of code that we want to work when the click happens.

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

In the above dummy code, we accessed the button using a query selector and then added an event listener to it.

After that, we write the code that whenever a user clicks on the button, an alert of ‘I got clicked!’ pops onto the screen.
**

STEP-6

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

  var bmi = bmiCalc(weight, height);

By reading Step-5, I now know that an event listener takes two arguments.
First, I provide a click argument because here the ‘click’ is the event that is happening
Second, I assigned a function that stores input values in variables, do the calculation, and returns the bmi value.
Now, when a user enters weight and height and presses the button, the event listener listens to the click, calls the function and the code gets executed.

STEP-7

Now as the user gets the BMI Values, I want to give specific messages to the user according to the BMI value they received.
So, for that I used conditionals.
I covered the conditionals in my previous blog so check that out before reading the below codes.

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.";
}
});

That's it for this blog. I tried to explain this in the easiest way possible, so if you like the blog and if you think you learn something new today, make sure to leave a like, comment, and do follow me on Twitter, medium, and DevTo.
Make sure to leave your important feedback, so that I can improve my future blogs.

New Day, New Blog

Shashank Sharma — Tue, 07 Mar 2023 08:06:21 +0000

I wrote a blog about JavaScript Conditionals with some good examples. Do read and leave your important feedback so that I can improve my future blogs.
https://shashnode.hashnode.dev/conditionals-in-javascript

JAVASCRIPT CONDITIONALS

Shashank Sharma — Tue, 07 Mar 2023 08:02:12 +0000

Introduction

Conditional statements are used for making decisions based on different conditions.

Conditionals in JavaScript allow you to execute different blocks of code based on whether a certain condition is true or false.

Conditions can be implemented using the following ways:-

1)If

2)If Else

3)Else If

4)Switch

5)ternary operators

1) If statement:-

Shows truthy values
used to check if the given conditions are true & then execute the block of code.

if(condition){
-----block of code which is going to execute-----
}

Let's understand this with an example.

let num = 10
if (num > 0) {
console.log(num + "is a positive number")
} 
//Output => 10 is a positive number//
//In the above example, we set the condition that if the user enters any number greater than 0, then "if" condition got executed and it returns the output.//

2) Else statement:-

It's like the opposite of an 'If' statement.
So we will say that, if the 'If' condition is not executed which
will happen when the given condition is false, then the 'Else'
statement gets executed.

if(condition){
-----block of code which is going to execute-----
} else {
-----block of code which is going to execute-----
}

Let's take an example and try to understand this.

//lets say we made a google form for football trails and age limit for the peoples who can apply for this is 16+. Now, If the user enter age more or less than the given age, certain blocks of code gets executed and give response accordingly.//
let myAge = 15
if (myAge > 16) {
console.log(myAge + " is valid age, you are eligible for trials.")
} else {
console.log(myAge + " is not a valid age, you are not eligible for the trials .")
}
//I Hope this clears how "If" and "Else" statements works//

3) Else If:-

This is used for most cases because there are multiple options to select from sometimes.

if(condition){
-----block of code which is going to execute-----
} else if(condition){
-----block of code which is going to execute-----
} else {
-----block of code which is going to execute-----
}

Let's understand this with an example.

Let's say, we found an interesting website and in order to get the most out of this website it's asking us to make an account on it. As we are going through the process of making an account, it asks us to set questions and answers, in case we lost our password we can still be able to log in by giving the correct answer to the questions. Now, a few months pass and we want to sign in to that website but we couldn't remember our password, so the website gives us the option to sign in by giving answers to the questions we set previously. It gives us a question and four options to choose from.

Que) what is your favorite color?

a) blue

b) Indigo

c) pink

d) red

let favColor = 'blue'
if(favColor === 'indigo'){
console.log("indigo is not your favorite color.Try again") 
} else if(favColor === 'pink'){
console.log("pink is not your favorite color.Try again")
} else if(favColor === 'red'){
console.log("Seriously, red, broooo Try again")
} else if(favColor === 'blue'){
console.log("Thats my bro, blue is your fav color. Never forget your password again.")
} else {
console.log("Enter your fav color")
}

4) Switch statement:-

'Switch statement' is an alternative for 'If Else' statements.
The 'Switch statement' makes the code more concise and easier to
read when you need to test a single variable against multiple
possible values.

switch (case value) {
case 1: 
   console.log('   ')
   break; //Suppose, the condition is satisfied after end of case 1, then, 'break' terminates the code//
case 2:
   console.log('   ')
   break;

default: //default runs only if all the cases dont satisfy conditions.//
   console.log(' ')
}

Let's understand this with an example.

let theDay = 'tuesday'
switch(theDay) {
case'monday':
   console.log('Today is not monday');
   break;
case'tuesday':
   console.log('Yes, today is tuesday');
   break;
default:
console.log('Please enter a valid day');
}
//In this example, the code terminates after 2nd case, as the condition is satisfied at case 2//

5) Ternary operator:-

It is a simple way of writing an 'If Else' statement.
It takes three values or operands
- A condition
- expression to execute if the condition is true
- expression to execute if the condition is false

Let's understand this with an example.

let playFootball = true
playFootball
? console.log('you needs football boots to play on ground')
: console.log('i dont wanna play')

The ternary operator is useful when you need to make a simple decision based on a single condition. It can make your code more concise and easier to read, especially when used with short expressions.

Conclusion

This blog discusses various conditional statements in JavaScript, which allow the execution of different blocks of code based on certain conditions. This includes If, Else, Else If, Switch, and Ternary operators. If statements are used to check whether a condition is true, while Else statements execute when the If condition is false. Else If statements are used when multiple options need to be considered. Switch statements are an alternative to If Else statements and make the code more concise. Ternary operators are a simple way of writing If Else statements.

SIMPLE PROJECT

Shashank Sharma — Mon, 06 Mar 2023 08:45:41 +0000

https://bmicalculator19.netlify.app Made this Simple BMI Calculator with HTML, CSS, and JavaScript.

CSS DISPLAY PROPERTY BASICS

Shashank Sharma — Fri, 03 Mar 2023 07:47:03 +0000

1)Block

2)Inline

3)Inline-Block

4)None

(A) Block:-

Take the whole width of a line.
or
Blocking out other elements which are in side by side position with it.

Some Block level elements are:-

Paragraph
Headers
Divs
Lists & list item
Forms

(B) Inline:-

Take the only amount of space that is needed.

Some Inline elements are:-

spans
images
Anchors

Que)Why do we use block elements when we can use inline elements which don't take much space?

Ans) When using an inline element, we can’t change the height & width, their height, and width are set according to the content inside them, while in block elements, we can change the width.**

NOTE:- We can change the property of the block element to an inline element using the display property, but after doing this, we can’t change width & height.

p{
display: inline;
}
//p is a block element but here we change its property to an inline element.//

It’s a mixture of both inline and block properties.
we can change the width of the element, as well as let it display as inline so that it takes the space as much needed to it.

p{
display: inline-block;
}

(D) None:-

If we want to hide things on our page, we can do that by two methods.
```
  1)display: None;

  2)visibility: hidden;
```

Understanding DOM(Document Object Model)

Shashank Sharma — Wed, 01 Mar 2023 08:26:31 +0000

CONTENTS:-

1)Introduction to the Document Object Model

2)What is the DOM?

3)How does DOM works

The tree structure of the DOM

Nodes and Elements

properties

Methods

4)Selectors

INTRODUCTION

In this blog, we are going to deep dive into DOM and try to understand what is DOM, and how it works.

What is DOM?

It acts as an interface for HTML & XML document, which represent the content of the document as tree-like structure.
DOM allows JavaScript & other programming languages to interact with and manipulate the content & structure of HTML or XML documents.
We can use DOM to add or remove elements from the page, change the text of elements, or responds to a mouse click or keyboard inputs.

How does DOM work?

When a web page is loaded, the browser creates a Document Object Model(DOM) of the page.
DOM works like a tree structure and converts the HTML code into a tree in which each node represents the elements of that particular HTML code.
The root of this tree is document objects and each node represents elements like paragraph, image, headers, links, etc.

<html>
  <head>
    <title> DOM BLOG </title>
  </head>
  <body>
    <button> Click here to read the blog </button>
  </body>
</html>

For example, the above code is simple HTML code, then, What DOM will do is convert this code into a tree-like structure, so that the DOM manipulation can be done easily.
Below is the image of how the above code gets converted into tree structure by DOM.

<html>
  <head>
    <title> DOM BLOG </title>
  </head>
  <body>
    <button> Click here to read the blog </button>
  </body>
</html>

In DOM, Properties & Methods are two types of members associated with each node or element, or object. Properties and Methods along with some attributes and functions help in interacting with and manipulating the HTML to get the desired outcome.

Let's Understand Properties and Methods with the example:-

The Properties

Let's say you have an HTML document with a heading element like this:

<h1 id="blog-head">It's a blog about DOM</h1>

Now if we want to change this heading without even touching HTML, Then what we going to do is use “DOM”.
First we “get” this heading element in JavaScript using a selector called getElementbyID(” ”);

-It returns the value as an “object”.

var heading = document.getElementById('blog-head');

Then we access its inner HTML using “.innerHTML” and change its value/text accordingly.

heading.innerHTML = 'Read, Learn and Leave your Feedback!';

by doing all these steps, We change the innerHTML of the heading without even touching HTML.

Don’t worry we are going to learn selectors in just a few mins.

The Methods

Let's say you have a button element in your HTML document like this:

<button id="my-button">Click me to read the blog about DOM</button>

Now, same as above, first we select the button in JavaScript using a selector called .getElementsbyID(” ”).
It returns the value as an “object”.
Now, we can manipulate and do changes with the button without touching HTML. Let’s say, we want an alert of “You clicked the button for reading the blog about DOM!” whenever a user clicks the button.
In order to do that, we need to do two things.

Add event listener which response to the click

2.a function() which executes the block of code and returns the alert which says “You clicked the button for reading the blog about DOM!”.

var button = document.getElementById('my-button');
button.addEventListener('click', function() {
  alert('You clicked the button for reading the blog about DOM!');
});

This .addEventListener() is what we call a Methods in DOM. We passed two arguments in it.

1.click = The click on Button

2.function() = which shows the alert when the click happens.

NOTE:- Methods have parenthesis() at the end and Properties do not.

In summary, Properties are the value of an element or node, or object, while Methods are similar to Functions() as it has a code that gets executed when that particular Method is called.

There are differences b/w Methods() and Functions(), But it's not the topic of this blog.

SELECTORS

There are many ways to select elements inside DOM.

Lets say we have this HTML code

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>

Now, if we want to select the “li” we use selectors:-

1) get Elements by Tag Name(””);
This Selector selects all the elements by there Tag names(li, ul, p, h1, h1 etc…)

In this case we are selecting “li”.

This selector selects all the “li” in the HTML document

document.getElementsbyTagName("li");
// HTMLCollection(3) [li.item, li.item, li.item] => Selects all 3 "li" from above HTML code

Note: Elements is plural, so it returns more than one value in form of an array.

Now, Let's style the “li”

document.getElementsbyTagName("li");
document.getElementsbyTagName("li")[0].style.color = "Red"; 
//change color of first li to red
document.getElementsbyTagName("li")[1].style.color = "Blue"; 
//change color of second li to Blue
document.getElementsbyTagName("li")[2].style.color = "Green"; 
//change color of Third li to Green

We can also change the text size and text style by using different properties in place of “style”.
You can change the style of all three elements at once using loops.

var items = document.getElementsByTagName("li");
for (let i = 0; i < 3; i++) {
  items[i].style.backgroundColor = "red";
}

2) get Elements by Class Name(””);

This selector selects all the elements with particular class names given to that element.

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>
<button class="btn">Click to read blog</button>

document.getElementsbyClassName("btn");
//This selects all the elements with .btn class in it

Similar to the above example, we can also add different properties to get different result like changing text color, text size, and others.

document.getElementsByClassName("btn");
document.getElementsByClassName("btn")[0].textContent = "you are reading the blog"
//This changes the text content inside the button.

This selector also returns value as an array.

3)get Element by ID(” ”);
This selector select the element with Unique ID given to it.

<ul id = title>
  <li class = item> One <li>
  <li class = item> One <li>
  <li class = item> One <li>
</ul>
<button class="btn">Click to read blog</button>

No, let's select the ul element using its ID.

document.getElementbyID("title");
//Selects element with ID Only

document.getElementbyID("title").style.color = "red";
//Styles the title element and changes its color to Red.

NOTE ⇒ ID selector has “Element” without "s" which means its singular, so it returns only single value.

Also, ID is a unique property and in every page there is only one ID of the same name so that also clears that there’s only one single element with a particular ID.

4)query Selector(””);

So, the previously three selectors are used in specific cases(for tag name, for class, for ID) But, in query selector, we can target any element with its name only, whether it be h1,h2,h3 or ID’s like(#title) or class like(.btn)

<h1 class = "header" id = "first-head">Follow me for more such informative blogs</h1>

We can style and manipulate the h1 element in three ways here;

document.querySelector("h1").style.color = "red"
//Here we select the element with its tag name
//This changes color of element to Red

document.querySelector("#first-head").style.color = "Blue"
//Here we select the same element with its ID
//This changes color of element to Blue

document.querySelector(".header").style.color = "Green"
//Here we select the same element with its class name
//This changes color of element to Green

This is all for this blog. Read, Learn and leave your important feedback so that i can improve my future blogs. There is going to be one more part of this blog. so stay tuned for that one..