Problem
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>Solution
Some minor observations:
-
It’s a good idea to check your html projects with a validator of some sort (for example: https://validator.w3.org/). There are some slight mistakes in your file which can easily be caught by any validator.
-
Usually you want to keep content, presentation and behavior separated from another. This means you put scripts, CSS etc. into their own files instead of having them all in your html file.
-
From a usability perspective I think it would be nicer to have explicit control over when the conversion takes place. E.g. via a button or something similiar.