Article Categories

Selected Reading

How to create a weight converter with HTML and JavaScript?

Javascript Web Development Object Oriented Programming

Creating a weight converter with HTML and JavaScript involves building a simple form that takes weight input in one unit and converts it to another unit in real-time. This tutorial demonstrates how to create a kilogram to gram converter.

HTML Structure

The HTML provides the basic structure with an input field for kilograms and a display area for the converted grams:

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   input, span{
      font-size: 20px;
   }
</style>
</head>
<body>

<h2>Type weight in kg to convert it into grams</h2>
<p>
<label>Kilogram</label>
<input id="inputKG" type="number" placeholder="Kilogram"
oninput="KgtoGConverter(this.value)" onchange="KgtoGConverter(this.value)">
</p>
<p>Grams: <span id="outputGrams"></p>
<script>
   function KgtoGConverter(weight) {
      document.getElementById("outputGrams").innerHTML = weight * 1000;
   }
</script>
</body>
</html>

How It Works

The converter uses the oninput and onchange event handlers to trigger the conversion function whenever the user types or changes the input value. The JavaScript function multiplies the kilogram value by 1000 to convert it to grams.

Enhanced Version with Multiple Units

Here's an improved version that supports conversion between multiple weight units:

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
   }
   .converter-box {
      background: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   }
   input, select {
      font-size: 18px;
      padding: 10px;
      margin: 5px;
      border: 2px solid #ddd;
      border-radius: 4px;
   }
   .result {
      font-size: 20px;
      font-weight: bold;
      color: #2c3e50;
      margin-top: 15px;
   }
</style>
</head>
<body>

   
   <p>
      <input id="weightInput" type="number" placeholder="Enter weight" oninput="convertWeight()">
      <select id="fromUnit" onchange="convertWeight()">
         <option value="kg">Kilograms</option>
         <option value="g">Grams</option>
         <option value="lb">Pounds</option>
         <option value="oz">Ounces</option>
      </select>
   </p>
   <p>Convert to:
      <select id="toUnit" onchange="convertWeight()">
         <option value="g">Grams</option>
         <option value="kg">Kilograms</option>
         <option value="lb">Pounds</option>
         <option value="oz">Ounces</option>
      </select>
   </p>
   


<script>
function convertWeight() {
   const weight = parseFloat(document.getElementById('weightInput').value);
   const fromUnit = document.getElementById('fromUnit').value;
   const toUnit = document.getElementById('toUnit').value;
   const resultDiv = document.getElementById('result');
   
   if (isNaN(weight) || weight < 0) {
      resultDiv.innerHTML = 'Please enter a valid positive number';
      return;
   }
   
   // Convert to grams first
   let weightInGrams;
   switch(fromUnit) {
      case 'kg': weightInGrams = weight * 1000; break;
      case 'g': weightInGrams = weight; break;
      case 'lb': weightInGrams = weight * 453.592; break;
      case 'oz': weightInGrams = weight * 28.3495; break;
   }
   
   // Convert from grams to target unit
   let result;
   switch(toUnit) {
      case 'kg': result = weightInGrams / 1000; break;
      case 'g': result = weightInGrams; break;
      case 'lb': result = weightInGrams / 453.592; break;
      case 'oz': result = weightInGrams / 28.3495; break;
   }
   
   resultDiv.innerHTML = `${weight} ${getUnitName(fromUnit)} = ${result.toFixed(3)} ${getUnitName(toUnit)}`;
}

function getUnitName(unit) {
   const units = {
      'kg': 'kilograms',
      'g': 'grams',
      'lb': 'pounds',
      'oz': 'ounces'
   };
   return units[unit];
}
</script>
</body>
</html>

Key Features

The weight converter includes several important features:

Real-time conversion: Updates results as you type using the oninput event
Input validation: Checks for valid positive numbers and displays error messages
Multiple units: Supports kilograms, grams, pounds, and ounces
Precise calculations: Uses standard conversion factors and rounds to 3 decimal places

Common Conversion Factors

From	To	Multiply by
Kilograms	Grams	1000
Pounds	Grams	453.592
Ounces	Grams	28.3495

Conclusion

Creating a weight converter with HTML and JavaScript is straightforward using event handlers and basic arithmetic. The enhanced version demonstrates how to build a more versatile tool supporting multiple weight units with proper validation and user-friendly interface.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

466 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next