Wikiversity

JavaScript Programming/Dynamic HTML/Example Code

< JavaScript Programming | Dynamic HTML

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 tbody = document.getElementById("tbody");
  
  while (tbody.lastChild) {
    tbody.removeChild(tbody.lastChild);
  }

  for (let row = 0; row < table.length; row++) {
    let tr = document.createElement("tr");
    
    let td = document.createElement("td");
    td.innerText = table[row][0].toFixed(1);
    tr.appendChild(td);

    td = document.createElement("td");
    td.innerText = table[row][1].toFixed(1);
    tr.appendChild(td);

    tbody.appendChild(tr);
  }
}

function fahrenheitToCelsius(fahrenheit) {
  let celsius = (fahrenheit - TEMPERATURE_DIFFERENCE) * TEMPERATURE_RATIO;
  return celsius;
}
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Dynamic_HTML/Example_Code&oldid=2141589"