DEV Community

FullStackJava
FullStackJava

Posted on

Building a BMI Calculator with Angular and Spring Boot

Introduction:
In today's health-conscious world, it's essential to have tools that can help us monitor our well-being. One such tool is the Body Mass Index (BMI) calculator, which is widely used to determine whether a person's weight falls within a healthy range for their height. In this blog post, we'll explore how to build a BMI calculator using Angular for the front-end and Spring Boot for the back-end.

Prerequisites:
Before we dive into the code, make sure you have the following software installed on your machine:

  • Node.js and npm (Node Package Manager)
  • Angular CLI
  • Java Development Kit (JDK)
  • Spring Boot

Step 1: Setting up the Spring Boot Back-end

  1. Create a new Spring Boot project using your preferred IDE or the Spring Initializr (https://start.spring.io/).
  2. Add the necessary dependencies, such as Spring Web, for building a RESTful API.
  3. Create a controller class with a method that calculates the BMI based on the weight and height parameters received from the client.
@RestController
@RequestMapping("/api/bmi")
public class BmiController {

    @GetMapping
    public BmiResponse calculateBmi(@RequestParam double weight, @RequestParam double height) {
        double bmi = weight / (height * height);
        String category = getBmiCategory(bmi);
        return new BmiResponse(bmi, category);
    }

    private String getBmiCategory(double bmi) {
        if (bmi < 18.5) {
            return "Underweight";
        } else if (bmi < 25) {
            return "Normal weight";
        } else if (bmi < 30) {
            return "Overweight";
        } else {
            return "Obese";
        }
    }
}
Enter fullscreen mode Exit fullscreen mode
  1. Create a response class to encapsulate the calculated BMI value and its corresponding category.
public class BmiResponse {
    private double bmi;
    private String category;

    // Constructors, getters, and setters
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Building the Angular Front-end

  1. Create a new Angular application using the Angular CLI: ng new bmi-calculator.
  2. Create a component for the BMI calculator, e.g., ng generate component bmi-calculator.
  3. In the component's TypeScript file, import the necessary dependencies and define the required properties and methods.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-bmi-calculator',
  templateUrl: './bmi-calculator.component.html',
  styleUrls: ['./bmi-calculator.component.css']
})
export class BmiCalculatorComponent {
  weight: number;
  height: number;
  bmi: number;
  category: string;

  constructor(private http: HttpClient) { }

  calculateBmi() {
    const url = `http://localhost:8080/api/bmi?weight=${this.weight}&height=${this.height}`;
    this.http.get<BmiResponse>(url).subscribe(response => {
      this.bmi = response.bmi;
      this.category = response.category;
    });
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. In the component's template file, create a form with input fields for weight and height, and display the calculated BMI and category.
<div>
  <h2>BMI Calculator</h2>
  <div>
    <label>Weight (kg):</label>
    <input type="number" [(ngModel)]="weight">
  </div>
  <div>
    <label>Height (m):</label>
    <input type="number" [(ngModel)]="height">
  </div>
  <button (click)="calculateBmi()">Calculate BMI</button>
  <div *ngIf="bmi">
    <p>Your BMI: {{ bmi }}</p>
    <p>Category: {{ category }}</p>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 3: Running the Application

  1. Start the Spring Boot application by running the main class or using the command ./mvnw spring-boot:run (for Maven) or ./gradlew bootRun (for Gradle).
  2. Start the Angular development server by navigating to the project directory and running ng serve.
  3. Open your web browser and visit http://localhost:4200 to access the BMI calculator application.

*some useful repos - https://github.com/tericcabrel/bmi
https://github.com/ayushisingla/Spring-BMI-Calculator
*

Conclusion:
In this blog post, we've explored how to build a BMI calculator using Angular for the front-end and Spring Boot for the back-end. We covered the necessary steps to set up both components, including creating the Spring Boot RESTful API, building the Angular component with a form and HTTP client, and integrating the two parts together. With this application, users can easily calculate their BMI and determine whether their weight falls within a healthy range.

Remember, this is just a starting point, and you can enhance the application further by adding more features, improving the user interface, implementing error handling, and exploring additional functionality based on your requirements.

Top comments (0)