<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache">
<title>Example</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
input {
width: 3em;
margin: 0em 1em 0em 0.5em;
}
#error {
font-weight: bold;
margin: 0.5em;
}
table {
border: thin solid gray;
border-collapse: collapse;
margin: 1em;
}
th, td {
border: thin solid gray;
padding: 0.25em;
text-align: center;
}
</style>
<script defer src="example.js"></script>
</head>
<body>
<noscript>Enable JavaScript to see web page content.</noscript>
<h1>Temperature Conversion Table</h1>
<p>
<label for="start">Start:</label><input id="start"></input>
<label for="stop">Stop:</label><input id="stop"></input>
<label for="step">Step:</label><input id="step"></input></p>
<p><label id="error"></label></p>
<hr>
<table>
<thead>
<tr>
<th>Fahrenheit</th>
<th>Celsius</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</body>
</html>
// This program displays a temperature conversion chart and demonstrates
// JavaScript loops.
//
// References:
// https://www.mathsisfun.com/temperature-conversion.html
// https://en.wikibooks.org/wiki/JavaScript
"use strict";
const TEMPERATURE_DIFFERENCE = 32;
const TEMPERATURE_RATIO = 5 / 9;
window.addEventListener("load", function () {
document.getElementById("start").addEventListener("focus", inputFocus);
document.getElementById("stop").addEventListener("focus", inputFocus);
document.getElementById("step").addEventListener("focus", inputFocus);
document.getElementById("start").addEventListener("input", inputInput);
document.getElementById("stop").addEventListener("input", inputInput);
document.getElementById("step").addEventListener("input", inputInput);
document.getElementById("start").focus();
});
function inputFocus() {
document.activeElement.select();
document.getElementById("error").innerText =
"Enter " + document.activeElement.id + " value.";
}
function inputInput() {
let value = document.activeElement.value;
if (checkInput()) {
document.getElementById("error").innerText = "";
displayTable();
}
}
function checkInput() {
let value = document.activeElement.value;
if (isNaN(value) || value.trim().length == 0) {
document.getElementById("error").innerText =
document.activeElement.id + " must be a number!";
return false;
}
value = document.getElementById("start").value;
if (isNaN(value) || value.trim().length == 0) {
return false;
}
value = document.getElementById("stop").value;
if (isNaN(value) || value.trim().length == 0) {
return false;
}
value = document.getElementById("step").value;
if (isNaN(value) || value.trim().length == 0) {
return false;
}
return true;
}
function displayTable() {
let start = Number(document.getElementById("start").value);
let stop = Number(document.getElementById("stop").value);
let step = Number(document.getElementById("step").value);
if (stop < start) {
document.getElementById("error").innerText = "Stop must be greater than or equal to start!"
document.getElementById("tbody").innerText = "";
return;
}
if (step <= 0) {
document.getElementById("error").innerText = "Step must be greater than or equal to 0!"
document.getElementById("tbody").innerText = "";
return;
}
let result = ""
let fahrenheit = start;
while (fahrenheit <= stop) {
let celsius = fahrenheitToCelsius(fahrenheit);
result += `<tr><td>${fahrenheit.toFixed(1)}</td><td>${celsius.toFixed(1)}</td></tr>`;
fahrenheit += step;
}
document.getElementById("tbody").innerHTML = result;
}
function fahrenheitToCelsius(fahrenheit) {
let celsius = (fahrenheit - TEMPERATURE_DIFFERENCE) * TEMPERATURE_RATIO;
return celsius;
}
