Adder

by Sam Fereday

HTML

<div id="output">Total: 0</div>
<textarea id="numbers"></textarea>

CSS

html, body {
  padding: 0;
  margin: 0;
  background: #222;
  font: 85%/1.4em arial;
}

* {
  box-sizing: border-box;
}

textarea {
  width: 90%;
  min-height: 32em;
  margin: 0 5% 5%;
  padding: 1em;
  background: #555;
  color: #fff;
}

#output {
  padding: 5%;
  font-size: 1.4em;
  color: #fff;
}

JavaScript

const out = document.getElementById('output');
const num = document.getElementById('numbers');

const isNumber = (n) => {
	return typeof n === 'number' && !isNaN(n);
}

const splitNumbers = (str) => {
	return str ? str.replace(/,/g, '').split( /\n/g) : [];
};

const sumValues = (numbers) => {	
  return numbers && numbers.length > 0 ? numbers.reduce((acc, current) => acc + current) : 0;
};

num.addEventListener('keyup', ({ target }) => {
	const v = sumValues(splitNumbers(target.value)
  	.map(x => parseFloat(x))
    .filter(x => isNumber(x))
  );
  out.innerHTML = 'Total: ' + v.toFixed(2);
});

sumValues();