Skip to main content

Control Your Weights using this Javascript App - Simple BMI Calculator

 


    Embark on a coding journey that will demystify the intricacies of web development with our comprehensive tutorial, "Creating a BMI Calculator Using JavaScript." Whether you're a novice in the realm of programming or an enthusiast seeking to augment your JavaScript skills, this step-by-step guide promises to be an illuminating experience. To kick off our journey, we'll delve into the fundamental building blocks of web development—HTML, CSS, and JavaScript. This tutorial caters to individuals ranging from absolute beginners to those looking to fortify their existing skill set. By providing a holistic understanding of these essential languages, participants can lay a solid foundation for their future endeavors in the dynamic field of web development.

    As we progress through the tutorial, we'll focus extensively on JavaScript, unraveling its intricacies in a manner accessible to beginners. The comprehensive nature of this tutorial makes it an ideal starting point for those keen on grasping the basics of JavaScript programming. Each step is accompanied by detailed explanations, ensuring that even individuals with minimal coding experience can follow along seamlessly. The core of our tutorial centers around the creation of a Body Mass Index (BMI) calculator using JavaScript. This practical project serves as a real-world application of the concepts covered, allowing participants to witness the tangible results of their coding efforts. The BMI calculator isn't just a generic implementation—it is customized to cater to both men and women, showcasing the versatility of JavaScript in addressing diverse user needs.

    A crucial aspect of this tutorial is the comprehensive walkthrough of the JavaScript code. Participants will have the opportunity to follow along with the complete code, dissecting each line to understand its purpose and contribution to the overall functionality of the BMI calculator. This hands-on approach ensures that learners not only grasp theoretical concepts but also gain practical experience in coding.

    As we progress, we'll explore the principles of responsive design, ensuring that the BMI calculator is not only functional but also visually appealing across various devices. This aspect is crucial in the contemporary landscape, where users access applications on a myriad of platforms, ranging from desktops to smartphones. Understanding responsive design principles equips participants with the skills to create user-friendly interfaces that adapt seamlessly to different screen sizes. This tutorial caters to a diverse audience. For beginners, it serves as an excellent introduction to the world of programming, offering a gentle learning curve that instills confidence. For those with some programming experience, the tutorial provides an opportunity to delve deeper into JavaScript, gaining insights into its application in web development.

    Beyond the immediate project of creating a BMI calculator, this tutorial aims to instill a broader understanding of programming possibilities. By grasping the fundamentals of JavaScript, HTML, and CSS, participants gain the foundational knowledge needed to explore more complex projects and venture into advanced areas of web development. Don't miss out on this exciting coding adventure. Whether you're looking to learn JavaScript, delve into web development, or embark on your first coding project, this tutorial offers a wealth of knowledge and hands-on experience. Follow along, ask questions, and witness the transformation of code into a functional BMI calculator. The skills acquired in this tutorial will undoubtedly pave the way for future coding endeavors, empowering you to navigate the dynamic world of web development with confidence and proficiency.

bmi.html
  
  <!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Kalkulator BMI</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="form-container">
            <h2>BMI Calculator</h2>
            <form id="bmi-form">
                <div class="input-ctr">
                    <input type="number" id="weight" placeholder="Your Weight (Kg)" required>
                    <input type="number" id="height" placeholder="Your Height (Cm)" required>
                </div>
                <div class="btn-container">
                   <button id="btnCalc" type="button" onclick="calculateBMI()">
                        Calculate 
                   </button>
                   <button id="btnClr" type="button" onclick="clearInput()">
                    Clear 
               </button>
                </div>
            </form>
        </div>
        <div id="result"></div>
        <script src="script.js"></script>
    </body>
</html>
style.css

 body{
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

h2{
    color: white;
    font-size: 35px;
}

.form-container{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 25%;
    margin: 250px auto 0;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background-color: #3e71b3;
}

.input-ctr{
    width: 400px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

::placeholder{
    font-size: 25px;
    font-style: italic;
    color: white;
}

input[type="number"]{
    font-size: 25px;
    color: white;
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 5px;
    background-color: #5f96df;
}

.btn-container{
    text-align: center;
    margin-top: 20px;
}

button{
    margin: 10px;
    padding: 15px 25px;
    color: #fff;
    border: none;
    border-radius:5px;
    cursor: pointer;
    font-size: 25px;
    letter-spacing: 1px;
    font-weight: 600;
}

#btnCalc{
    background-color: rgb(64, 220, 119);
}

#btnClr{
    background-color: rgb(252, 54, 97);
}

#result{
    margin-top: 50px;
    width: 100%;
    text-align: center;
}

p{
    padding: 0;
    margin-top: 0;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.2;
}

.obesity{
    color: rgb(247,74,74);
    font-size: 50px;
}

.overweight{
    color: rgb(255, 179, 0);
    font-size: 50px;
}

.normal{
    color: rgb(37, 140, 37);
    font-size: 50px;
}

.underweight{
    color: rgb(92, 97, 92);
    font-size: 50px;
}
script.js 
  function calculateBMI(){

    var weight = parseFloat(document.getElementById('weight').value);
    var height = parseFloat(document.getElementById('height').value)/100;

    var bmi = weight / (height * height);

    var category;
    if (bmi < 18.5){
        category = 'Underweight';
    }else if (bmi >= 18.5 && bmi < 24.9){
        category = 'Normal';
    }else if (bmi >= 25 && bmi < 29.9){
        category = 'Overweight';
    }else{
        category = 'Obesity';
    }

    var result = document.getElementById('result');
    result.innerHTML = '
Your BMI is ' + bmi.toFixed(2) + '
' + category + '
';

    }

    function clearInput(){

        document.getElementById('weight').value = '';
        document.getElementById('height').value = '';

        var result = document.getElementById('result');
        result.innerHTML = '';

    }

WATCH FULL VIDEO HERE!


Comments

Post a Comment

Popular posts from this blog

Auto Image Slider using CSS Only

     Are you ready to learn how to create an image slider using only CSS? Look no further! In this tutorial, we'll walk you through the step-by-step process of building a sleek and modern image slider using HTML and CSS. No JavaScript required! In this tutorial We'll cover setting up the HTML structure for the slider.       This will include creating the container element and styling the slider with CSS. You'll also learn how to add transitions and animations to create a smooth sliding effect. By the end of this tutorial, you'll have a fully functional image slider that you can use on your own website. Whether you're a beginner or an experienced developer, this tutorial has something for you. So let's get started creating your own image slider using CSS today! index.html <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"&
Post a Comment
Read more

Banner image/Hero Image Tutorial with HTML and CSS

     In this video, we will be creating a banner/hero image using CSS. A banner or hero image is a large, full-width image that is typically placed at the top of a website or webpage and is used to visually represent the content or purpose of the page. We will be using CSS properties such as background-image and background-size to create the banner/hero image, as well as some basic layout techniques to ensure that it looks great on all devices. By the end of this tutorial, you will have a fully functional banner/hero image that you can use on your own website. So, if you want to learn how to create a banner/hero image using CSS, be sure to follow this tutorial till the end.   index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tutorial 6</title> <link rel="stylesheet" href="css/tutorial6.css"> <link href="https://fonts.googleapis.co
Post a Comment
Read more

Image with Accordion Effect on Hover using CSS and HTML

     Hey there, folks! Are you looking to jazz up your website's image galleries? Well, you've come to the right place! In this tutorial, we'll show you how to create an image with accordion effect on hover using HTML and CSS. First off, let's chat about HTML and CSS. HTML is like the building blocks of web pages, while CSS adds style and personality to your website.       By combining these two, you can create some seriously cool designs that'll knock your user's socks off!In this tutorial, we're gonna be using CSS animation effects to make an accordion effect on an image when a user hovers over it. It's a slick way to add a bit of movement and interactivity to your web design. To get started, we'll walk you through creating a basic HTML structure for your image.       Then, we'll apply some CSS styles to give it that fancy accordion look. Finally, we'll create a hover effect using CSS animation that'll make your image expand and colla
Post a Comment
Read more