How to create a weight converter with HTML and JavaScript

Hello Friends, In this article we will discuss How to create a weight converter with HTML and JavaScript. If you want to create a weight converter with HTML and JavaScript. Then you are in the right place.

Create a Weight Converter

Create an input element that can convert a value from one weight measurement to another.

Convert Kilograms to other measurements

  • Convert from Kilograms to Pounds- lb=kg*2.2046
  • Convert from Kilograms to Ounces- oz=kg*35.274
  • Convert from Kilograms to Grams- g=kg*1000
  • Convert from Kilograms to Stones- st=kg*0.1574

Convert from Gram to Other Measurements

  • Convert from Grams to Pounds- lb=g*0.0022046
  • Convert from Grams to Kilograms- kg=g/1000
  • Convert from Grams to Ounces- oz=g*0.035274
  • Convert from Grams to Stones- st=g*0.00015747

Convert from pounds to other measurements

  • Convert from Pounds to Kilograms- kg=lb/2.2046
  • Convert from Pounds to Ounces- oz=lb*16
  • Convert from Pounds to Grams- g=lb/0.0022046
  • Convert from Pounds to Stones- st=lb*0.071429

Convert Ounces to Other Measurements

  • Convert from Ounces to Pounds- lb=oz*0.0625
  • Convert from Ounces to Kilograms- kg=oz/35.274
  • Convert from Ounces to Grams- g=oz/0.035274
  • Convert from Ounces to Stones- st=oz*0.0044643

Change from stone to other measurements

  • Convert from Stones to Pounds- lb=st*14
  • Convert from Stones to Kilograms- kg=st/0.15747
  • Convert from Stones to Ounces- oz=st*224
  • Convert from Stones to Grams- g=st/0.00015747

How to create a weight converter with HTML and JavaScript

HTML:

<p>
<label>Pounds</label>
<input id=”inputPounds” type=”number” placeholder=”Pounds”
oninput=”weightConverter(this.value)” onchange=”weightConverter(this.value)”
>

</p>
<p>Grams: <span id=”outputGrams”></span></p>

JavaScript:

function weightConverter(valNum) {
document.getElementById(“outputGrams”).innerHTML = valNum / 0.0022046;
}

Weight converter with HTML and JavaScript

<!DOCTYPE html>
<html>
<title>Pounds to Kilograms Weight Converter</title>
<body>

<h2>Weight Converter</h2>
<p>Type a value in the Pounds field to convert the value to Kilograms:</p>

<p>
<label>Pounds</label>
<input id=”inputPounds” type=”number” placeholder=”Pounds” oninput=”weightConverter(this.value)” onchange=”weightConverter(this.value)”>
</p>
<p>Kilograms: <span id=”outputKilograms”></span></p>

<script>
function weightConverter(valNum) {
document.getElementById(“outputKilograms”).innerHTML=valNum/2.2046;
}
</script>

</body>
</html>

Read More:

Share this post if you found helpful!