Implementing Event delegation

README.md

@@ -0,0 +1,37 @@
+# Vanilla-JavaScript-Calculator
+Pure vanilla JavaScript calculator using modern ES6 syntax and classes
+
+Arrow functions inside event listeners   equalsButton, allClearButton, deleteButton don't need button argument. they can be  like this ()=> {code}, in case like this button=>{}, button doesn't have any purpose.
+
+Event delegation will be much better option instead of forEach() on numberButtons and operationButtons. With forEach() you are creating events for all buttons. That is a bad practice.
+With event delegation you don't create click event for each button, just for buttons that are clicked. 
+This is my solution: 
+1. And in HTML file  for each number button and operation button data-set value of number for number buttons and operation sign for operation. data-number="1" & data-operation="*"  For example:
+ <button data-number="1">1</button>
+<button data-number="2">2</button>
+<button data-operation="÷" >÷</button>
+ <button data-operation="*">*</button>
+
+2. Select common parent element for all buttons:
+const parentElement = document.querySelector('.calculator-grid');
+
+3. Replace forEach on numberButtons and operationButtons with this code:
+
+parentElement.addEventListener('click', function (e) {
+
+  if (e.target.closest('[data-number]')) {
+
+    const btnNum = e.target.closest('[data-number]');
+    const selectedNumber = btnNum.getAttribute('data-number');
+    calculator.appendNumber(selectedNumber);
+    calculator.updateDisplay();
+  }
+  if (e.target.closest('[data-operation]')) {
+    const btnOperation = e.target.closest('[data-operation]');
+    console.log(btnOperation);
+    const selectedOperation = btnOperation.getAttribute('data-operation');
+    console.log(selectedOperation);
+    calculator.chooseOperation(selectedOperation);
+    calculator.updateDisplay();
+  }
+});

index.html

@@ -16,22 +16,22 @@
     </div>
     <button data-all-clear class="span-two">AC</button>
     <button data-delete>DEL</button>
-    <button data-operation>÷</button>
-    <button data-number>1</button>
-    <button data-number>2</button>
-    <button data-number>3</button>
-    <button data-operation>*</button>
-    <button data-number>4</button>
-    <button data-number>5</button>
-    <button data-number>6</button>
-    <button data-operation>+</button>
-    <button data-number>7</button>
-    <button data-number>8</button>
-    <button data-number>9</button>
-    <button data-operation>-</button>
-    <button data-number>.</button>
-    <button data-number>0</button>
+    <button data-operation="÷">÷</button>
+      <button data-number="1">1</button>
+      <button data-number="2">2</button>
+      <button data-number="3">3</button>
+      <button data-operation="*" >*</button>
+      <button data-number="4">4</button>
+      <button data-number="5">5</button>
+      <button data-number="6">6</button>
+      <button data-operation="+">+</button>
+      <button data-number="7">7</button>
+      <button data-number="8">8</button>
+      <button data-number="9">9</button>
+      <button data-operation="-">-</button>
+      <button data-number=".">.</button>
+      <button data-number="0">0</button>
     <button data-equals class="span-two">=</button>
   </div>
 </body>
-</html>
+</html>

script.js

@@ -85,7 +85,7 @@ class Calculator {
   }
 }
 
-
+const parentElement = document.querySelector('.calculator-grid'); // selecting common parent element for all number and operation buttons. 
 const numberButtons = document.querySelectorAll('[data-number]')
 const operationButtons = document.querySelectorAll('[data-operation]')
 const equalsButton = document.querySelector('[data-equals]')
@@ -96,31 +96,35 @@ const currentOperandTextElement = document.querySelector('[data-current-operand]
 
 const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
 
-numberButtons.forEach(button => {
-  button.addEventListener('click', () => {
-    calculator.appendNumber(button.innerText)
-    calculator.updateDisplay()
-  })
-})
-
-operationButtons.forEach(button => {
-  button.addEventListener('click', () => {
-    calculator.chooseOperation(button.innerText)
-    calculator.updateDisplay()
-  })
-})
+// Event delegation
+//1. attach event to common parent
+//2. with closest() find out wich button is clicked
+parentElement.addEventListener('click', function (e) {
+  if (e.target.closest('[data-number]')) {
+    const btnNum = e.target.closest('[data-number]');
+    const selectedNumber = btnNum.getAttribute('data-number');
+    calculator.appendNumber(selectedNumber);
+    calculator.updateDisplay();
+  }
+  if (e.target.closest('[data-operation]')) {
+    const btnOperation = e.target.closest('[data-operation]');
+    const selectedOperation = btnOperation.getAttribute('data-operation');
+    calculator.chooseOperation(selectedOperation);
+    calculator.updateDisplay();
+  }
+});
 
-equalsButton.addEventListener('click', button => {
+equalsButton.addEventListener('click', () => {
   calculator.compute()
   calculator.updateDisplay()
 })
 
-allClearButton.addEventListener('click', button => {
+allClearButton.addEventListener('click', () => {
   calculator.clear()
   calculator.updateDisplay()
 })
 
-deleteButton.addEventListener('click', button => {
+deleteButton.addEventListener('click', () => {
   calculator.delete()
   calculator.updateDisplay()
-})
+})