gitKrystan/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Calculator </title>
  <script src="scripts.js"></script>
</head>
<body>
  <h1>Calculator</h1>
  <p id="display">0</p>
  <div id="calculator">
    <!-- Buttons are added programmatically -->
  </div>
</body>
</html>

## scripts.js
window.addEventListener('DOMContentLoaded', (event) => {
  const calculatorEl = document.getElementById('calculator');
  const displayEl = document.getElementById('display');

  const UNINITIALIZED = null;

  let currentValue = displayEl.value || UNINITIALIZED;

  let valueStack = [];
  let currentOperation = UNINITIALIZED;

  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(function(n) {
    calculatorEl.insertAdjacentHTML(
      'beforeend',
      `<button class="number" value="${n}">${n}</button>`
      );
  });

  document.querySelectorAll('.number').forEach(function(el) {
    el.addEventListener('click', handleNumberClick);
  });

  ['+', '-', '*', '/', '='].forEach(function(o) {
    calculatorEl.insertAdjacentHTML(
      'beforeend',
      `<button class="operation" value="${o}">${o}</button>`
      );
  });

  document.querySelectorAll('.operation').forEach(function(el) {
    el.addEventListener('click', handleOperationClick);
  });

  function handleNumberClick(event) {
    const number = event.target.value;

    currentValue = parseInt((currentValue || '') + number, 10);

    displayEl.innerText = currentValue;

    // FIXME: if current op is UNINITIALIZED, clear stack?
  }

  function handleOperationClick(event){
    let operation = event.target.value;

    if (currentValue != UNINITIALIZED) {
      valueStack.push(currentValue);

      if (currentOperation) {
        let newValue = OPERATIONS[currentOperation](valueStack);
        valueStack = [newValue];
        displayEl.innerText = newValue;
      }
    }

    currentValue = UNINITIALIZED;

    if (operation === '=') {
      currentOperation = UNINITIALIZED;
    } else {
      currentOperation = operation;
    }


    console.log(valueStack);
    console.log(currentOperation);
  }
});

const OPERATIONS = {
  '+': function(stack) {
    return stack[0] + stack[1];
  },

  '-': function(stack) {
    return stack[0] - stack[1];
  },

  '*': function(stack) {
    return stack[0] * stack[1];
  },

  '/': function(stack) {
    return stack[0] / stack[1];
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title> Calculator </title>
	<script src="scripts.js"></script>
	</head>
	<body>
	<h1>Calculator</h1>
	<p id="display">0</p>
	<div id="calculator">
	<!-- Buttons are added programmatically -->
	</div>
	</body>
	</html>
	window.addEventListener('DOMContentLoaded', (event) => {
	const calculatorEl = document.getElementById('calculator');
	const displayEl = document.getElementById('display');

	const UNINITIALIZED = null;

	let currentValue = displayEl.value \|\| UNINITIALIZED;

	let valueStack = [];
	let currentOperation = UNINITIALIZED;

	[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(function(n) {
	calculatorEl.insertAdjacentHTML(
	'beforeend',
	`<button class="number" value="${n}">${n}</button>`
	);
	});

	document.querySelectorAll('.number').forEach(function(el) {
	el.addEventListener('click', handleNumberClick);
	});

	['+', '-', '*', '/', '='].forEach(function(o) {
	calculatorEl.insertAdjacentHTML(
	'beforeend',
	`<button class="operation" value="${o}">${o}</button>`
	);
	});

	document.querySelectorAll('.operation').forEach(function(el) {
	el.addEventListener('click', handleOperationClick);
	});

	function handleNumberClick(event) {
	const number = event.target.value;

	currentValue = parseInt((currentValue \|\| '') + number, 10);

	displayEl.innerText = currentValue;

	// FIXME: if current op is UNINITIALIZED, clear stack?
	}

	function handleOperationClick(event){
	let operation = event.target.value;

	if (currentValue != UNINITIALIZED) {
	valueStack.push(currentValue);

	if (currentOperation) {
	let newValue = OPERATIONS[currentOperation](valueStack);
	valueStack = [newValue];
	displayEl.innerText = newValue;
	}
	}

	currentValue = UNINITIALIZED;

	if (operation === '=') {
	currentOperation = UNINITIALIZED;
	} else {
	currentOperation = operation;
	}


	console.log(valueStack);
	console.log(currentOperation);
	}
	});

	const OPERATIONS = {
	'+': function(stack) {
	return stack[0] + stack[1];
	},

	'-': function(stack) {
	return stack[0] - stack[1];
	},

	'*': function(stack) {
	return stack[0] * stack[1];
	},

	'/': function(stack) {
	return stack[0] / stack[1];
	}
	}