scribbledecobble: It's not hard

README

In mathematics, mean has several different definitions depending on the context. . . . For a data set, the terms arithmetic mean, mathematical expectation, and sometimes average are used synonymously to refer to a central value of a discrete set of numbers: specifically, the sum of the values divided by the number of values.
— Wikipedia, Mean (retrieved 26 July 2017)
Code

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<style>
</style>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<h1>It’s not hard to calculate the mean.</h1>

<div id="random-numbers">
  <h2 class="heading">The 16 numbers that were chosen at random by D.E.K on March 19, 1963.</h2>
  See: <cite>The Art of Computer Programming</cite>, vol. 3 (2nd edition), p. 76.
  <ul class="list">
    <li><input type="number" value="503" readonly/></li>
    <li><input type="number" value="087" readonly/></li>
    <li><input type="number" value="512" readonly/></li>
    <li><input type="number" value="061" readonly/></li>
    <li><input type="number" value="908" readonly/></li>
    <li><input type="number" value="170" readonly/></li>
    <li><input type="number" value="897" readonly/></li>
    <li><input type="number" value="275" readonly/></li>
    <li><input type="number" value="653" readonly/></li>
    <li><input type="number" value="426" readonly/></li>
    <li><input type="number" value="154" readonly/></li>
    <li><input type="number" value="509" readonly/></li>
    <li><input type="number" value="612" readonly/></li>
    <li><input type="number" value="677" readonly/></li>
    <li><input type="number" value="765" readonly/></li>
    <li><input type="number" value="703"/></li>
  </ul>
</div>

<p>
  <input id="calculate-button" type="button" value="Calculate"/>
</p>

<div id="list-length">
  <h2 class="heading">List Length</h2>
  <div class="value">
  </div>
</div>

<div id="float-count">
  <h2 class="heading">Number of Floats</h2>
  <div class="value">
  </div>
</div>

<div id="integer-count">
  <h2 class="heading">Number of Integers</h2>
  <div class="value">
  </div>
</div>

<div id="sum">
  <h2 class="heading">Sum</h2>
  <div class="value">
  </div>
</div>

<div id="mean">
  <h2 class="heading">Mean (Average)</h2>
  <div class="value">
  </div>
</div>

<div id="max">
  <h2 class="heading">Max</h2>
  <div class="value">
  </div>
</div>

<!-- ....1....:....2....:....3....:....4....:....5....:....6....:... -->

<script>

  const calcButton = document.getElementById("calculate-button");

  /*********************************************************************
   *  Define a function that returns an array of items that correspond
   *  to the items of the value of the parameter named set.
   */
  function toArray(set) {
    const array = [];
    let i = set.length;
    while (--i >= 0) {
      array[i] = set[i];
    }
    return array;
  }

  /*********************************************************************
   *  Define a function that returns an element that a) is within an
   *  element identified by the value of the parameter containerId, and
   *  b) is associated with a class matching the value of the parameter
   *  className.
   */
  function getElementWithClassIn(containerId, className) {
    const
        idSearchString = "#" + containerId,
        classSearchString = "." + className,
        searchString = idSearchString + " " + classSearchString;

    return document.querySelector(searchString);
  }

  /*********************************************************************
   *  Define a function that returns a list element that is within an
   *  element identified by the value of the parameter containerId.
   */
  function getListElementIn(containerId) {

    // Assume the value of containerId matches the id value of an
    // element in the document that contains a list element that is
    // associated with the class name "list".

    const className = "list";
    return getElementWithClassIn(containerId, className);
  }

  /*********************************************************************
   *  Define a function that returns a "value" element that is within an
   *  element identified by the value of the parameter containerId.
   */
  function getValueElementIn(containerId) {

    // Assume the value of containerId matches the id value of an
    // element in the document that contains another element that is
    // associated with the class name "value".

    const className = "value";
    return getElementWithClassIn(containerId, className);
  }

  function toArrayOfNumbers(inputArray) {
    const numberArray = [];
    inputArray.forEach(function(inputElement) {
      numberArray.push(parseFloat(inputElement.value));
    });
    return numberArray;
  }

  /*********************************************************************
   *  Define a function that returns a sequence of numbers from the list
   *  element within another element identified by the value of the
   *  parameter listId.
   */
  function getListOfNumsIn(containerId) {
    const listElement = getListElementIn(containerId),
          inputElements = listElement.getElementsByTagName("input"),
          inputArray = toArray(inputElements),
          intArray = toArrayOfNumbers(inputArray);
    return intArray;
  }

  function displayValueIn(containerId, value) {
    const valElement = getValueElementIn(containerId);
    valElement.textContent = value;
  }

  function isNumber(x) {
    return  (!isNaN(x)) && ((typeof x) === "number");
  }

  function countNumsIn(array, parseFunction) {

    let count = 0;
    let i = 0;

    while (i < array.length) {
      let value = array[i];
      if (isNumber(value)) {
        count = count + 1;
      }
      i = i + 1;
    }

    return count;
  }

  function countIntegersIn(array) {
    return countNumsIn(array, parseInt);
  }

  function countFloatsIn(array) {
    return countNumsIn(array, parseFloat);
  }

  function getSumOfValuesIn(arrayOfNums) {
    let sum = 0;
    arrayOfNums.forEach(function(value) {
      sum += value;
    });
    return sum;
  }

  function getMaxOfValuesIn(arrayOfNums) {
    let max = 0;
    return max;
  }

  /** It's not hard to calculate the mean.
   */
  function getAvgOfValuesIn(array) {
    return getSumOfValuesIn(array) / array.length;
  }

  calcButton.addEventListener("click", function() {

    const numArray = getListOfNumsIn("random-numbers"),
          listLength = numArray.length,
          floatCount = countFloatsIn(numArray),
          integerCount = countIntegersIn(numArray),
          sum = getSumOfValuesIn(numArray),
          mean = getAvgOfValuesIn(numArray),
          max = getMaxOfValuesIn(numArray);

    displayValueIn("list-length", listLength);
    displayValueIn("float-count", floatCount);
    displayValueIn("integer-count", integerCount);
    displayValueIn("sum", sum);
    displayValueIn("mean", mean);
    displayValueIn("max", max);
  });

</script>
Pages

It's not hard

README

Code
