Temperature Converter
HTML/Javascript Code
This is a really simple project, I have provided the code which you can use on your website.
A link back would be appreciated 😉
<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
<script>
// Function to convert temperature
function convertTemperature() {
// Get the input temperature value from the form
var temperature = document.getElementById("temperature").value;
// Get the selected conversion direction
var conversionType = document.getElementById("conversionType").value;
// Initialize the result and format variables
var result = 0;
var format = '';
// Check if the conversion is from Fahrenheit to Celsius
if (conversionType === "FtoC") {
// Convert from Fahrenheit to Celsius
result = (temperature - 32) * 5 / 9;
format = '\u00B0C'; // Celsius symbol
} else {
// Convert from Celsius to Fahrenheit
result = (temperature * 9 / 5) + 32;
format = '\u00B0F'; // Fahrenheit symbol
}
// Display the result
document.getElementById("result").innerHTML = "Result: " + result.toFixed(2) + " " + format;
}
</script>
</head>
<body>
<h1>Temperature Converter</h1>
<!-- Convert options -->
<label for="conversionType">Convert:</label>
<select id="conversionType" name="conversionType">
<option value="FtoC">Fahrenheit to Celsius</option>
<option value="CtoF">Celsius to Fahrenheit</option>
</select><br><br>
<!-- Temperature input form -->
<form>
<label for="temperature">Enter temperature:</label>
<input type="number" id="temperature" name="temperature" required><br><br>
<input type="button" value="Convert" onclick="convertTemperature()">
</form>
<br><br>
<!-- Div to display the result -->
<div id="result"></div>
</body>
</html>
Leave a Reply