DEV Community

JavaFullStackDev.in
JavaFullStackDev.in

Posted on

1

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay