How to Create a Stylish and Interactive BMI Calculator with JavaScript

As a budding developer, enhancing your JavaScript skills is crucial for creating interactive and dynamic web applications. This article guides you through two exciting projects: a Background Color Changer and a BMI Calculator. These projects will help you solidify your understanding of JavaScript fundamentals while having fun.

Background Color Changer

The Background Color Changer is a simple yet captivating project that allows users to change the background color of a webpage with a single button click.

HTML Structure

Create a button element with an ID of “colorChangeBtn”.

<button id="colorChangeBtn">Change Background Color</button>

JavaScript Logic

Use an array of colors and randomly select one each time the button is clicked.

const colors = ['#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33A8'];

document.getElementById('colorChangeBtn').addEventListener('click', function() {
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.backgroundColor = randomColor;
});

Styling

Add CSS to make the button visually appealing.

#colorChangeBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
}

Once completed, you’ll have a fun interactive webpage that demonstrates basic JavaScript functionality.

BMI Calculator

The BMI Calculator is a more advanced project that allows users to calculate their Body Mass Index (BMI) based on their height and weight.

HTML Structure

Create a form with input fields for weight and height, and a button to calculate the BMI.

<h2>BMI Calculator</h2>
<input type="number" id="weight" placeholder="Weight (kg)">
<input type="number" id="height" placeholder="Height (m)">
<button id="calculateBtn">Calculate BMI</button>
<p id="result"></p>

JavaScript Logic

Capture the user input and perform the BMI calculation.

document.getElementById('calculateBtn').addEventListener('click', function() {
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value);
    const bmi = (weight / (height * height)).toFixed(2);
    document.getElementById('result').innerText = `Your BMI is ${bmi}`;
});

Styling

Add CSS to style the form and results.

input {
    margin: 5px;
    padding: 10px;
    width: 200px;
}

#calculateBtn {
    padding: 10px 15px;
    background-color: #008CBA;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#result {
    margin-top: 10px;
    font-size: 20px;
}

Outcome

With this project, users can easily calculate their BMI, providing valuable health insights. It also demonstrates your ability to handle user input and perform calculations using JavaScript.

Conclusion

Building these two mini projects is a fantastic way to level up your JavaScript skills. Not only do they reinforce core programming concepts, but they also allow you to create functional and engaging applications. So roll up your sleeves, start coding, and watch your skills skyrocket! Happy coding!