Temperature Conversion Application :
1. Convert from Fahrenheit to Celsius
2. Convert from Celsius to Fahrenheit
Solution:
Step 1: create index.html file and copy the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Temperature Conversion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Temperature Conversion Application</h1>
<h2>Convert from Fahrenheit to Celsius: </h2>
<input type="number" id="fahrenheit"></input> <button id="fToC" onclick="fToC(fahrenheit.value)">Convert</button>
<hr />
<h2>Convert from Celsius to Fahrenheit: </h2>
<input type="number" id="celsius"></input> <button id="cToF" onclick="fToC(celsius.value)">Convert</button>
<p id="conversion"></p>
<script src="main.js"></script>
</body>
</html>
Step 2: create main.js in the same location where index.html, copy and paste the below code
function cToF(celsius)
{
console.log(celsius);
var cTemp = parseInt(celsius);
var cToFahr = cTemp * 9 / 5 + 32;
//Note that the Math.round() method is used, so that the result will be returned as an integer.
var message = cTemp+'\xB0C is ' + Math.round(cToFahr) + ' \xB0F.';
document.getElementById("conversion").innerHTML = message;
//console.log(message);
}
function fToC(fahrenheit)
{
console.log(fahrenheit);
var fTemp = parseInt(fahrenheit);
var fToCel = (fTemp - 32) * 5 / 9;
//Note that the Math.round() method is used, so that the result will be returned as an integer.
var message = fTemp+'\xB0F is ' + Math.round(fToCel) + '\xB0C.';
document.getElementById("conversion").innerHTML = message;
//console.log(message);
} Step 3: finally create style.css in the same location and copy and paste the code below
body {
padding: 20px;
color: #ececec;
}
h1, h2, p {
font-family: Arial, sans-serif;
}
h1 {
color: #008B8B;
}
h2 {
color: #1BA39C;
}
p, label {
color: #4F5A65;
}
All done !!! just run the index.html in browser or open with chrome or Mozila or safari whatever you prefer