JavaScript Programming/For Loops/Example Code

From Wikiversity
Jump to navigation Jump to search

example.html[edit | edit source]

<!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 | edit source]

// 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 () {
  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();
});

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 = "";
    displayTable();
  }
}

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;
  }

  value = document.getElementById("start").value;
  if (isNaN(value) || value.trim().length == 0) {
    return false;
  }

  value = document.getElementById("stop").value;
  if (isNaN(value) || value.trim().length == 0) {
    return false;
  }

  value = document.getElementById("step").value;
  if (isNaN(value) || value.trim().length == 0) {
    return false;
  }

  return true;
}

function displayTable() {
  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 result = ""
  for (let fahrenheit = start; fahrenheit <= stop; fahrenheit += step) {
    let celsius = fahrenheitToCelsius(fahrenheit);
    celsius = celsius.toFixed(1);
    result += `<tr><td>${fahrenheit}</td><td>${celsius}</td></tr>`;  
  }

  document.getElementById("tbody").innerHTML = result;
}

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