Unit Conversions

Unit Conversions

Temperature Conversion

Length Conversion

1. DOCTYPE and HTML

The document begins with the declaration <!DOCTYPE html>, which tells the browser that this is an HTML5 document. This ensures that the web page is rendered correctly across all browsers. The <html lang="en"> tag starts the HTML document and specifies that the language of the document is English ("en").

2. Head Section

The <head> section contains metadata and links to external resources that define the structure and functionality of the web page. It is not visible to the user but is essential for page functionality.

2.1 Meta Charset

This tag specifies the character encoding for the document as UTF-8. UTF-8 supports most characters from different languages and symbols, ensuring that the content displays correctly.

2.2 Meta Viewport

This tag sets the viewport to control the layout of the page on different devices. The width=device-width ensures the width matches the screen width of the device. initial-scale=1.0 prevents zooming, ensuring the page renders properly on mobile and desktop devices.

2.3 Title

This defines the title of the webpage, which is displayed on the browser tab or window. The title in this case is "Unit Conversion".

2.4 Link Href

This tag links to an external Bootstrap CSS file hosted on a CDN. Bootstrap is a popular CSS framework that simplifies styling and layout management, allowing the page to be responsive and aesthetically pleasing.

2.5 Script Function Definition

The <script> section includes JavaScript code to add dynamic functionality to the page. There are two functions:

  • updateTemperature(field): Handles the logic for converting between Celsius, Fahrenheit, and Kelvin based on user input. It reads the value from the input field of the temperature specified (Celsius, Fahrenheit, or Kelvin) and updates the other fields accordingly using standard conversion formulas.
  • updateLength(field): Similar to the temperature conversion logic, this function converts values between Centimeters, Meters, and Kilometers. Based on user input, it updates the corresponding values using basic unit conversion calculations.

3. Body Section

The <body> tag contains all the visible content that the user interacts with. This is the part that renders on the browser and includes both the layout and elements for interaction.

3.1 DIV Tags and Bootstrap Usage

This <div> defines a container for all the content and applies Bootstrap classes. The container class centers the content, and py-5 adds vertical padding to give space around the content.

3.2 Temperature Conversion Form

The first section handles temperature conversion. It consists of a heading and three input fields for Celsius, Fahrenheit, and Kelvin. Each field has the oninput attribute to trigger the corresponding JavaScript function, updateTemperature(), when the user enters a value.

3.3 Length Conversion Form

The second section handles length conversion, and its structure is similar to the temperature conversion form. It has input fields for Centimeters, Meters, and Kilometers. Each field triggers the updateLength() function when the user enters a value.

3.4 Closing Tags

Finally, the </div> closes the main container, and </body> and </html> close the HTML document.

4. Script Explanation

The script within the <head> section contains two JavaScript functions that handle the conversion logic. Let's break it down step by step.

4.1 updateTemperature(field)

This function handles temperature conversions between Celsius, Fahrenheit, and Kelvin. Here's how it works:

4.2 updateLength(field)

This function handles the conversion of length units between Centimeters, Meters, and Kilometers. Its logic is structured similarly to the temperature conversion function.

4.3 Integration with the HTML

Both functions are tied directly to the input fields in the HTML. Whenever a user types a value in any input field, the oninput event triggers the respective function (updateTemperature() or updateLength()). These functions then convert the input value and update the other fields with the appropriate conversions.

For example, if a user enters a value in the Celsius field, the updateTemperature('celsius') function is called, and the Fahrenheit and Kelvin fields are updated with the corresponding converted values.

Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unit Conversion</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script>
        function updateTemperature(field) {
            const celsiusInput = document.getElementById("celsius");
            const fahrenheitInput = document.getElementById("fahrenheit");
            const kelvinInput = document.getElementById("kelvin");

            const celsius = parseFloat(celsiusInput.value);
            const fahrenheit = parseFloat(fahrenheitInput.value);
            const kelvin = parseFloat(kelvinInput.value);

            if (field === "celsius" && !isNaN(celsius)) {
                fahrenheitInput.value = (celsius * 9/5 + 32).toFixed(2);
                kelvinInput.value = (celsius + 273.15).toFixed(2);
            } else if (field === "fahrenheit" && !isNaN(fahrenheit)) {
                celsiusInput.value = ((fahrenheit - 32) * 5/9).toFixed(2);
                kelvinInput.value = (((fahrenheit - 32) * 5/9) + 273.15).toFixed(2);
            } else if (field === "kelvin" && !isNaN(kelvin)) {
                celsiusInput.value = (kelvin - 273.15).toFixed(2);
                fahrenheitInput.value = ((kelvin - 273.15) * 9/5 + 32).toFixed(2);
            }
        }

        function updateLength(field) {
            const cmInput = document.getElementById("cm");
            const mInput = document.getElementById("m");
            const kmInput = document.getElementById("km");

            const cm = parseFloat(cmInput.value);
            const m = parseFloat(mInput.value);
            const km = parseFloat(kmInput.value);

            if (field === "cm" && !isNaN(cm)) {
                mInput.value = (cm / 100).toFixed(2);
                kmInput.value = (cm / 100000).toFixed(5);
            } else if (field === "m" && !isNaN(m)) {
                cmInput.value = (m * 100).toFixed(2);
                kmInput.value = (m / 1000).toFixed(5);
            } else if (field === "km" && !isNaN(km)) {
                cmInput.value = (km * 100000).toFixed(2);
                mInput.value = (km * 1000).toFixed(2);
            }
        }
    </script>
</head>
<body class="bg-light">

<!-- Method 1 - With using BootStrap -->
<div class="container py-5">
    <h3 class="mb-4">Temperature Conversion</h3>
    <div class="row g-3">
        <div class="col-md-4">
            <label for="celsius" class="form-label">Celsius</label>
            <input type="number" class="form-control" id="celsius" oninput="updateTemperature('celsius')" placeholder="Enter Celsius">
        </div>
        <div class="col-md-4">
            <label for="fahrenheit" class="form-label">Fahrenheit</label>
            <input type="number" class="form-control" id="fahrenheit" oninput="updateTemperature('fahrenheit')" placeholder="Enter Fahrenheit">
        </div>
        <div class="col-md-4">
            <label for="kelvin" class="form-label">Kelvin</label>
            <input type="number" class="form-control" id="kelvin" oninput="updateTemperature('kelvin')" placeholder="Enter Kelvin">
        </div>
    </div>

    <h3 class="mt-5 mb-4">Length Conversion</h3>
    <div class="row g-3">
        <div class="col-md-4">
            <label for="cm" class="form-label">Centimeters</label>
            <input type="number" class="form-control" id="cm" oninput="updateLength('cm')" placeholder="Enter Centimeters">
        </div>
        <div class="col-md-4">
            <label for="m" class="form-label">Meters</label>
            <input type="number" class="form-control" id="m" oninput="updateLength('m')" placeholder="Enter Meters">
        </div>
        <div class="col-md-4">
            <label for="km" class="form-label">Kilometers</label>
            <input type="number" class="form-control" id="km" oninput="updateLength('km')" placeholder="Enter Kilometers">
        </div>
    </div>
</div>

<!-- Method 2 - Without using BootStrap -->

<h3>Temperature Conversion</h3>
<label>Celsius: <input type="number" id="celsius" oninput="updateTemperature('celsius')" placeholder="Enter Celsius"></label><br>
<label>Fahrenheit: <input type="number" id="fahrenheit" oninput="updateTemperature('fahrenheit')" placeholder="Enter Fahrenheit"></label><br>
<label>Kelvin: <input type="number" id="kelvin" oninput="updateTemperature('kelvin')" placeholder="Enter Kelvin"></label><br>

<h3>Length Conversion</h3>
<label>Centimeters: <input type="number" id="cm" oninput="updateLength('cm')" placeholder="Enter Centimeters"></label><br>
<label>Meters: <input type="number" id="m" oninput="updateLength('m')" placeholder="Enter Meters"></label><br>
<label>Kilometers: <input type="number" id="km" oninput="updateLength('km')" placeholder="Enter Kilometers"></label><br>


</script>
</body>
</html>