function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ASHISH KUMAR YADAV 7ASHISH KUMAR YADAV 7 

how to implement bmi calcualtor in lwc

Hello folks,

I am facing error while implementing bmi in lwc.can anyone help me to convert this html file and js file in lwc itry to convert but getting some error .i am new in lwc.

code using html and javascript
========================
.html file
=======
<!DOCTYPE html>
<html lang="en">
<head>
    <title>BMI Calculator</title>
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <input type="range" min="20" max="200" value="20" id="weight" oninput="calculate()">
            <span id="weight-val">20 kg</span>
        </div>
        <div class="row">
            <input type="range" min="100" max="250" value="100" id="height" oninput="calculate()">
            <span id="height-val">100 cm</span>
        </div>

        <p id="result">20.0</p>
        <p id="category">Normal weight</p>
    </div>

    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

.js file
======
function calculate(){
    var bmi;
    var result = document.getElementById("result");

    var weight = parseInt(document.getElementById("weight").value);
    document.getElementById("weight-val").textContent = weight + " kg";

    var height = parseInt(document.getElementById("height").value);
    document.getElementById("height-val").textContent = height + " cm";

    bmi = (weight / Math.pow( (height/100), 2 )).toFixed(1);
    result.textContent = bmi;
    
    if(bmi < 18.5){
        category = "Underweight";
        result.style.color = "#ffc44d";
    }
    else if( bmi >= 18.5 && bmi <= 24.9 ){
        category = "Normal Weight";
        result.style.color = "#0be881";
    }
    else if( bmi >= 25 && bmi <= 29.9 ){
        category = "Overweight";
        result.style.color = "#ff884d";
    }
    else{
        category = "Obese";
        result.style.color = "#ff5e57";
    }
    document.getElementById("category").textContent = category;
}


converting above file in lwc
​​​​​​​=======================

bmi.html
==========
<template>  
    <div class="slds-box slds-theme_shade">  
     <lightning-input type="number" name="height" id="height" label="Height" onchange={handleNumberoneChange} value={firstNumber}></lightning-input>  
     <lightning-input type="number" name="weight" id="weight" label="Weight" onchange={handleNumberTwoChange} value={secondNumber}></lightning-input>  
     <b>Body Mass Index [BMI] is : </b>  
      <!--<P>{resultValue}</p> -->
     <lightning-button label="Calculate" onclick={bmi}> </lightning-button>  
    </div>  
 </template>  

Bmi.js
======

import { LightningElement,track } from 'lwc';
export default class BmiLwc extends LightningElement {
    @track firstNumber;
    @track secondNumber;
    handleNumberoneChange(event) {
        this.firstNumber = parseInt(event.target.value);
    }
    handleNumberTwoChange(event) {
        this.secondNumber = parseInt(event.target.value);
    }
    handlecalculate(event){
        var bmi;
        var result = document.getElementById("result");
   
        var weight = parseInt(document.getElementById("weight").value);
        document.getElementById("weight-val").textContent = weight + " kg";
   
        var height = parseInt(document.getElementById("height").value);
        document.getElementById("height-val").textContent = height + " cm";
   
        bmi = (weight / Math.pow( (height/100), 2 )).toFixed(1);
        result.textContent = bmi;
       
        if(bmi < 18.5){
            category = "Underweight";
            result.style.color = "#ffc44d";
        }
        else if( bmi >= 18.5 && bmi <= 24.9 ){
            category = "Normal Weight";
            result.style.color = "#0be881";
        }
        else if( bmi >= 25 && bmi <= 29.9 ){
            category = "Overweight";
            result.style.color = "#ff884d";
        }
        else{
            category = "Obese";
            result.style.color = "#ff5e57";
        }
        document.getElementById("category").textContent = category;
    }
}
PriyaPriya (Salesforce Developers) 

Hey Asish,

What is the error you are getting ?

Regards,

Priya Ranjan
 
Chayan HazraChayan Hazra
Hello. You can try this:
HTML 
<template>
    <lightning-layout multiple-rows="6" class="slds-box">  
        <lightning-layout-item size="12" padding="around-small">
            <lightning-input type="number" label="Enter your height" id="height" onchange={handleHeight} placeholder="Value in cm"></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item size="12" padding="around-small">
            <lightning-input type="number" label="Enter your weight" id="weight" onchange={handleWeight} placeholder="Value in Kg."></lightning-input>
        </lightning-layout-item>
        <lightning-layout-item size="12" padding="around-small">
            <lightning-button label="Calculate" onclick={calculateBMI} variant="brand"></lightning-button>
        </lightning-layout-item>
        <lightning-layout-item size="12" padding="around-small">
            <lightning-formatted-text class="slds-text-align_left" onchange={handleChange} value={result}>  </lightning-formatted-text>
        </lightning-layout-item>
    </lightning-layout>
</template>

JS 
import { LightningElement, track } from 'lwc';

export default class BmiCalculator extends LightningElement {
    @track result;
    @track category;
    @track bmi;
    height;
    weight;

    handleHeight(event) {
        this.height = parseInt(event.target.value);
    }

    handleWeight(event) {
        this.weight = parseInt(event.target.value);
    }

    calculateBMI() {
        this.bmi = (this.weight / Math.pow((this.height/100), 2)).toFixed(1);   
        this.result = `Body Mass Index [BMI] is : ${this.bmi}`;
        console.log(`Result ==> ${this.result}`);
        console.log(`BMI ==> ${this.bmi}`);
    }

    handleChange(event) {
        const classList = event.target.classList;
        console.log(`classList ==> ${classList}`);
        if(this.bmi > 18.5) {
            this.category = "Underweight";
            classList.add('underweight-color');
        } else if(this.bmi >= 18.5 && this.bmi <= 24.9){
            this.category = "Normal Weight";
            classList.add('normalweight-color');
        } else if(this.bmi >= 25 && this.bmi <= 29.9){
            this.category = "Overweight";
            classList.add('overweight-color');
        } else {
            this.category = "Obese";
            classList.add('obese-color');
        }
    }
}

CSS 
.underweight-color {
    color: #ffc44d;
}

.normalweight-color {
    color: #0be881;
}

.overweight-color {
    color: #ff884d;
}

.obese-color {
    color: #ff5e57;
}
XML 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__UtilityBar</target>
        <target>lightning__Tab</target>
        <target>lightning__FlowScreen</target>
        <target>lightning__Inbox</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

Thanks.