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.
- Celsius Input: Converts the entered value to Fahrenheit and Kelvin when the user inputs a temperature in Celsius.
- Fahrenheit Input: Converts the entered Fahrenheit value to Celsius and Kelvin using standard formulas.
- Kelvin Input: Converts Kelvin to Celsius and Fahrenheit.
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.
- Centimeters Input: Converts centimeters to meters and kilometers.
- Meters Input: Converts meters to centimeters and kilometers.
- Kilometers Input: Converts kilometers to meters and centimeters.
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:
- Input Fields: The function first retrieves the values from the input fields for Celsius, Fahrenheit, and Kelvin using
document.getElementById()
. These values are stored in the variablescelsiusInput
,fahrenheitInput
, andkelvinInput
, respectively. - Conversion Logic:
- If the user inputs a value in the Celsius field, the
if
block is triggered for the casefield === "celsius"
. The entered Celsius value is converted to Fahrenheit and Kelvin using the formulas:fahrenheit = (celsius * 9/5) + 32; kelvin = celsius + 273.15;
These values are then displayed in their respective input fields by updating theirvalue
attributes. - If the input is in Fahrenheit (
field === "fahrenheit"
), the function calculates Celsius and Kelvin values using:celsius = (fahrenheit - 32) * 5/9; kelvin = celsius + 273.15;
Again, the new values are updated in the respective input fields. - For Kelvin input (
field === "kelvin"
), the function calculates the corresponding Celsius and Fahrenheit using:celsius = kelvin - 273.15; fahrenheit = (celsius * 9/5) + 32;
These values are displayed in the input fields for Celsius and Fahrenheit. - NaN Check: Before performing any conversions, the script checks whether the input value is valid using
isNaN()
. If the input is not a valid number, no conversion takes place.
- If the user inputs a value in the Celsius field, the
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.
- Input Fields: The function retrieves the values from the input fields for centimeters, meters, and kilometers using
document.getElementById()
, storing them in variablescmInput
,mInput
, andkmInput
. - Conversion Logic:
- If the user enters a value in centimeters (
field === "cm"
), the function calculates the equivalent meters and kilometers using the formulas:meters = cm / 100; kilometers = cm / 100000;
The new values are then displayed in the meters and kilometers input fields. - If the input is in meters (
field === "m"
), the function calculates the equivalent centimeters and kilometers using:centimeters = meters * 100; kilometers = meters / 1000;
These values are updated in the input fields for centimeters and kilometers. - For kilometers (
field === "km"
), the function calculates the equivalent centimeters and meters using:centimeters = kilometers * 100000; meters = kilometers * 1000;
The results are displayed in the corresponding input fields for centimeters and meters.
- If the user enters a value in centimeters (
- NaN Check: As with the temperature conversion function, the script checks if the input is a valid number using
isNaN()
. If the input is not valid, no calculations are made.
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>