Horje
Create a Length Converter using HTML CSS and JavaScript

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>

Output:

Length Converter

Length Converter


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to Access Matched Groups in a JavaScript Regular Expression ? How to Access Matched Groups in a JavaScript Regular Expression ?
How to Add Tag Input in React Native ? How to Add Tag Input in React Native ?
How to Pass Value from One Child Component to Another in VueJS ? How to Pass Value from One Child Component to Another in VueJS ?
Applications of Map in JavaScript Applications of Map in JavaScript
What are triple-slash Directives in TypeScript ? What are triple-slash Directives in TypeScript ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 13



 

Horje