Convert Celsius to Fahrenheit and Fahrenheit to Celsius
Convert between Celsius and Fahrenheit with this small tool, and copy the HTML and JavaScript to run it on your own site.
Temperature Converter
HTML and 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>