100JSProjects
LearnProjectsExplore all projects
100JS_WORKSPACE/Build · Learn · Repeat
100JSProjects

Practical HTML, CSS, and JavaScript projects designed to help you turn concepts into real skills—one build at a time.

01Explore

./All projects./Learning guides./About./Contact./Privacy

02Resources

./GitHub repository./Support the project

© 2026 100 JS Projects. Built for developers.

TermsCookiesContact
JS//Projects/BMI Calculator

BMI CalculatorHTML, CSS & JavaScript Project

HTML5CSS3JavaScript
View Source CodeLive Demo
BMI Calculator project previewTry Live Demo
What you'll build

BMI Calculator

This project aims to create a body mass index calculator. There are two input fields where the user can enter their height in centimeters and weight in kilograms. By clicking the "compute BMI" button, the BMI will be calculated and displayed along with the weight condition, which is determined by if statements based on the BMI. We will also install the project with a neumorphism design and use JavaScript to calculate the BMI. All results will be displayed inside the input field and at the end of the container.

HTML
— Structure
CSS
— Design
JavaScript
— Logic
Complete project files

Build It from the Source Code

Create these three files, copy the code into each one, then open index.html with Live Server.

Project structure
bmi-calculator/
├── index.html
├── style.css
└── index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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="style.css">
</head>
<body>
    <div class="container">
        <h1 class="heading">Body Mass Index (BMI) Calculator</h1>
        Your Height (cm):
        <input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
        Your Weight (kg):
        <input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
        <button class="btn" id="btn">Compute BMI</button>
        <input disabled type="text" class="input" id="bmi-result">
        <h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
    </div>
    <script src="index.js"></script>
</body>
</html>
JS// Related Projects

Keep Building with Similar Projects

Continue your learning journey with these handpicked projects that share similar concepts and technologies

Temperature Converter project preview
HTMLCSSJavaScript

Temperature Converter

This project aims to create a temperature converter for beginners. The final version of the project includes three inputs for Celsius, Fahrenheit, and Kelvin temperature formats. When you change any of these inputs, for example, if you choose 100 degrees Celsius, you will see the equivalent Celsius value in Fahrenheit and Kelvin formats. Additionally, if you change one input, you will see a real-time change inside the other inputs. For instance, changing the Fahrenheit input to 100 degrees will show you that it is equal to 37 degrees Celsius and 311 Kelvin. To create this project, we will learn how to use an "onchange" event listener to track changes inside the inputs. We will also use the switch statement to track changes based on the name of the input we are working on. Additionally, we will use CSS to give the project a modern look, inspired by newMorphISM design. In summary, this project will help us learn how to create a temperature converter using JavaScript and CSS, and we will learn how to track changes using event listeners and switch statements.

View project
Tip Calculator project preview
HTMLCSSJavaScript

Tip Calculator

In this project, our aim is to build a modern tip calculator. The project's primary interface comprises a container labeled "Tip Calculator" with two input fields: one for the bill amount and the other for the tip percentage. The tip calculator has a modern design that is styled using CSS. We utilized JavaScript to obtain the values of the two input fields and calculate the total amount based on these values.

View project
Recipe Book App project preview
HTMLCSSJavaScript

Recipe Book App

In this project, we're developing a recipe book application that features a variety of recipes obtained through a free recipe API. We need an API key to access this API. Each time the page is refreshed, a new set of recipes with distinct ingredients will be displayed. Additionally, a link is provided to access the recipe website.

View project
{ }View All Projects