Javascript Project to Build BMI (Body Mass Index) Calculator From Height and Weight For Men and Women in HTML5 and CSS3 Full Project For Beginners

You are currently viewing Javascript Project to Build BMI (Body Mass Index) Calculator From Height and Weight For Men and Women in HTML5 and CSS3 Full Project For Beginners


Welcome folks today in this blog post we will be building a bmi calculator in javascript using height and weight. All the full source code of the application is shown below.



Get Started



In order to get started you need to make an index.html file and copy paste the following code




<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>BMI Calculator</title>
    <div id="showcase">
      <div class="container">
        <div class="overlay">
          <h1>BMI Calculator</h1>
          <div class="wrapper">
            <div class="group">
              <label for="height">Height:</label>
                placeholder="Height in cm"
              <label for="weight">Weight:</label>
                placeholder="Weight in kg"
              <button type="button" id="calculate">Calculate</button>
            <div id="result"></div>
            <div class="weight-guide">
              <h2>BMI Weight Guide</h2>
              <p>Underweight = Less than 18.6</p>
              <p>Normal = 18.6 and 24.9</p>
              <p>Overweight = Greater than 24.9</p>
    <script src="main.js"></script>



Now just make an style.css file and copy paste the following code




@import url('');
:root {
  --primary-color: #3e6b92;
  --secondary-color: #ecf5ff;
* {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--primary-color);
#showcase {
  background: url(../img/bg.jpg) no-repeat center/cover;
  height: 100vh;
.overlay {
  background-color: rgba(62, 107, 176, 0.5);
  padding: 0 7px 7px 7px;
  border-radius: 10px;

.container {
  border-radius: 10px;
  backdrop-filter: blur(
  ); /*lets you apply graphical effects such as blurring or color shifting to the area behind an element.*/
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
.wrapper {
  border-radius: 0 0 10px 10px;
  background-color: var(--secondary-color);
h1 {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 10px 10px 0 0;
  margin-top: 2px;
  margin-bottom: 2px;
  border: none;
  color: #000;
  width: 100%;
  font-weight: 100;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5),
    0 0 10px rgba(255, 255, 255, 0.5), 2px 2px 2px rgba(206, 89, 55, 0);
.group {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  margin-left: 2rem;
  margin-right: 2rem;

#result {
  margin-bottom: 2rem;
  min-height: 2rem;
  min-width: 4rem;
  font-size: 2rem;
#height {
  margin-bottom: 2rem;

button {
  margin-top: 2rem;
  padding: 0.5rem;
  border: 1px solid #000;
  border-radius: 5px;
  color: var(--primary-color);
  background: linear-gradient(to bottom, #f4f5fd, #b9c9e0);
button:hover {
  cursor: pointer;
  background: linear-gradient(to top, #f4f5fd, #b9c9e0);
input {
  border: 1px solid #000;
  border-radius: 5px;



Now make an main.js file and copy paste the following code




'use strict';

document.querySelector('#calculate').addEventListener('click', function () {
  const height = document.querySelector('#height').value;
  const weight = document.querySelector('#weight').value;

  const bmi = (weight / (height * 2)) * 100;
  document.querySelector('#result').textContent = bmi.toFixed(1);



Now if you open index.html file inside the browser you will see the following output as shown below


Leave a Reply