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
- Create a new Spring Boot project using your preferred IDE or the Spring Initializr (https://start.spring.io/).
- Add the necessary dependencies, such as Spring Web, for building a RESTful API.
- 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";
}
}
}
- 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
- Create a new Angular application using the Angular CLI:
ng new bmi-calculator
. - Create a component for the BMI calculator, e.g.,
ng generate component bmi-calculator
. - 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;
});
}
}
- 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
- 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). - Start the Angular development server by navigating to the project directory and running
ng serve
. - 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.