Coders Packet

Scientific/BMI/Age/Length Calculator in javascript using React js library.

By Abhishek Bajaj

Made a Scientific ,BMI,Age,Length calculator using javascript Library i.e React js.Inspired by Mi calculator UI.

Recently I learned reactjs and what is the best way to practice what you have learned is by making a simple project using them. So, I made four different types of calculators which are 1)Scientific cal 2)BMI cal 3)Length cal 4)Age cal. The design and color scheme was inspired by the Mi(Miui 12) inbuilt calculator.

So, let's go a little bit more in detail. So Before telling you how I did it if you are seeing my code then I wanna tell you that I am sorry for not using good names for variables I used in the code so please bear with me. I used react functional components with the help of life-saving yes the react hooks.

In the Scientific calculator, I used buttons and input tags which you know if you learned HTML. I gave buttons some text like the no(1,2,3,4,...), some standard mathematical used operator(+,-,...), factorial, logarithm, and also Trigonometric functions. The input tag is used to write the question and also to display the answer. You have to click on buttons to give any input and cant use the keyboard for giving the input because I dint give onchange property to the input element. I gave a function call on each button for accepting the input and there is the '=' button which when clicked will display the final result. There is also and section with a button to display history. You can see all your previous calculations and there is also a button to clear the history if you liked to do it. There is a section for the instructions on how to use the calculator because some will forget to give correct mathematical input to the calculator which will give you errors which I left upon you all to handle in your style and logic.

Coming on second is the BMI calculator, by far my most favorite calculator.BMI(Body mass index) is the type of calculator which can tell whether you are underweight, overweight, or normal by taking in your height and total weight. The general formula is weight/(height^2) with little changes depending on the units of height and weight. In my calculator, you have many options for the weight(Kilograms, Pounds) and height(centimeters, meters, feet, inches). After giving your input you will get a neon light-like lit scale with the result of the BMI formula. If you forget to select any units and gave the input then you will have a message instead of the input saying you to go back and select the input units.

Now coming on third, it is a simple length calculator that converts length from one unit to another unit. I know you might be thinking what anybody can do this even a child but sometimes to practice your knowledge you have to do some simple tasks too :).Well, I will still explain to those who don't know and are new to this. I just used the useState hook which takes the input value and converts them into the required length depending upon the unit for example 1km=1000m so 3m=?km 3/1000=0.003km yes that's it. Easy right.

Yes, finally the last one and also my second favorite one The age calculator which tells me how small and big is a human's life. The calculator working is simple it takes your birthday date and also gives you the options for today's date with a default value of the current day. Then it tells you your age in years, in months, in days. It will also tell you when is your next birthday coming the day on which it's coming, no of months left, and also no of days left. It also has a final summary that makes you realize that you have lived a very long life. It tells you no of years you lived I mean living :), total no of months, total no of weeks, total no of days, total no of hours, and total no of minutes with respect to your birthday. If you gave today's date as the date before you were born then an alert will tell you to plz change the current year to a year greater than or equal to your birth year.

The packages I used are:

1)react  
2)react-icons/bs
3)mathjs
4)react-datepicker

At last, I wanna say thank you for reading this and sorry if there was any mistake in my description well this is my first time doing it and also again I am very sorry for the names of the variables.

The project file I uploaded will be an ordinary src folder that is created when you create your react app but there will be a folder called basic which contains all the code and files which I wrote. If you want to use them plz keep in mind to install all the packages beforehand and then use or run them and don't forget to import them in the APP.js script of React library.

Peace...................... 

 

 

 

Download Complete Code

Comments

No comments yet