Building a BMI Calculator with Angular and Spring Boot
Tags: webdev, javascript, beginners, programming
Published: 2024-05-22 09:32:54


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.

```java
@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";
        }
    }
}
```

4. Create a response class to encapsulate the calculated BMI value and its corresponding category.

```java
public class BmiResponse {
    private double bmi;
    private String category;

    // Constructors, getters, and setters
}
```

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.

```typescript
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;
    });
  }
}
```

4. In the component's template file, create a form with input fields for weight and height, and display the calculated BMI and category.

```html
<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>
```

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.