How to Create a BMI Calculator Using Electron Framework

0
261
Electron Framework

An electron is a framework for creating web applications using HTML, CSS and Javascript. In the Initial phase, the electron was developed for GitHub’s Atom Editor. But gradually, electron got noticed and has since been used to create applications by companies like Microsoft, Facebook, Slack and Docker. Electron combines the best technologies and hence it is platform independent meaning compatible with Mac, Windows and Linux.

Why Electron?

From the developer’s point of view, they don’t need to worry about writing a specific program for each platform while using this framework. This comes with a host of benefits for both the creator and the user.

Rather than writing applications in traditional programming languages, Electron allows the user to write these applications in 3 main components of many web-pages today:

Meanwhile, if you are interested to learn and create different projects such as sign up form, slideshow, hamburger menu and others using these 3 technologies then you can opt for HTML, CSS and JavaScript Course.

Advantages of Electron:

1)Cross-Platform Programs: Since the framework is based on web technologies, software using it is highly compatible with each other. Visual Studio Code(VSC) is an example of an application using this framework.
2)Faster Development Time: Electron allows creating application using languages the web page is made of. So if you know how to write a web page, you will be able to use Electron.
3)Consistency: Applications tend to look and behave the same regardless of the platform on which they are running.

In this blog, we are going to build a BMI Calculator using ELECTRON FRAMEWORK.

However, if you want to build other applications using Electron Framework then you can take Projects in Electron online tutorial.

Now, let’s get started!

We need to first install prebuilt Electron binaries using npm. To install it locally we need to run following command in the command prompt.

We will also install electron globally using the following command;

This will install development dependency in your app. After the installations, you will see node_modules will be added under your main folder (BMICALCULATOR). We will add some files like bmiCalculator.html, bmiCalculator.js, bootstrap.js and style.css. After the binaries are installed you will see package.json file added which list the packages that our project depends on, version of the packages that our project is using and a reproducible build which can be shared with other developers.

Image 1

Using HTML and CSS we will first create a layout of our calculator:

HTML: View File

CSS: Style sheet

OUTPUT:

Output Image 1

Looking good yeah!!. Now come’s the implementation part:

We now have to add some Bootstrapping code for our app to kick off.

bootstrap.js: Bootstrap file

Now we will add our actual implementation which will calculate the user input using Javascript:

Depending on what the user is doing the formula for BMI goes like:
We are going to allow the user to switch between Metric and U.S units.
BMI=weight(kg)/height2(m2) (Metric Units)
BMI=703.(lb)/height(in2) (U.S Units)

The results for BMI ranges for our project are as follows:
Mild Thinness: 17-18.5
Normal: 18.5-25
Overweight: 25-30

For the Back end Functionality we will divide it into 3 main functions:

  1. changeToFeet()- This will change the height for the text field(changing the overall height with respect to user input)
  2. convertToInchesCMs()- This will change the height for the user input to the combo box.
  3. Calculate BMI(): Once the above conversion are right we will execute our main function for any of the user preference units be it a Metric or U.S units and calculate the BMI.

bmiCalculator.js: Controller File

Once we are done with the back-end coding. Use the following command in the integrated terminal of Visual Studio Code:

Output:

Output Image 2

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here