<!DOCTYPE html>
<html>
<head>
<title>Temperature Conversion Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.container {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="number"], select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
button {
width: 100%;
padding: 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #3e8e41;
}
#result {
margin-top: 20px;
padding: 15px;
background-color: #e7f3fe;
border-left: 5px solid #2196F3;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
}
.conversion-formula {
margin-top: 20px;
padding: 10px;
background-color: #fff4e5;
border-left: 5px solid #ff9800;
border-radius: 4px;
font-size: 14px;
font-family: monospace;
}
.error {
color: #D8000C;
background-color: #FFD2D2;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
display: none; /* Hidden by default */
}
</style>
</head>
<body>
<h1>Temperature Unit Converter</h1>
<div class="container">
<!-- Input Value -->
<div class="input-group">
<label for="tempInput">Enter Temperature:</label>
<input type="number" id="tempInput" placeholder="e.g., 100" step="any">
</div>
<!-- Source Unit Selector -->
<div class="input-group">
<label for="sourceUnit">Convert From:</label>
<select id="sourceUnit">
<option value="C">Celsius (°C)</option>
<option value="F">Fahrenheit (°F)</option>
<option value="R">Reamur (°Ré)</option>
<option value="K">Kelvin (K)</option>
<option value="Ra">Rankine (°Ra)</option>
</select>
</div>
<!-- Target Unit Selector -->
<div class="input-group">
<label for="targetUnit">Convert To:</label>
<select id="targetUnit">
<option value="F">Fahrenheit (°F)</option>
<option value="C" selected>Celsius (°C)</option>
<option value="R">Reamur (°Ré)</option>
<option value="K">Kelvin (K)</option>
<option value="Ra">Rankine (°Ra)</option>
</select>
</div>
<!-- Convert Button -->
<button id="convertBtn">Convert</button>
<!-- Error Message Display -->
<div id="errorMsg" class="error"></div>
<!-- Result Display -->
<div id="result">Please enter a temperature to convert.</div>
<!-- (Optional) Formula Display Area -->
<div id="formulaDisplay" class="conversion-formula">
Formula will be shown here after conversion.
</div>
</div>
<script>
// Wait for the DOM to be fully loaded before attaching event listeners
document.addEventListener('DOMContentLoaded', function() {
// Get references to the DOM elements
const convertBtn = document.getElementById('convertBtn');
const tempInput = document.getElementById('tempInput');
const sourceUnit = document.getElementById('sourceUnit');
const targetUnit = document.getElementById('targetUnit');
const resultDisplay = document.getElementById('result');
const errorDisplay = document.getElementById('errorMsg');
const formulaDisplay = document.getElementById('formulaDisplay');
// Attach the click event listener to the button
convertBtn.addEventListener('click', convertTemperature);
function convertTemperature() {
// Reset error display
errorDisplay.style.display = 'none';
errorDisplay.textContent = '';
// 1. Get and validate input value
const inputValue = parseFloat(tempInput.value);
if (isNaN(inputValue)) {
showError("Please enter a valid number.");
return;
}
// 2. Get the selected units
const fromUnit = sourceUnit.value;
const toUnit = targetUnit.value;
// 3. Perform the conversion using the pivot method
let result;
let formulaText = ""; // For the optional formula display
// If source and target are the same, return the input
if (fromUnit === toUnit) {
result = inputValue;
formulaText = `No conversion needed. ${inputValue} °${fromUnit} = ${result} °${toUnit}`;
} else {
// Convert the input value to Celsius first (the pivot)
let celsiusValue;
switch(fromUnit) {
case 'C':
celsiusValue = inputValue;
formulaText += `Pivot: ${inputValue} °C`;
break;
case 'F':
celsiusValue = (inputValue - 32) * 5/9;
formulaText += `(${inputValue} °F - 32) × 5/9 = ${celsiusValue.toFixed(4)} °C`;
break;
case 'R':
celsiusValue = inputValue * 5/4;
formulaText += `${inputValue} °Ré × 5/4 = ${celsiusValue.toFixed(4)} °C`;
break;
case 'K':
celsiusValue = inputValue - 273.15;
formulaText += `${inputValue} K - 273.15 = ${celsiusValue.toFixed(4)} °C`;
break;
case 'Ra':
celsiusValue = (inputValue - 491.67) * 5/9;
formulaText += `(${inputValue} °Ra - 491.67) × 5/9 = ${celsiusValue.toFixed(4)} °C`;
break;
}
// Then convert from Celsius to the target unit
switch(toUnit) {
case 'C':
result = celsiusValue;
formulaText += ` = ${result.toFixed(4)} °C`;
break;
case 'F':
result = (celsiusValue * 9/5) + 32;
formulaText += ` → (${celsiusValue.toFixed(4)} °C × 9/5) + 32 = ${result.toFixed(4)} °F`;
break;
case 'R':
result = celsiusValue * 4/5;
formulaText += ` → ${celsiusValue.toFixed(4)} °C × 4/5 = ${result.toFixed(4)} °Ré`;
break;
case 'K':
result = celsiusValue + 273.15;
formulaText += ` → ${celsiusValue.toFixed(4)} °C + 273.15 = ${result.toFixed(4)} K`;
break;
case 'Ra':
result = (celsiusValue + 273.15) * 9/5;
formulaText += ` → (${celsiusValue.toFixed(4)} °C + 273.15) × 9/5 = ${result.toFixed(4)} °Ra`;
break;
}
}
// 4. Display the result
resultDisplay.textContent = `Result: ${inputValue} ${getUnitName(fromUnit)} = ${result.toFixed(4)} ${getUnitName(toUnit)}`;
// 5. (Optional) Display the formula steps
formulaDisplay.textContent = formulaText;
}
function showError(message) {
errorDisplay.textContent = message;
errorDisplay.style.display = 'block';
}
// Helper function to get the full unit name for display
function getUnitName(unitCode) {
const unitNames = {
'C': '°C',
'F': '°F',
'R': '°Ré',
'K': 'K',
'Ra': '°Ra'
};
return unitNames[unitCode];
}
// Optional: Add event listener to the input field to convert on 'Enter' key
tempInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
convertTemperature();
}
});
});
</script>
</body>
</html>
