Weight Conversion Project using HTML and JavaScript

Javascript weight converter project

Hello Developers, in this tutorial you are going to learn how to create a Weight Conversion Project in JavaScript. The main feature of this weight converter is that you can convert weight from any of the 4 given weights(Grams, Kilograms, Pounds, Ounces) to the 4 weight units i.e. grams, kilograms, pounds, and ounces.

The HTML code for the Weight Conversion Project

So to create a Weight Conversion project first you need to design a page in HTML file then you need to give the ID and class to all the fields which you want to select and do JavaScript manipulation and CSS styling. So you can do this by simply making an Entry field where you will take the weight from the user. Then you will create a drop-down option from where the user will select the weight from the following options. After that, you need to create a submit button.

Afterward, you need to create 4 fields of the 4 weighing conversion units i.e. grams, kilograms, pounds, and ounces. To display the output.

Lastly, create a reset button to reset the following data entries. And give appropriate Id and class to the fields.

The code For that HTML is given to you below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weight converter</title>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Heading"><h1>Weight Converter</h1></div>
    <div class="Ew">Enter Weight : <input type="number" placeholder="Enter weight" id="inWeight">
        <span>
            
          <select  id="wt">  <option id="Grams" selected>Grams</option>
                <option id="Kilograms">KiloGrams</option>
                <option id="Pounds">Pounds</option>
                <option id="Ounces">Ounces</option>
            </select>
        </span>
        <span> <input type="submit" value="Submit" onclick="func()" id="submit-button"></span>
    </div>
    <div class="results">
        <h2><b>Result</b></h2>
    </div>

 <div> <table align="center" cellspacing="2" cellpadding="4" ><tr>
       <td class="out1">In Grams</td><td>:</td><td id="Rgrams">43</td>
   </tr>
   <tr>
    <td class="out2">In KiloGrams</td><td>:</td><td id="Rkilograms">18</td>
</tr>
<tr>
    <td class="out3">In Pounds</td><td>:</td><td id="Rpounds">12</td>
</tr>
<tr>
    <td class="out4">In Ounces</td><td>:</td><td id="Rounces">90</td>
</tr>
</table>
</div>
    <div><br><br><input type="reset" class="Re" onclick="resetValue()" value="Reset" ></div>
    <script src="script.js"></script>
</body>
</html>

JavaScript Code for Weight conversion

Here is the code for JavaScript.

You need to make three functions- func which will be called when you click on submit button, init function which will be called at the start of the program to set the values of every filed to null and afterward a resetValue function which will be called on the click of the reset button to reset the data entries.

init();

var initialWeight,selectedWeight;
function func(){
     initialWeight = Number(document.getElementById('inWeight').value);
     selectedWeight = document.getElementById('wt').value;   

   if(selectedWeight == "Grams"){
    document.getElementById('Rgrams').textContent = initialWeight;
    document.getElementById('Rkilograms').textContent = (initialWeight/1000).toFixed(4);
    document.getElementById('Rpounds').textContent = (initialWeight*0.0022046).toFixed(4);
    document.getElementById('Rounces').textContent = (initialWeight*0.035274).toFixed(4);
    }
   if(selectedWeight == "KiloGrams"){
    document.getElementById('Rkilograms').textContent = initialWeight;  
    document.getElementById('Rgrams').textContent = (initialWeight*1000).toFixed(4);
    document.getElementById('Rpounds').textContent = (initialWeight*2.2046).toFixed(4);
    document.getElementById('Rounces').textContent = (initialWeight*35.274).toFixed(4);

    } 
   if(selectedWeight == "Pounds"){
    document.getElementById('Rpounds').textContent = initialWeight;
    document.getElementById('Rgrams').textContent = (initialWeight/0.0022046).toFixed(4);
    document.getElementById('Rkilograms').textContent = (initialWeight/2.2046).toFixed(4);
    document.getElementById('Rounces').textContent = (initialWeight*16).toFixed(4);

}
   if(selectedWeight == "Ounces"){
    document.getElementById('Rounces').textContent = (initialWeight).toFixed(4);
    document.getElementById('Rgrams').textContent = (initialWeight/0.035274).toFixed(4);
    document.getElementById('Rkilograms').textContent = (initialWeight/35.274).toFixed(4) ;
    document.getElementById('Rpounds').textContent = (initialWeight*0.0625).toFixed(4);

}


}

function init(){
    document.getElementById('Rgrams').textContent = null;
    document.getElementById('Rkilograms').textContent = null;
    document.getElementById('Rpounds').textContent = null;
    document.getElementById('Rounces').textContent = null;
}

function resetValue(){
    document.getElementById('inWeight').value = null; 
    document.getElementById('wt').value = null;
    
    document.getElementById('Rgrams').textContent = null;
    document.getElementById('Rkilograms').textContent = null;
    document.getElementById('Rpounds').textContent = null;
    document.getElementById('Rounces').textContent = null;
}

Explanation of JavaScript Code

function init(){ }

function init(){
    document.getElementById('Rgrams').textContent = null;
    document.getElementById('Rkilograms').textContent = null;
    document.getElementById('Rpounds').textContent = null;
    document.getElementById('Rounces').textContent = null;
}

First, you need to write a function called init(). Then you need to select the particular id for the data which you want to change and then you need to set it to null. So that you can actually kinda hide or override that data that comes from HTML file. You can do the above thing by simply typing document.getElementById(“Any-id”).textContent this will help you select a particular id and textContent will help set it to null and return a null to DOM in Browser.

So, you first select all the id of weight units and then set all of them to null and tell JavaScript to return null value for the same when called.

function func(){ }

First, you need to take the input value from the user of the weight user entered in the input field by Number(document.getElementById(‘inWeight’).value); and then store it in a variable called initialWeight.

Then you need to store the option which the user selects from the options drop-down menu of weight units.You can do so by fetching the value and then storing it in a variable by typing

selectedWeight = document.getElementById(‘wt’).value; 


 If Conditions

Now you need to check the if conditions and apply weight conversions formula. Here basically you are checking that if the entered weight unit is same as one of the output unit block value then you will print the same weight number which the user entered to convert and if not then calculate the weights for each of the following weights by applying respective formulas and then displaying them in the browser.

for example:- 

 if(selectedWeight == “Grams”){

document.getElementById(‘Rgrams’).textContent = initialWeight;

document.getElementById(‘Rkilograms’).textContent = (initialWeight/1000).toFixed(4);

document.getElementById(‘Rpounds’).textContent = (initialWeight*0.0022046).toFixed(4);

document.getElementById(‘Rounces’).textContent = (initialWeight*0.035274).toFixed(4);

}

Explanation of the above code:-

Here the if statements first check that if the selected weight unit which is selected by the user from the drop-down menu equals ‘Grams’ which is the value set for that option tag for Grams. Then when it matches we know that the user has entered the value in grams and now we just need to convert the entered value to kilograms, pounds, and ounces and display it in the browser at the specified locations.

 

So now you need to first set the same entered gram weight to the Grams id field by selecting the id of Rgram and setting it equals to the entered weight and then using textContent property to display it in the browser.  document.getElementById(‘Rgrams’).textContent = initialWeight;

After that, you need to select the kilograms id and use the formula weight conversion of grams to Kilograms and set the precision after the decimal to a fixed value of 4. and the simultaneously you need to directly display the result in the browser.document.getElementById(‘Rpounds’).textContent = (initialWeight*0.0022046).toFixed(4);

After that, you need to use the use type of methods and DOM objects for weight conversions from grams to pounds and grams to ounces. And set all the fixed value precisions to 4.      document.getElementById(‘Rpounds’).textContent = (initialWeight*0.0022046).toFixed(4); document.getElementById(‘Rounces’).textContent = (initialWeight*0.035274).toFixed(4);

function func(){
     initialWeight = Number(document.getElementById('inWeight').value);
     selectedWeight = document.getElementById('wt').value;   

   if(selectedWeight == "Grams"){
    document.getElementById('Rgrams').textContent = initialWeight;
    document.getElementById('Rkilograms').textContent = (initialWeight/1000).toFixed(4);
    document.getElementById('Rpounds').textContent = (initialWeight*0.0022046).toFixed(4);
    document.getElementById('Rounces').textContent = (initialWeight*0.035274).toFixed(4);
    }
   if(selectedWeight == "KiloGrams"){
    document.getElementById('Rkilograms').textContent = initialWeight;  
    document.getElementById('Rgrams').textContent = (initialWeight*1000).toFixed(4);
    document.getElementById('Rpounds').textContent = (initialWeight*2.2046).toFixed(4);
    document.getElementById('Rounces').textContent = (initialWeight*35.274).toFixed(4);

    } 
   if(selectedWeight == "Pounds"){
    document.getElementById('Rpounds').textContent = initialWeight;
    document.getElementById('Rgrams').textContent = (initialWeight/0.0022046).toFixed(4);
    document.getElementById('Rkilograms').textContent = (initialWeight/2.2046).toFixed(4);
    document.getElementById('Rounces').textContent = (initialWeight*16).toFixed(4);

    }
   if(selectedWeight == "Ounces"){
    document.getElementById('Rounces').textContent = (initialWeight).toFixed(4);
    document.getElementById('Rgrams').textContent = (initialWeight/0.035274).toFixed(4);
    document.getElementById('Rkilograms').textContent = (initialWeight/35.274).toFixed(4) ;
    document.getElementById('Rpounds').textContent = (initialWeight*0.0625).toFixed(4);

    }
}

function resetValue(){ }

In this reset function, you need to reset all the values to null so that the browser displays no value to the user after the user click on Reset button.

First, you need to set the values to null then return it to the browser and do DOM manipulation.

You need to write document.getElementById(‘inWeight’).value = null; this will select the entered enter weight field id and then texContent will set it to null and return it the browser. Then you need to reset the value for the selected weight unit to null by document.getElementById(‘wt’).value = null;

After that, you need to write these lines to set all the output fields to null by typing :-

    document.getElementById(‘Rgrams’).textContent = null;
    document.getElementById(‘Rkilograms’).textContent = null;
    document.getElementById(‘Rpounds’).textContent = null;
    document.getElementById(‘Rounces’).textContent = null;
Here, with the help of textContent method you can do DOM manipulation and set the HTML values to none.
function resetValue(){
    document.getElementById('inWeight').value = null; 
    document.getElementById('wt').value = null;
    
    document.getElementById('Rgrams').textContent = null;
    document.getElementById('Rkilograms').textContent = null;
    document.getElementById('Rpounds').textContent = null;
    document.getElementById('Rounces').textContent = null;
}

 

Also, read: Mortgage Calculator Using JavaScript

Leave a Reply

Your email address will not be published.