<!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;functionTemperature(fahrenheit=null,celsius=null){this.fahrenheit=fahrenheit;this.celsius=celsius;this.fahrenheitToCelsius=function(fahrenheit){letcelsius=(fahrenheit-TEMPERATURE_DIFFERENCE)*TEMPERATURE_RATIO;returncelsius;};this.celsiusToFahrenheit=function(celsius){letfahrenheit=celsius/TEMPERATURE_RATIO+TEMPERATURE_DIFFERENCE;returnfahrenheit;};}window.addEventListener("load",function(){letelements=document.getElementsByTagName("input");for(leti=0;i<elements.length;i++){elements[i].addEventListener("focus",inputFocus);elements[i].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="";lettable=createTable();if(table!=null){displayTable(table);}}}functioncheckInput(){letvalue=document.activeElement.value;if(isNaN(value)||value.trim().length==0){document.getElementById("error").innerText=document.activeElement.id+" must be a number!";returnfalse;}letelements=document.getElementsByTagName("input");for(leti=0;i<elements.length;i++){value=elements[i].value;if(isNaN(value)||value.trim().length==0){returnfalse;}}returntrue;}functioncreateTable(){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;}lettable=[];for(letfahrenheit=start;fahrenheit<=stop;fahrenheit+=step){letelement=newTemperature();element.fahrenheit=fahrenheit;element.celsius=element.fahrenheitToCelsius(fahrenheit);table.push(element);}returntable;}functiondisplayTable(table){letresult="";for(letrow=0;row<table.length;row++){result+=`<tr><td>${table[row].fahrenheit.toFixed(1)}</td>`result+=`<td>${table[row].celsius.toFixed(1)}</td></tr>`;}document.getElementById("tbody").innerHTML=result;}
