Article Categories

Selected Reading

How to create a length converter with HTML and JavaScript?

Javascript Web Development Object Oriented Programming

To create a length converter with HTML and JavaScript, you'll need to combine HTML form elements with JavaScript functions to handle the conversion logic. This tutorial demonstrates building a simple kilometer-to-meter converter.

HTML Structure

The converter uses an input field for kilometers and displays the converted meters value. The oninput and onchange events trigger the conversion function automatically as you type.

Complete Example

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
      max-width: 600px;
   }
   
   input, span {
      font-size: 20px;
      padding: 8px;
   }
   
   .converter-section {
      margin: 20px 0;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 5px;
   }
   
   .result {
      color: #007bff;
      font-weight: bold;
   }
</style>
</head>
<body>

<h1>Length Converter</h1>

<div class="converter-section">
   <h2>Kilometers to Meters</h2>
   <p>
      <label for="inputKm">Kilometers:</label>
      <input id="inputKm" type="number" placeholder="Enter kilometers" 
             oninput="KmtoMConverter(this.value)" 
             onchange="KmtoMConverter(this.value)">
   </p>
   <p>Meters: <span class="meters result">0</span></p>
</div>

<div class="converter-section">
   <h2>Meters to Kilometers</h2>
   <p>
      <label for="inputM">Meters:</label>
      <input id="inputM" type="number" placeholder="Enter meters" 
             oninput="MtoKmConverter(this.value)" 
             onchange="MtoKmConverter(this.value)">
   </p>
   <p>Kilometers: <span class="kilometers result">0</span></p>
</div>

<script>
   function KmtoMConverter(length) {
      const meters = length ? (parseFloat(length) * 1000) : 0;
      document.querySelector(".meters").innerHTML = meters;
   }
   
   function MtoKmConverter(length) {
      const kilometers = length ? (parseFloat(length) / 1000) : 0;
      document.querySelector(".kilometers").innerHTML = kilometers;
   }
</script>

</body>
</html>

How It Works

The conversion logic uses simple multiplication and division:

Kilometers to Meters: Multiply by 1000 (1 km = 1000 m)
Meters to Kilometers: Divide by 1000 (1000 m = 1 km)
Event Handlers: oninput triggers during typing, onchange triggers when the field loses focus
Error Handling: Uses parseFloat() to handle decimal inputs and checks for empty values

Enhanced Features

Here's an improved version with multiple unit conversions:

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 0 auto;
      padding: 20px;
   }
   
   .converter {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
      margin: 15px 0;
   }
   
   select, input {
      padding: 8px;
      font-size: 16px;
      margin: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
   }
   
   .result {
      font-size: 18px;
      color: #28a745;
      font-weight: bold;
   }
</style>
</head>
<body>

<h1>Universal Length Converter</h1>

<div class="converter">
   <label>From:</label>
   <select id="fromUnit">
      <option value="m">Meters</option>
      <option value="km">Kilometers</option>
      <option value="cm">Centimeters</option>
      <option value="ft">Feet</option>
      <option value="in">Inches</option>
   </select>
   
   <input type="number" id="inputValue" placeholder="Enter value" oninput="convertLength()">
   
   <br><br>
   
   <label>To:</label>
   <select id="toUnit" onchange="convertLength()">
      <option value="m">Meters</option>
      <option value="km">Kilometers</option>
      <option value="cm">Centimeters</option>
      <option value="ft">Feet</option>
      <option value="in">Inches</option>
   </select>
   
   <p class="result">Result: <span id="result">0</span></p>
</div>

<script>
   // Conversion factors to meters
   const conversionFactors = {
      m: 1,
      km: 1000,
      cm: 0.01,
      ft: 0.3048,
      in: 0.0254
   };
   
   function convertLength() {
      const inputValue = parseFloat(document.getElementById('inputValue').value);
      const fromUnit = document.getElementById('fromUnit').value;
      const toUnit = document.getElementById('toUnit').value;
      
      if (!inputValue || inputValue === 0) {
         document.getElementById('result').textContent = '0';
         return;
      }
      
      // Convert to meters first, then to target unit
      const meters = inputValue * conversionFactors[fromUnit];
      const result = meters / conversionFactors[toUnit];
      
      document.getElementById('result').textContent = result.toFixed(6);
   }
</script>

</body>
</html>

Key Features

Real-time Conversion: Updates as you type using oninput event
Multiple Units: Supports meters, kilometers, centimeters, feet, and inches
Conversion Logic: Uses a base unit (meters) for accurate conversions between any two units
Input Validation: Handles empty inputs and invalid numbers gracefully

Conclusion

Creating a length converter with HTML and JavaScript involves combining form inputs with conversion functions. The key is using event handlers like oninput for real-time updates and proper mathematical conversion factors for accuracy.

AmitDiwan

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

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next