sum a list of numbers

by Matt Rummler

HTML

<div class="flex fcenter content">
  <div class="first-result toppad2">

  </div>
  <div>
    <p class="toppad2">
    Blue = manually summed
    </p>
    <p class="toppad2">
    Green = calculated
    </p>
  </div>
  <div class="second-result toppad2">

  </div>
</div>

CSS

.content{ font-size: 110%;}
.flex{ display: flex; width: 100%;}
.fcenter{ justify-content: center; margin: 0 auto;}
[class*='result']
{ 
 background-color: red; 
 min-width: 15rem; 
 min-height: 15rem; 
 text-align: center;
}
[class^='first']{ background-color: blue; margin: auto;}
[class^="second"]{ background-color: green; margin: auto;}
p{ padding: .25rem;}
.toppad2{  padding-top: 2%;}

JavaScript

let arrayOfNumbers = [];// this is here to show intent of use

function fillArray(number)
{
  let array = [];
  let iterator = number;
  while(iterator)
  {
    array.push(iterator);
    iterator--;
  }
  return array;
}
function sumArray(array)
{
	return (array.length)*(array.length+1)/2;
}
function manuallySumArray(array)
{
	let total = 0;
  for(let currentValue of array)
  {
    total = total+currentValue;
  }
  return total;
}
arrayOfNumbers = fillArray(5);
let blueBox = document.getElementsByClassName('first-result')[0];
let greenBox = document.getElementsByClassName('second-result')[0];
blueBox.innerText=sumArray(arrayOfNumbers);
greenBox.innerText=manuallySumArray(arrayOfNumbers);
console.log(sumArray(arrayOfNumbers));
console.log(manuallySumArray(arrayOfNumbers));