Article Categories

Selected Reading

How to create a speed converter with HTML and JavaScript?

Javascript Web Development Object Oriented Programming

To create a speed converter with HTML and JavaScript, we'll build a simple web application that converts kilometers per hour to meters per second. This involves HTML for the interface and JavaScript for the conversion logic.

HTML Structure

The HTML creates the user interface with an input field for entering speed values and a display area for the converted result:

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
      max-width: 600px;
      margin: 0 auto;
   }
   input, span {
      font-size: 20px;
   }
   input {
      padding: 8px;
      margin: 10px 0;
      border: 2px solid #ddd;
      border-radius: 5px;
   }
   .result {
      background-color: #f0f8ff;
      padding: 15px;
      border-radius: 5px;
      margin-top: 20px;
   }
</style>
</head>
<body>
<h1>Speed Converter</h1>
<h2>Convert Kilometers per Hour to Meters per Second</h2>
<p>
<label>Kilometers Per Hour:</label><br>
<input
   id="inputKm"
   type="number"
   placeholder="Enter speed in KPH"
   oninput="convertSpeed(this.value)"
   onchange="convertSpeed(this.value)"/>
</p>
<div class="result">
   <p>Meters Per Second: <span class="metersPerSecond">0</span></p>
</div>

<script>
   function convertSpeed(kmph) {
      const metersPerSecond = kmph * 0.277778;
      document.querySelector(".metersPerSecond").innerHTML = 
         kmph ? metersPerSecond.toFixed(2) : "0";
   }
</script>
</body>
</html>

How the Conversion Works

The conversion from kilometers per hour to meters per second uses the formula:

1 kilometer = 1000 meters
1 hour = 3600 seconds
Conversion factor: 1000 ÷ 3600 = 0.277778

JavaScript Function Breakdown

The convertSpeed() function handles the conversion logic:

function convertSpeed(kmph) {
   // Convert KPH to meters per second
   const metersPerSecond = kmph * 0.277778;
   
   // Update the display with formatted result
   document.querySelector(".metersPerSecond").innerHTML = 
      kmph ? metersPerSecond.toFixed(2) : "0";
}

Enhanced Version with Multiple Conversions

Here's an expanded version that converts to multiple speed units:

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 700px;
      margin: 0 auto;
   }
   .converter {
      background: #f9f9f9;
      padding: 20px;
      border-radius: 10px;
      margin: 20px 0;
   }
   input {
      padding: 10px;
      font-size: 16px;
      border: 2px solid #ddd;
      border-radius: 5px;
      width: 200px;
   }
   .results {
      margin-top: 20px;
   }
   .result-item {
      background: white;
      padding: 10px;
      margin: 5px 0;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
</style>
</head>
<body>
<h1>Multi-Unit Speed Converter</h1>
<div class="converter">
   <label>Enter Speed (KPH):</label><br>
   <input type="number" id="speedInput" placeholder="Speed in KPH" 
          oninput="convertAllUnits(this.value)">
   
   <div class="results">
      <div class="result-item">Meters per Second: <span id="mps">0</span></div>
      <div class="result-item">Miles per Hour: <span id="mph">0</span></div>
      <div class="result-item">Feet per Second: <span id="fps">0</span></div>
   </div>
</div>

<script>
function convertAllUnits(kmph) {
   if (!kmph || kmph === '') {
      document.getElementById('mps').textContent = '0';
      document.getElementById('mph').textContent = '0';
      document.getElementById('fps').textContent = '0';
      return;
   }
   
   const speed = parseFloat(kmph);
   
   // Conversion calculations
   const mps = speed * 0.277778;
   const mph = speed * 0.621371;
   const fps = speed * 0.911344;
   
   // Update display
   document.getElementById('mps').textContent = mps.toFixed(3);
   document.getElementById('mph').textContent = mph.toFixed(3);
   document.getElementById('fps').textContent = fps.toFixed(3);
}
</script>
</body>
</html>

Key Features

Real-time conversion: Results update as you type using the oninput event
Input validation: Handles empty inputs gracefully
Formatted output: Uses toFixed() to limit decimal places
Responsive design: CSS styling makes it look professional

Conversion Formulas

From KPH to	Formula	Conversion Factor
Meters per Second	KPH × 0.277778	0.277778
Miles per Hour	KPH × 0.621371	0.621371
Feet per Second	KPH × 0.911344	0.911344

Conclusion

Creating a speed converter with HTML and JavaScript is straightforward using input events and conversion formulas. The key is handling user input properly and formatting the output for better readability.

AmitDiwan

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

383 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next