2021-01-22 Calculator

2021-01-22 Calculator

by Ttt Yyy

HTML

<div id="calculator">
  <div id="display">0</div>
  <div id="keyboard">
<!--     <div class="expression char operator">+</div>
    <div class="expression char operator">-</div>
    <div class="expression char operator">*</div>
    <div class="expression char operator">/</div> -->
    <div class="expression char number">1</div>
    <div class="expression char number">2</div>
    <div class="expression char number">3</div>
    <div class="expression char operator">+</div>
    <div class="expression char number">4</div>
    <div class="expression char number">5</div>
    <div class="expression char number">6</div>
    <div class="expression char operator">-</div>
    <div class="expression char number">7</div>
    <div class="expression char number">8</div>
    <div class="expression char number">9</div>
    <div class="expression char operator">*</div>
    <div id="clear" class="char">AC</div>
    <div class="expression char number">0</div>
    <div class="expression char operator">/</div>
    <div id="equals" class="char">=</div>
    <!-- <div id="clear" class="char">AC</div> -->
  </div>
</div>

CSS

#calculator {
  align-items: center;
  background-color: #999999;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
}

#display {
  border: 1px solid black;
  background-color: white;
  margin: 8px 0;
  padding: 0 4px;
  text-align: right;
  width: 180px;
}

#keyboard {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4px;
  width: 180px;
}

.char {
  align-items: center;
  border: 1px solid black;
  display: flex;
  flex: 1 1 auto;
  margin: 4px 2px 4px 0px;
  justify-content: center;
  height: 40px;
  width: 40px;
}

.number {
  background-color: #dddddd;
}

.operator {
  background-color: orange;
}

#clear {
  background-color: red;
}

#equals {
  background-color: green;
}

JavaScript

let expression = '';
const display = document.getElementById('display');

console.log('[...document.getElementsByClassName(expression)]', [...document.getElementsByClassName('expression')]);
console.log('document.getElementsByClassName(expression)', document.getElementsByClassName('expression'));

// document.getElementsByClassName returns HTMLCollection so use ...
[...document.getElementsByClassName('expression')].forEach(element => {
	element.addEventListener('click', event => {
	    expression += event.target.innerText;
	    display.innerText = expression;
	  })
	})
	
	document
	.getElementById('equals')
	.addEventListener('click', () => {
		expression = eval(expression);
	  
	  // if want to add binary
	  /* let nums = /(\d+)/g;
	  // Replace all base 2 nums with base 10 equivs
	  expression = expression.replace(nums, function(match) {
	      return parseInt(match, 2);
	  })
	  // eval in base 10 and convert to base 2
	  expression = eval(expression).toString(2); */
	  display.innerText = expression;
	})
	
	document
	.getElementById('clear')
	.addEventListener('click', () => {
	expression = '';
	  display.innerText = '0'
	})