React events

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "big.js": "^6.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

src/App.css

@@ -23,10 +23,11 @@ button {
   background-color: #6b705c;
   width: 100%;
   height: 4rem;
+  text-align: end;
 }
 
-h1 {
-  margin: 0 0 0 80%;
+.display_string {
+  font-size: 3rem;
   padding: 1rem;
   color: white;
 }

src/components/calculator.js

@@ -1,37 +1,102 @@
 import React from 'react';
+import calculate from '../logic/calculate';
 
 class Calculator extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = { total: 0, operation: '', next: '' };
   }
 
+  handleClick = (items) => this.setState((e) => calculate(e, items.target.textContent));
+
   render() {
+    const { total, operation, next } = this.state;
+    const display = `${total || operation || next ? `${total || ''} ${operation || ''} ${next || ''}` : '0'} `;
     return (
       <div className="calculator_container">
-        <div className="display">
-          <h1>0</h1>
-        </div>
+        <div className="display"><span className="display_string">{display}</span></div>
         <div className="button_container">
-          <button type="button" className="button">AC</button>
-          <button type="button" className="button">+/-</button>
-          <button type="button" className="button">%</button>
-          <button type="button" className="button operator">/</button>
-          <button type="button" className="button">7</button>
-          <button type="button" className="button">8</button>
-          <button type="button" className="button">9</button>
-          <button type="button" className="button operator">x</button>
-          <button type="button" className="button">4</button>
-          <button type="button" className="button">5</button>
-          <button type="button" className="button">6</button>
-          <button type="button" className="button operator">-</button>
-          <button type="button" className="button">1</button>
-          <button type="button" className="button">2</button>
-          <button type="button" className="button">3</button>
-          <button type="button" className="button operator">+</button>
-          <button type="button" className="button item0">0</button>
-          <button type="button" className="button">.</button>
-          <button type="button" className="button operator">=</button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            AC
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            +/-
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            %
+          </button>
+          <button
+            type="button"
+            className="button operator"
+            onClick={this.handleClick}
+          >
+            ÷
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            7
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            8
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            9
+          </button>
+          <button
+            type="button"
+            className="button operator"
+            onClick={this.handleClick}
+          >
+            x
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            4
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            5
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            6
+          </button>
+          <button
+            type="button"
+            className="button operator"
+            onClick={this.handleClick}
+          >
+            -
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            1
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            2
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            3
+          </button>
+          <button
+            type="button"
+            className="button operator"
+            onClick={this.handleClick}
+          >
+            +
+          </button>
+          <button
+            type="button"
+            className="button item0"
+            onClick={this.handleClick}
+          >
+            0
+          </button>
+          <button type="button" className="button" onClick={this.handleClick}>
+            .
+          </button>
+          <button
+            type="button"
+            className="button operator"
+            onClick={this.handleClick}
+          >
+            =
+          </button>
         </div>
       </div>
     );

src/logic/calculate.js

@@ -0,0 +1,129 @@
+import operate from './operate';
+
+function isNumber(item) {
+  return !!item.match(/[0-9]+/);
+}
+
+/**
+ * Given a button name and a calculator data object, return an updated
+ * calculator data object.
+ *
+ * Calculator data object contains:
+ *   total:s      the running total
+ *   next:String       the next number to be operated on with the total
+ *   operation:String  +, -, etc.
+ */
+export default function calculate(obj, buttonName) {
+  if (buttonName === 'AC') {
+    return {
+      total: 0,
+      next: null,
+      operation: null,
+    };
+  }
+
+  if (isNumber(buttonName)) {
+    if (buttonName === '0' && obj.next === '0') {
+      return {};
+    }
+    // If there is an operation, update next
+    if (obj.operation) {
+      if (obj.next) {
+        return { ...obj, next: obj.next + buttonName };
+      }
+      return { ...obj, next: buttonName };
+    }
+    // If there is no operation, update next and clear the value
+    if (obj.next) {
+      return {
+        next: obj.next + buttonName,
+        total: null,
+      };
+    }
+    return {
+      next: buttonName,
+      total: null,
+    };
+  }
+
+  if (buttonName === '.') {
+    if (obj.next) {
+      if (obj.next.includes('.')) {
+        return { ...obj };
+      }
+      return { ...obj, next: `${obj.next}.` };
+    }
+    if (obj.operation) {
+      return { next: '0.' };
+    }
+    if (obj.total) {
+      if (obj.total.includes('.')) {
+        return {};
+      }
+      return { total: `${obj.total}.` };
+    }
+    return { total: '0.' };
+  }
+
+  if (buttonName === '=') {
+    if (obj.next && obj.operation) {
+      return {
+        total: operate(obj.total, obj.next, obj.operation),
+        next: null,
+        operation: null,
+      };
+    }
+    // '=' with no operation, nothing to do
+    return {};
+  }
+
+  if (buttonName === '+/-') {
+    if (obj.next) {
+      return { ...obj, next: (-1 * parseFloat(obj.next)).toString() };
+    }
+    if (obj.total) {
+      return { ...obj, total: (-1 * parseFloat(obj.total)).toString() };
+    }
+    return {};
+  }
+
+  // Button must be an operation
+
+  // When the user presses an operation button without having entered
+  // a number first, do nothing.
+  // if (!obj.next && !obj.total) {
+  //   return {};
+  // }
+
+  // User pressed an operation after pressing '='
+  if (!obj.next && obj.total && !obj.operation) {
+    return { ...obj, operation: buttonName };
+  }
+
+  // User pressed an operation button and there is an existing operation
+  if (obj.operation) {
+    if (obj.total && !obj.next) {
+      return { ...obj, operation: buttonName };
+    }
+
+    return {
+      total: operate(obj.total, obj.next, obj.operation),
+      next: null,
+      operation: buttonName,
+    };
+  }
+
+  // no operation yet, but the user typed one
+
+  // The user hasn't typed a number yet, just save the operation
+  if (!obj.next) {
+    return { operation: buttonName };
+  }
+
+  // save the operation and shift 'next' into 'total'
+  return {
+    total: obj.next,
+    next: null,
+    operation: buttonName,
+  };
+}

src/logic/operate.js

@@ -0,0 +1,30 @@
+import Big from 'big.js';
+
+export default function operate(numberOne, numberTwo, operation) {
+  const one = Big(numberOne);
+  const two = Big(numberTwo);
+  if (operation === '+') {
+    return one.plus(two).toString();
+  }
+  if (operation === '-') {
+    return one.minus(two).toString();
+  }
+  if (operation === 'x') {
+    return one.times(two).toString();
+  }
+  if (operation === '÷') {
+    try {
+      return one.div(two).toString();
+    } catch (err) {
+      return "Can't divide by 0.";
+    }
+  }
+  if (operation === '%') {
+    try {
+      return one.mod(two).toString();
+    } catch (err) {
+      return "Can't find modulo as can't divide by 0.";
+    }
+  }
+  throw Error(`Unknown operation '${operation}'`);
+}