How to create a length converter with HTML and JavaScript?



To create a length converter with HTML and JavaScript, the code is as follows −

Example

 Live Demo

<!DOCTYPE html> <html> <head> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    }    input,span{       font-size: 20px;    } </style> </head> <body> <h1>Length Converter</h1> <h2>Type length in Kilometers to convert it into meters</h2> <p> <label>Kilometers</label> <input id="inputKm" type="number" placeholder="Kilometers" oninput="KmtoMConverter(this.value)" onchange="KmtoMConverter(this.value)"> </p> <p>Meters: <span class="meters"></span></p> <script>    function KmtoMConverter(length) {       document.querySelector(".meters").innerHTML=length*1000;    } </script> </body> </html>

Output

The above code will produce the following output −

On entering length in kilometers −

Updated on: 2020-05-12T13:47:55+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements