CalCon Project: A Multi-Functional Web Calculator and Converter with Dark Mode

_{Canva Design}

Web CalCon Project

Today, I am going to explain a web project to which I have added various functionalities. First, let me explain the name of this project and why it was named this way. The name of this project consists of two words: calculator and converter, so I have chosen the first three characters for both of them. For the name of this project, we can name it as CalCon or CalCon. I have named it the CalCon Project. Cal means calculator, and Con means converter because in this project, one is doing calculations, and the other is doing conversion. It has two types of functionalities, and both include different things.

Now we know how the final output will look. You can see the full overview in the image below.

_{CalCon Output}

In this picture, the first thing that is written above is the name of the Calcon project. This is our header in which we have pasted the heading of our project. Just below it, we have added a nav bar. In this nav bar, we have added all the functionalities that are included in this project.

We will click on the functionality we want to perform, the function will open below it, we can run it from there.

Below in the body section you can see that two sidebars have been installed, one is the left sidebar and the other is the right sidebar. Its purpose is usually to add extra things to our posts, just like we add things to the nav bar, but here I have just taken it as motivational quotes so that we can motivate ourselves along with our project.

Between these two sidebars is our content area. This is the area where our functionalities will open. If we click on any of the items given in the navbar above, its functionality will open in the content area below where we can do our conversions and calculations.

Finally, at the end, we have added our footer, in which we have added our name etc. You can write anything here.

Used Language

To develop this project, I have used three languages one of which is HTML, the second is CSS, and the third is JavaScript. Using these three, I have developed this beautiful project. I have used HTML to create the structure that is being shown in front of you and I have used CSS to design it. Apart from this, the JavaScript is used to perform its functionalities.

Now we can see how each functionality is working because usually we have information about the coding of HTML and CSS but we don't have information about the script added in it. We are making all these functionalities work through scripts, so now we move down to our main functionalities.

Function (JS) Explanation

Now, we discuss these functionalities one by one. The first functionality we have is that of the calculator. Let's see how the calculate trick works.

Cal (JS) Function

Calculator:

ShowCalculator():

It first updates our HTML content to display a simple calculator interface in the content area. It also gives us two input fields and four buttons including multiplication, division, addition, and subtraction.

Whenever any operation button is clicked after entering two numbers in both input fields, it calls the calculate() function with the corresponding operator.

calculate(operation):

It performs arithmetic operations based on the parameters that are provided to it.

It retrieves the values of the two numbers written in both input fields, converts them to floating point, and then performs an operation on them and calculates the result.

Whatever the result is, he then displays it below in a paragraph.

DOBCalculator:

ShowDOBCalculator():

This function provides us with an interface to calculate the age of any person from their date of birth, which is displayed in the content area. Here there is an input field to enter the date from where we will enter our birth date and then below that there is a button that will calculate it. When this button is clicked on, it calls the CalculateDOB() function.

CalculateDOB():

This function attempts to estimate the age based on the entered date of birth. It retrieves the current year and subtracts the year of birth from the current year.

It also checks the month and day to accurately estimate the age, whether the birthday has passed in that month or is coming up, adjusts the age accordingly, and then calculates the age using the dobresult and shows it in the paragraph.

BMICalculator:

ShowBMICalculator():

This function calculates our BMI based on our height and our weight. To calculate BMI, it takes our height in meters as an input and our weight in kilograms as an input and displays this information in the content area of the interface.

After entering the input, a button to calculate BMI is placed below, which calls the CalculateBMI() function.

calculateBMI():

A formula is used to calculate BMI, which is as follows:

BMI = Weight / (height * height)

It takes height and weight from both input values and then calculates the BMI, which is the final result, and shows it in a paragraph through the bmiresult.

Con (JS) Function

Unit Converter:

ShowUnitConverter():

To convert units, it provides us with an interface that is used to convert different units to different units.

It provides us with an input field in which we write our value, how many values we want to convert, there are two dropdowns below, in the first dropdown we have to select which one we want to convert and in the second dropdown we have to select the one we want to convert to, then below this a button is given, when we click on it, it calls the convertunit() function.

convertUnits():

It converts the value according to the units selected and then displays it with the unitresult.

Currency Converter:

ShowCurrencyConverter():

In our body, in the content area, it shows us a currency converter interface, which has an input field in which we have to write our amount and two more input fields below where we have to select our conversion from which currency we want to convert to and along with that, a button has been given below, when we click on it, it calls the convertcurrency() function.

convertCurrency():

To convert currency, it uses an API that can access any exchange, gets the current exchange rate on them and then converts that amount.

I have used the exchange rate API, where I first signed up, after signing up, I got the API from there and I have put it here.

Using fetch(), it requests its compatible exchange rate from any external exchange rate API, the exchange rate at which you signed up for your account and which you are currently using.

If our call is successful through the API, then it converts it and shows us our output. If it fails, we get a message saying that your data is showing an error for some reason.

We face some problems while fetching data, like if we have written our currency code wrong or we have network issues, then it shows an error.

Dark Mode

I have added a toggle dark mode to my project so that the user can use the theme according to their preference. This dark mode darkens the lighter background and lightens the dark test. dark-mode class have been applied to the various elements body, navbar header, footer, main.

Each function is updating a specific part of the web page, thus it allows for different calculations and user interaction.

Output Through Video: