This is one of my first simple javascript projects. Feedback is appreciated! Basically, everytime the select option is changed, the result is shown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
</select>
<div id="sect">
<section>
<select onchange="onChange('from'); calculate()" id="selectFrom">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
</select>
<span class="toText">to</span>
<select onchange="onChange('to'); calculate()" id="selectTo">
<option value="Celcius">Celcius</option>
<option value="Farenheit">Farenheit</option>
<option value="Kelvin">Kelvin</option>
</select>
</section>
<section>
<input type="text" id="from" onchange="calculate()"> <span
id="toText"> to </span> <input type="text" id="to">
</section>
<br>
<section>
<p id="results"></p>
</section>
</div>
<script>
onChange('from');
onChange('to');
function onChange(fromOrTo) {
if(fromOrTo === 'from') {
document.getElementById("from").placeholder = document.getElementById("selectFrom").value;
} else if(fromOrTo === 'to') {
document.getElementById("to").placeholder = document.getElementById("selectTo").value;
}
}
function calculate() {
var from = document.getElementById("selectFrom");
var to = document.getElementById("selectTo");
var fromValue = parseInt(document.getElementById("from").value);
var toValue = parseInt(document.getElementById("to").value);
if(from.value == "Celcius") {
if(to.value == "Farenheit") {
result = ((fromValue * 9)/5) + 32;
}
else if(to.value == "Kelvin") {
result = fromValue + 273;
} else {
result = "Cannot calculate!";
}
document.getElementById("to").value = result.toFixed(2);
}
else if(from.value == "Farenheit") {
if(to.value == "Celcius") {
result = ((fromValue - 32) * 5)/9
}
else if(to.value == "Kelvin") {
result = ((fromValue + 459.67) * 5)/9;
} else {
result = "Cannot calculate!";
}
document.getElementById("to").value = result.toFixed(2);
}
else if(from.value == "Kelvin") {
if(to.value == "Celcius") {
result = fromValue - 273;
}
else if(to.value == "Farenheit") {
result = 1.8 * (fromValue-273) + 32;
} else {
result = "Cannot calculate!";
}
document.getElementById("to").value = result.toFixed(2);
}
}
</script>
</body>
</html>
