JavaScript Programming/Arrays/Example Code
example.html
edit<!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>
example.js
edit// 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;
}