JSFiddle - React, Tailwind, and code Playground

by Bret Lowrey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-fp/0.10.4/lodash-fp.min.js"></script>
<script src="https://wzrd.in/standalone/expect@latest"></script>
<body>
  <div>
    <input id="num-x" /> +
    <input id="num-y" />
    <button id='equals' onclick='sumOnClick()'>
      =
    </button>
    <div id="sum"></div>
  </div>
</body>

CSS

body {
  margin: .62em auto;
  max-width: 40em;
  padding: 0 .62em;
  font: 1.2em/1.62em sans-serif;
}

JavaScript

const extremum = cmp => (x, y) => {
  [xArr, yArr] = [x, y].map(i => i.split(''));
  if (xArr.length === yArr.length) {
    for (let i = 0; i < xArr.length; i++) {
      if (xArr[i] !== yArr[i]) {
        return [x, y][Number(cmp(xArr[i], yArr[i]))];
      }
    }
    return x;
  }
  return [x, y][Number(cmp(xArr.length, y.length))];
}

const min = extremum((x, y) => x > y);
const max = extremum((x, y) => x < y);

const add = (x, y) => {
  [minN, maxN] = [min(x, y), max(x, y)].map(i =>
    i.split('').reverse());
  let result = [];
  let carry = 0;
  for (let i = 0; i < maxN.length; i++) {
    let [minI, maxI] = [minN[i], maxN[i]].map(Number);
    let sum;
    if (minI) {
      sum = minI + maxI + carry;
    } else {
      sum = maxI + carry;
    }
    result.push(sum % 10);
    carry = Number(sum > 9);
  }
  if (carry > 0) {
    result.push(carry);
  }
  return result.reverse().join('');
};

expect(add('12345678901234567890',
  '1')).toEqual('12345678901234567891');
expect(add('558', '579')).toEqual('1137');
expect(add('45', '123')).toEqual('168');
expect(add('0', '0')).toEqual('0');
expect(add('11', '0')).toEqual('11');
expect(add('1', '9')).toEqual('10');
expect(add('1', '2')).toEqual('3');

expect(max('1', '2')).toEqual('2');
expect(max('1', '1')).toEqual('1');
expect(max('1', '0')).toEqual('1');
expect(max('1', '20')).toEqual('20');

expect(min('1', '2')).toEqual('1');
expect(min('1', '1')).toEqual('1');
expect(min('1', '0')).toEqual('0');
expect(min('1', '20')).toEqual('1');

sumOnClick = () => {
  let x = document.getElementById('num-x').value;
  let y = document.getElementById('num-y').value;
  document.getElementById('sum').innerHTML = add(x, y);
};