Unit Converter Using JavaScript

JavaScript Unit Converter

Unit Converter Using JavaScript

In some previous post, we created a calculator using javascript today we gonna learn how to create a simple unit converter using HTML and javascript and CSS for some styling on it.

unit converter using javascript
unit converter using javascript

So before we start we have some knowledge for some HTML attributes and javascript keyword.

The above line is an input tag in HTML which takes only numbers as input.

For More: https://www.beginnersheap.com/html5-form-inputs/

onchnage=””

It’s an attribute of HTML <select> tag which calls a function or event handler when the user changes the option in the select menu.

For More: https://www.beginnersheap.com/java-script-event-handlers-and-events/

Now if we have knowledge of these then we have to start and one other thing that’s very basic thing in javascript that how to get elements.

For More: https://www.beginnersheap.com/javascript-overview/

The above first line uses to get some HTML element using its id in javascript second target the innerHTML of the tag and third one take the value of HTML element.

Now let’s start coding first we make the simple interface using HTML. Which contain two input box one for input other for output or result and two select box one for the select unit and other for showing possible conversions from it in over calculator.

This time, I only create a converter of simple Time, Distance and weight converter which convert second to minutes and minutes to seconds and same as grams to kgs and kgs to the grams.

 

As in above code, it’s simple interface which contain a div and inside that div all of over code written. First, an input box having id = one and then a select menu which has options of s, min, m, km, g, kg. the concept is that if the user selects the from option a unit of time that are seconds or minutes then the second menu only show the units of time and for this we use onchange event and event handler fun1().

output of simple input fields in HTML
Output of simple input fields in HTML

Above is the output of the simple interface. Now first we write the javascript code for it so first we get all the elements by their id in over script tag.

Now we have all the four HTML elements in our javascript. And we name them w, x, y, z.

Now as we say if user select a time unit from select menu the next select menu show only units of time so we have to check the value of select menu after change in options for this we use onchange function and fun1() event handler.

Actually, what the above code does? It checks if the value of first select box, which are time units then write in the innerHTML of the second select box the units of time and same for weight and distance.

Now in our second part, we have to code for if the user enters a value on input box and select a unit and convert it then the converted value must be shown in the second input box. There are three possible ways.

  • The value of both select boxes is same. Like second to second.
  • First, have bigger values unit. Like minutes to second.
  • Second have bigger value unit. Like second to minutes.

 

As in above we check all the possible solutions of the select options. same for all of the others. And all this work is done inside the change event handler of the second select box so that the output show concurrently when the user changes the units.

The CSS code of the converter is:

unit converter screenshot
unit converter screenshot

You Can View Live Demo Of Unit Converter in JavaScript Here

Complete Code: