3
\$\begingroup\$

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>

\$\endgroup\$
2
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.