Temperature converter with JavaScript
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
3
down vote
favorite
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>javascript beginner html css unit-conversion
edited Mar 2 at 15:36
200_success
123k14142399
asked Mar 2 at 14:05
Adit
183
add a comment |Â
up vote
3
down vote
favorite
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>javascript beginner html css unit-conversion
edited Mar 2 at 15:36
200_success
123k14142399
asked Mar 2 at 14:05
Adit
183
add a comment |Â
up vote
3
down vote
favorite
up vote
3
down vote
favorite
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>javascript beginner html css unit-conversion
edited Mar 2 at 15:36
200_success
123k14142399
asked Mar 2 at 14:05
Adit
183
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><!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><!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>javascript beginner html css unit-conversion
edited Mar 2 at 15:36
200_success
123k14142399
asked Mar 2 at 14:05
Adit
183
edited Mar 2 at 15:36
200_success
123k14142399
edited Mar 2 at 15:36
200_success
123k14142399
edited Mar 2 at 15:36
200_success
123k14142399
123k14142399
asked Mar 2 at 14:05
Adit
183
asked Mar 2 at 14:05
Adit
183
asked Mar 2 at 14:05
Adit
183
183
add a comment |Â
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
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.
answered Mar 2 at 15:27
yuri
3,3862832
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
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.
answered Mar 2 at 15:27
yuri
3,3862832
add a comment |Â
up vote
2
down vote
accepted
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.
answered Mar 2 at 15:27
yuri
3,3862832
add a comment |Â
up vote
2
down vote
accepted
up vote
2
down vote
accepted
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.
answered Mar 2 at 15:27
yuri
3,3862832
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.
answered Mar 2 at 15:27
yuri
3,3862832
answered Mar 2 at 15:27
yuri
3,3862832
answered Mar 2 at 15:27
yuri
3,3862832
answered Mar 2 at 15:27
yuri
3,3862832
3,3862832
add a comment |Â
add a comment |Â
Â
draft saved
draft discarded
Â
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f188679%2ftemperature-converter-with-javascript%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password