Skip to content
Related Articles

Related Articles

How to create a weight converter with HTML and JavaScript ?
  • Last Updated : 15 Sep, 2020

Introduction:

What we generally call “weight” in our daily lives is theoretically referred to as mass, and it calculates the amount of matter in an object. But we can use mass and weight almost interchangeably by simply multiplying or dividing it by the Earth’s gravitational acceleration, g and this is because of gravitational force the Earth exerts on us is approximately constant. To prevent misunderstanding or unnecessary confusion, we’re talking about mass units, but we’re referring to them as weight units.

The weight converter helps you convert between kilograms, grams, pounds, ounces, and stones. All of which are measurements of weight and mass. This is very useful for beginners to train their logic in javascript.

    Create a Weight Converter

  • Step 1: Add HTML



    First you have to create an input field to convert a value from one weight measurement to another.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <p>
      <!-- lable to input field-->
      <label>Kilograms</label>
      <!-- input field to enter the data-->
      <!-- kiloweightConvert function call function 
           kiloweightConvert to evaluate value-->
      <input id="Kilograms" type="number" placeholder="Kilograms" 
      oninput=
    "kiloweightConvert(this.value)" 
         onchange="kiloweightConvert(this.value)">
    </p>

    chevron_right

    
    

    The <input> tag use as an input field where the users can enter their data and placeholder is attribute that specifies a short hint that describes the expected value of an <input> element to be enter by user.

    The oninput is a event occurs when an element gets user input i.e. when the value of an <input> or <textarea> element is changed. In above code this attribute contains value “kiloweightConvert(this.value)” and it works when oninput event triggered.

    The onchange event is occur when the value of an element has been changed.

    These both events are similar but the difference is that the oninput event gets activated after the value of an element has changed, while onchange event occurs when the element loses its focus, after the content has been changed. The onchange event is also works on <select> elements.

    Second,create a output field for result of the conversion.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!--output field-->
    <p>Pounds: <span id="Pounds"></span></p>
    <p>Ounces: <span id="Ounces"></span></p>
    <p>Grams: <span id="Grams"></span></p>
    <p>Stones: <span id="Stones"></span></p>

    chevron_right

    
    

    <span> tag is a generic inline container for inline elements and content which is used to mark up a part of a text ,for grouping and applying styles to inline elements.

  • Step 2: Add JavaScript



    Now ,it’s time for build functionality using javascript . The following function will evaluate the value and return result.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    //function that evaluate the value and returns result
    function kiloweightConvert(value) {
      document.getElementById("Pounds").innerHTML=value*2.2046;
      document.getElementById("Ounces").innerHTML=value*35.274;
      document.getElementById("Grams").innerHTML=value*1000;
      document.getElementById("Stones").innerHTML=value*0.1574;
    }

    chevron_right

    
    

    If you use innerHTML, you can modify the content of the page without refreshing it. This will make the website more responsive and quicker to user inputs. The innerHTML property can also be used along with getElementById() in  JavaScript code to refer to an HTML element and modify its contents. The method getElementById() returns an element object that represents an element whose id property matches the specified string.

You can also try the following measurements to make a weight converter.

To get your head around the conversions between different  units, feel free to use the weight conversion chart given below. This  conversion table  will be very useful in designing the weight converter according to your preferences.

Pounds to other Measurements Ounces to other Measurements
Pounds to Kilograms kilograms=lb/2.2046 Ounces to Pounds pounds=oz*0.0625
Pounds to Ounces ounces=lb*16 Ounces to Kilograms kilograms=oz/35.274
Pounds to Grams grams=lb/0.0022046 Ounces to Grams grams=oz/0.035274
Pounds to Stones stones=lb*0.071429 Ounces to Stones stones=oz*0.0044643
Grams to other Measurements          Stones to other Measurements
Grams to Pounds pounds=g*0.0022046 Stones to Pounds ponds=st*14
Grams to Kilograms kilograms=g/1000 Stones to Kilograms kilograms=st/0.15747
Grams to Ounces ounces=g*0.035274 Stones to Ounces ounces=st*224
Grams to Stones stones=g*0.00015747 Stones to Grams grams=st/0.00015747

Example: Given below shows how  to convert a value from Kilogram to other measurements:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <title>Weight Converter</title>
        <!-- for styling -->
        <style>
            span {
                color: Green;
            }
        </style>
    </head>
    <body>
        <!-- Title of your Converter -->
        <h2 style="color: Green;">Weight Converter</h2>
        <p>Enter a value in the Kilograms field to convert :</p>
  
        <p>
            <!-- label the input field -->
            <label>Kilograms</label>
            <!-- input tag for enter the data -->
            <!-- kiloweightConvert function call
 function kiloweightConvert to evaluate value-->
            <input id="Kilograms" 
                   type="number" 
                   placeholder="kilograms" 
                   oninput="kiloweightConvert(this.value)" 
                   onchange="kiloweightConvert(this.value)" />
        </p>
        <!-- output field-->
        <p>Pounds: <span id="Pounds"></span></p>
        <p>Ounces: <span id="Ounces"></span></p>
        <p>Grams: <span id="Grams"></span></p>
        <p>Stones: <span id="Stones"></span></p>
  
        <script>
     //function that evaluates the weight and return result
            function kiloweightConvert(value) {
                document.getElementById("Pounds").innerHTML =
                  value * 2.2046;
                document.getElementById("Ounces").innerHTML =
                  value * 35.274;
                document.getElementById("Grams").innerHTML =
                  value * 1000;
                document.getElementById("Stones").innerHTML =
                  value * 0.1574;
            }
        </script>
    </body>
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :