Create a Length Converter using HTML CSS and JavaScript

Last Updated : 19 Jul, 2023

In this article, we will learn how to create a length converter using HTML, CSS, and JavaScript.

The Length Converter is an intuitive web-based application that eliminates the complexities associated with manual conversions. Its user-friendly interface allows users to input a numerical value and select the units they want to convert from and to. With a diverse range of measurement options such as centimeters, inches, feet, and meters, the Length Converter provides versatility and caters to a wide array of conversion scenarios.

Prerequisites: HTML, CSS, JavaScript.

Approach: Let’s explore the approach taken to build this project:

Create a container div that holds all the elements, including the input field, unit selection dropdowns, and result display area.
Now apply some styles to elements such as the container, heading, input field, dropdowns, button, and result area. The styling aims to create a clean and user-friendly interface.
Add JavaScript to handle the conversion logic and interaction with the elements. In the below example, we have created a convert() function, which is triggered when the conversion is required. It retrieves the input value and the selected units from the dropdowns, and calculates the conversion based on the selected units. The calculated result is then displayed in the result area.

Example: The below example shows a web application that converts the different types of length conversions.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Length Converter</title> 
  
    <style> 
        .container { 
            margin: 20px auto; 
            width: 300px; 
            background-color: #f1f1f1; 
            padding: 20px; 
            border-radius: 5px; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
        } 
  
        h1 { 
            text-align: center; 
            margin-bottom: 20px; 
        } 
  
        input[type="number"] { 
            width: 100%; 
            padding: 10px; 
            margin-bottom: 10px; 
            box-sizing: border-box; 
        } 
  
        select { 
            width: 100%; 
            padding: 10px; 
            margin-bottom: 10px; 
            box-sizing: border-box; 
        } 
  
        p { 
            text-align: center; 
            margin-top: 20px; 
            font-weight: bold; 
            font-size: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>Length Converter</h1> 
        <input type="number" id="inputValue" 
            placeholder="Enter value" 
            oninput="convert()"> 
  
        <select id="fromUnit" onchange="convert()"> 
            <option value="cm">Centimeter (cm)</option> 
            <option value="inch">Inch (in)</option> 
            <option value="feet">Feet (ft)</option> 
            <option value="meter">Meter (m)</option> 
            <option value="yard">Yard (yd)</option> 
            <option value="mile">Mile (mi)</option> 
            <option value="kilometer">Kilometer (km)</option> 
        </select> 
        <select id="toUnit" onchange="convert()"> 
            <option value="cm">Centimeter (cm)</option> 
            <option value="inch">Inch (in)</option> 
            <option value="feet">Feet (ft)</option> 
            <option value="meter">Meter (m)</option> 
            <option value="yard">Yard (yd)</option> 
            <option value="mile">Mile (mi)</option> 
            <option value="kilometer">Kilometer (km)</option> 
        </select> 
        <p id="result"></p> 
    </div> 
  
    <script> 
        function convert() { 
            // Retrieve input values 
            let inputValue =  
                document.getElementById("inputValue").value; 
  
            let fromUnit =  
                document.getElementById("fromUnit").value; 
  
            let toUnit =  
                document.getElementById("toUnit").value; 
  
            // Convert the length based on the selected units 
            let result; 
  
            if (fromUnit === "cm" && toUnit === "inch") { 
                result = inputValue / 2.54; 
            } else if (fromUnit === "inch" && toUnit === "cm") { 
                result = inputValue * 2.54; 
            } else if (fromUnit === "cm" && toUnit === "feet") { 
                result = inputValue / 30.48; 
            } else if (fromUnit === "feet" && toUnit === "cm") { 
                result = inputValue * 30.48; 
            } else if (fromUnit === "cm" && toUnit === "meter") { 
                result = inputValue / 100; 
            } else if (fromUnit === "meter" && toUnit === "cm") { 
                result = inputValue * 100; 
            } else if (fromUnit === "inch" && toUnit === "feet") { 
                result = inputValue / 12; 
            } else if (fromUnit === "feet" && toUnit === "inch") { 
                result = inputValue * 12; 
            } else if (fromUnit === "inch" && toUnit === "meter") { 
                result = inputValue * 0.0254; 
            } else if (fromUnit === "meter" && toUnit === "inch") { 
                result = inputValue / 0.0254; 
            } else if (fromUnit === "feet" && toUnit === "meter") { 
                result = inputValue * 0.3048; 
            } else if (fromUnit === "meter" && toUnit === "feet") { 
                result = inputValue / 0.3048; 
            } else if (fromUnit === "cm" && toUnit === "yard") { 
                result = inputValue / 91.44; 
            } else if (fromUnit === "yard" && toUnit === "cm") { 
                result = inputValue * 91.44; 
            } else if (fromUnit === "cm" && toUnit === "mile") { 
                result = inputValue / 160934.4; 
            } else if (fromUnit === "mile" && toUnit === "cm") { 
                result = inputValue * 160934.4; 
            } else if (fromUnit === "cm" && toUnit === "kilometer") { 
                result = inputValue / 100000; 
            } else if (fromUnit === "kilometer" && toUnit === "cm") { 
                result = inputValue * 100000; 
            } else if (fromUnit === "inch" && toUnit === "yard") { 
                result = inputValue / 36; 
            } else if (fromUnit === "yard" && toUnit === "inch") { 
                result = inputValue * 36; 
            } else if (fromUnit === "inch" && toUnit === "mile") { 
                result = inputValue / 63360; 
            } else if (fromUnit === "mile" && toUnit === "inch") { 
                result = inputValue * 63360; 
            } else if (fromUnit === "inch" && toUnit === "kilometer") { 
                result = inputValue * 0.0000254; 
            } else if (fromUnit === "kilometer" && toUnit === "inch") { 
                result = inputValue / 0.0000254; 
            } else if (fromUnit === "feet" && toUnit === "yard") { 
                result = inputValue / 3; 
            } else if (fromUnit === "yard" && toUnit === "feet") { 
                result = inputValue * 3; 
            } else if (fromUnit === "feet" && toUnit === "mile") { 
                result = inputValue / 5280; 
            } else if (fromUnit === "mile" && toUnit === "feet") { 
                result = inputValue * 5280; 
            } else if (fromUnit === "feet" && toUnit === "kilometer") { 
                result = inputValue * 0.0003048; 
            } else if (fromUnit === "kilometer" && toUnit === "feet") { 
                result = inputValue / 0.0003048; 
            } else if (fromUnit === "meter" && toUnit === "yard") { 
                result = inputValue * 1.09361; 
            } else if (fromUnit === "yard" && toUnit === "meter") { 
                result = inputValue / 1.09361; 
            } else if (fromUnit === "meter" && toUnit === "mile") { 
                result = inputValue / 1609.34; 
            } else if (fromUnit === "mile" && toUnit === "meter") { 
                result = inputValue * 1609.34; 
            } else if (fromUnit === "meter" && toUnit === "kilometer") { 
                result = inputValue / 1000; 
            } else if (fromUnit === "kilometer" && toUnit === "meter") { 
                result = inputValue * 1000; 
            } else if (fromUnit === "yard" && toUnit === "mile") { 
                result = inputValue / 1760; 
            } else if (fromUnit === "mile" && toUnit === "yard") { 
                result = inputValue * 1760; 
            } else if (fromUnit === "yard" && toUnit === "kilometer") { 
                result = inputValue / 1093.61; 
            } else if (fromUnit === "kilometer" && toUnit === "yard") { 
                result = inputValue * 1093.61; 
            } else if (fromUnit === "mile" && toUnit === "kilometer") { 
                result = inputValue * 1.60934; 
            } else if (fromUnit === "kilometer" && toUnit === "mile") { 
                result = inputValue / 1.60934; 
            } else { 
                result = inputValue; // No conversion needed 
            } 
  
            // Display the result 
            document.getElementById("result").innerHTML =  
                result.toFixed(4); 
        } 
    </script> 
</body> 
  
</html>