<!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 () { let elements = document.getElementsByTagName("input"); for (let i = 0; i < elements.length; i++) { elements[i].addEventListener("focus", inputFocus); elements[i].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 = ""; let table = createTable(); if (table != null) { displayTable(table); } } } 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; } let elements = document.getElementsByTagName("input"); for (let i = 0; i < elements.length; i++) { value = elements[i].value; if (isNaN(value) || value.trim().length == 0) { return false; } } return true; } function createTable() { 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 table = []; for (let fahrenheit = start; fahrenheit <= stop; fahrenheit += step) { let element = []; let celsius = fahrenheitToCelsius(fahrenheit); element[0] = fahrenheit; element[1] = celsius; table.push(element); } return table; } function displayTable(table) { let result = ""; for (let row = 0; row < table.length; row++) { result += `<tr><td>${table[row][0].toFixed(1)}</td>` result += `<td>${table[row][1].toFixed(1)}</td></tr>`; } document.getElementById("tbody").innerHTML = result; } function fahrenheitToCelsius(fahrenheit) { let celsius = (fahrenheit - TEMPERATURE_DIFFERENCE) * TEMPERATURE_RATIO; return celsius; } 
