_{Canva Design}

Interactive Web Tools

I hope everyone is well and enjoying their lives. Today I have come up with a mini project again that involves web development in which I will make three types of calculators in a single project. The first calculator will be to calculate our BMI, the second calculator will be to calculate our age and the third one is not a calculator, it is a converter with which we can convert any of our currencies and this converter will convert it by looking at the live price.

• Our BMI calculator consists of our weight and height. We have to put the height in centimeters here and we have to put the weight in kilograms. Then we can find our exact BMI.
• There is not much work to calculate age, we just have to select our date of birth from our calendar and when we calculate it, we will get our exact age.
• The function of the currency converter is that first you have to write the amount you want to convert and then next you have to select the currency you have. Then secondly you have to select the currencies in which you want to convert your currency and then you will click on the convert button and you will get the answer.

Header Navbar:

So with this whole project in mind, let's move on to our programming. First, let's talk about our header and nab bar sections.

Everyone will be familiar with HTML, CSS, and JavaScript and you will all know its basic structure. I will start with the direct header. In the header, I have given one of my headings and after that, I have created a bar below it. In the nab bar, you can see that three types of links have been placed, one of which is a BMI calculator, the second is an age calculator and the third is a currency converter.

We have to do all our work inside the header tag and in this header we have added a nav in which we have created a list and added three items to it and then we have used the showcalculator() tag to switch the navigation link.

HTML Code

If we talk about its style, first of all, we have used an extension of .navbar through which we have set its background color and controlled the overflow and similarly, we have used .navbar ul. Our purpose in using it is that we have set the margin and padding to auto and the content is centered.

That's why we have used the navbar hover to apply the hover, through which we will set the background color and its color. All the coding for this is listed below.

CSS Code

Code Output

Sidebar:

First of all, I have placed two sidebars inside the body, one on the right side and the other on the left side. First, a motivational heading has been given at the top and two quotes have been written below it, which are enclosed in the div tag.

HTML Code

If we talk about their style, then both of them have the same style. If we have set the width to 20 percent in one left sidebar, then the other one has the same width. The background color is the same, the padding is also the same, and the box shadow is also the same, which can also be seen in the up-coding.

CSS Code

Code Output

Main Calculators:

The main HTML structure of this calculator is given below, which is that we have placed the BMI range and currency converter in a div tag giving all of them the class Calculator, and set a unique ID for them.

These three have separate input fields. In the BMI calculator, we will take height and weight as input, and then in the age calculator, it will only take the date of birth, and in the currency converter, it will first take the amount, and then there are two drop-downs for the currency, which have to be selected.

Separate buttons have been installed for these three and they have separate specific functions. The first button will calculate the BMI, the second will calculate the age, and the third will convert the currency.

HTML Code

When it comes to their style, each calculator has padding and a background color has been set for each. Box shadows and rounded corners have also been added for a modern look.

These input fields have also been designed, including drop-down and full-width input fields with padding and borders.

Similarly, the button has also been designed separately, the color of which we have kept blue, which is often seen as the submit button.

CSS Code

Using JavaScript, we have powered this calculator in which using the showcalculator() function when the user clicks on any one of the links in the navigation bar, it will show only that one using these querySelectorAll('.calculator') and hide all the others.

JS Code

BMI Calculation:

This JavaScript function will calculate BMI using this BMI = weight / (height^2) formula and display the results in a pop-up.

JS Code

Code Output

Age Calculation:

This function calculates our age by comparing the user's date of birth with the current date, which is the following script.

JS Code

Code Output

Currencey Converter:

In this function, it fetches data from the live API and performs a live conversion in which it multiplies the users' amount and shows it in a popup.

To get live API, you have to create an account on any API conversion app or the web, and from there you can get your API. I am telling you the website where you can create your account and get this API. This is the API website https://app.exchangerate-api.com/sign-in.

This is the function given below, through which it fetches data from the live API checks the rate from there multiplies it, and shows it to the user in a popup.

JS Code

Code Output

Pop Up:

The showPopup() function is designed so that whatever our result is right now will be displayed as a pop-up in the center of the screen.

JS Code

Code Output

Final HTML Code:

Final CSS Code:

Final JS Code:

Final Video Output: