How to Create a Simple Unit Conversion App with JavaScript
In this Javascript tutorial, we will see how to create a conversion tool to convert values between different units (e.g., inches to centimeters, pounds to kilograms, Fahrenheit to Celsius) and displays the converted result.
Project Source Code:
<!DOCTYPE html>
<html>
<head>
<title>conversion Tool</title>
<style>
body{ background-color: #f5f5f5; font-family: 'Open Sans', sans-serif; color: #333; }
#conversion-tool{ background-color: #fff; border-radius: 5px; padding: 20px; max-width: 400px;
margin: 20px auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
}
form{ display: flex; flex-direction: column; }
label{ font-weight: bold; margin-bottom: 5px; }
input[type="number"]:focus, select:focus{ outline: none; }
input[type="number"], select{
border: 1px solid #ddd; border-radius: 3px; padding: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
margin-bottom: 10px; font-size: 16px; background-color: #f2f2f2;
}
/* add a drop icon to the select */
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l6 6 6-6H0z' fill='%23333'
fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 25px;
}
button{ background-color: #333; color: #fff; border:none; border-radius: 5px;
padding: 10px 20px; cursor: pointer; transition: all 0.2s ease-in-out;
}
button:hover{ background-color: #555; }
#output{ font-weight: bold; font-size: 16px; margin-top: 25px; }
#output-value{ color: purple; }
</style>
</head>
<body>
<div id="conversion-tool">
<form>
<label for="input-value">Value to Convert:</label>
<input type="number" id="input-value" min="0">
<br>
<label for="from-unit">Convert From:</label>
<select id="from-unit">
<option value="inches">Inches</option>
<option value="centimeters">Centimeters</option>
<option value="pounds">Pounds</option>
<option value="kilograms">Kilograms</option>
<option value="fahrenheit">Fahrenheit</option>
<option value="celesius">Celesius</option>
</select>
<br>
<label for="to-unit">Convert To:</label>
<select id="to-unit">
<option value="inches">Inches</option>
<option value="centimeters">Centimeters</option>
<option value="pounds">Pounds</option>
<option value="kilograms">Kilograms</option>
<option value="fahrenheit">Fahrenheit</option>
<option value="celesius">Celesius</option>
</select>
<br>
<button type="button" id="convert-btn">Convert</button>
<p id="output">Converted Value:<span id="output-value"></span></p>
</form>
</div>
<script>
// This function gets called when the "Convert" button is clicked
function convert()
{
// Get the user's input value and selected units
const inputValue = document.getElementById("input-value").value;
const fromUnit = document.getElementById("from-unit").value;
const toUnit = document.getElementById("to-unit").value;
// Initialize the output value as the input value
let outputValue = inputValue;
// Check the selected units and perform the appropriate calculations
if(fromUnit === "inches" && toUnit === "centimeters"){
outputValue = inputValue * 2.54;
}
else if(fromUnit === "centimeters" && toUnit === "inches"){
outputValue = inputValue / 2.54;
}
else if(fromUnit === "pounds" && toUnit === "kilograms"){
outputValue = inputValue * 0.453592;
}
else if(fromUnit === "kilograms" && toUnit === "pounds"){
outputValue = inputValue / 0.453592;
}
else if(fromUnit === "fahrenheit" && toUnit === "celesius"){
outputValue = (inputValue-32) * (5/9);
}
else if(fromUnit === "celesius" && toUnit === "fahrenheit"){
outputValue = (inputValue * (9/5)) + 32;
}
// Update the output field with the converted value
document.getElementById("output-value").innerHTML = outputValue;
}
// Attach the "convert" function to the "Convert" button's click event
document.getElementById("convert-btn").addEventListener("click", convert);
</script>
</body>
</html>
Code Explanation:
this JavaScript code, allows users to convert values between different units and displays the converted result..
This JavaScript code performs the following actions:
1 - The code defines a JavaScript function called convert() that performs the unit conversion.
2 - It retrieves user input values (value to convert, source unit, and target unit) from the HTML form.
3 - The function then calculates the converted value based on the selected units.
4 - The result of the conversion is displayed on the webpage..
OUTPUT:
Download Projects Source Code