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";
        }
    }
}

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
}

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

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>

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.