<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="Cache-Control"content="no-cache"><title>Example</title><style>body{font-family:Arial,Helvetica,sans-serif;}input{width:3em;margin:0em1em0em0.5em;}#error{font-weight:bold;margin:0.5em;}table{border:thinsolidgray;border-collapse:collapse;margin:1em;}th,td{border:thinsolidgray;padding:0.25em;text-align:center;}</style><scriptdefersrc="example.js"></script></head><body><noscript>Enable JavaScript to see web page content.</noscript><h1>Temperature Conversion Table</h1><p><labelfor="start">Start:</label><inputid="start"></input><labelfor="stop">Stop:</label><inputid="stop"></input><labelfor="step">Step:</label><inputid="step"></input></p><p><labelid="error"></label></p><hr><table><thead><tr><th>Fahrenheit</th><th>Celsius</th></tr></thead><tbodyid="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";constTEMPERATURE_DIFFERENCE=32;constTEMPERATURE_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();});functioninputFocus(){document.activeElement.select();document.getElementById("error").innerText="Enter "+document.activeElement.id+" value.";}functioninputInput(){letvalue=document.activeElement.value;if(checkInput()){document.getElementById("error").innerText="";displayTable();}}functioncheckInput(){letvalue=document.activeElement.value;if(isNaN(value)||value.trim().length==0){document.getElementById("error").innerText=document.activeElement.id+" must be a number!";returnfalse;}value=document.getElementById("start").value;if(isNaN(value)||value.trim().length==0){returnfalse;}value=document.getElementById("stop").value;if(isNaN(value)||value.trim().length==0){returnfalse;}value=document.getElementById("step").value;if(isNaN(value)||value.trim().length==0){returnfalse;}returntrue;}functiondisplayTable(){letstart=Number(document.getElementById("start").value);letstop=Number(document.getElementById("stop").value);letstep=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;}letresult=""for(letfahrenheit=start;fahrenheit<=stop;fahrenheit+=step){letcelsius=fahrenheitToCelsius(fahrenheit);celsius=celsius.toFixed(1);result+=`<tr><td>${fahrenheit}</td><td>${celsius}</td></tr>`;}document.getElementById("tbody").innerHTML=result;}functionfahrenheitToCelsius(fahrenheit){letcelsius=(fahrenheit-TEMPERATURE_DIFFERENCE)*TEMPERATURE_RATIO;returncelsius;}
