assignment plus some stretch

src/App.css

@@ -1,15 +1,18 @@
 .container {
     background-color: #c00025;
-    width: 100%;
+    width: 90%;
     max-width: 550px;
     border-radius: 15px;
     border: 2px solid grey;
     padding-bottom: 25px;
+    height: 700px;
 }
 .display {
     margin-top: 25px;
+    margin-bottom: 25px;
     height: 100px;
-    width: 450px;
+    width: 80%;
+    margin-left: 5%;
     border-radius: 50px;
     color: white;
     background-color: #322c2d;
@@ -18,5 +21,41 @@
     justify-content: flex-end;
     align-items: flex-end;
     padding-right: 8%;
-    font-size: 5.0rem;
+    font-size: 4.1rem;
   }
+
+button {
+  margin: 10px;
+  color: white;
+  font-size: 1.4rem;
+  padding: 20px;
+  border-radius: 90px;
+  height: 80px;
+  width: 80px;
+  border-style: none;
+  box-shadow: 0 3px black, 0 0 gray;
+
+}
+
+.button-container{
+ width: 90%;
+ margin: 0 5%;
+ display: flex;
+
+}
+
+.number-button{
+  background-color: blue;
+}
+
+.special-button{
+  background-color: dodgerblue;
+}
+
+.operator-button{
+  background-color: teal;
+}
+
+.logo-container{
+  margin: 15px 0 0 5%;
+}

src/App.js

@@ -1,5 +1,10 @@
-import React from "react";
+import React, {useState} from "react";
 import "./App.css";
+import Numbers from "./components/ButtonComponents/NumberButtons/Numbers.js";
+import Operators from "./components/ButtonComponents/OperatorButtons/Operators.js";
+import Specials from "./components/ButtonComponents/SpecialButtons/Specials.js";
+import Display from "./components/DisplayComponents/Display.js";
+
 // STEP 4 - import the button and display components
 // Don't forget to import any extra css/scss files you build into the correct component
 
@@ -12,12 +17,57 @@ function App() {
   // Your functions should accept a parameter of the the item data being displayed to the DOM (ie - should recieve 5 if the user clicks on
   // the "5" button, or the operator if they click one of those buttons) and then call your setter function to update state.
   // Don't forget to pass the functions (and any additional data needed) to the components as props
+  const [total, setTotal] = useState(0);
+  const [displayNum, setDisplayNum] = useState('0');
+  const [equation, setEquation] = useState('nothing');
+  const [tracking, setTracking] = useState('0');
 
   return (
     <div className="container">
       <Logo />
       <div className="App">
         {/* STEP 4 - Render your components here and be sure to properly import/export all files */}
+        <Display
+          displayNum = {displayNum}
+
+        />
+        <div class= "button-container">
+          <div class= "left-buttons">
+            <Specials
+              setDisplayNum = {setDisplayNum}
+              displayNum = {displayNum}
+              setEquation = {setEquation}
+              equation = {equation}
+              setTracking = {setTracking}
+              tracking = {tracking}
+
+
+             />
+            <Numbers
+              setDisplayNum = {setDisplayNum}
+              displayNum = {displayNum}
+              setEquation = {setEquation}
+              equation = {equation}
+              setTracking = {setTracking}
+              tracking = {tracking}
+
+            />
+          </div>
+          <div class= "right-buttons">
+            <Operators
+              setEquation = {setEquation}
+              equation = {equation}
+              displayNum = {displayNum}
+              setDisplayNum = {setDisplayNum}
+              total = {total}
+              setTotal = {setTotal}
+              setTracking = {setTracking}
+              tracking = {tracking}
+
+             />
+          </div>
+        </div>
+
       </div>
     </div>
   );

src/components/ButtonComponents/NumberButtons/NumberButton.js

@@ -1,9 +1,95 @@
 import React from "react";
 
-const NumberButton = () => {
+const NumberButton = (props) => {
+
+  const setToNumber = () => {
+    let check = 9;
+    let cut = props.displayNum;
+    let equationInProgress;
+    let stepNo = 0;
+
+    if(cut.includes('-') === true){
+       check = 10;
+    } else {
+      check = 9;
+    }
+
+    // console.log(props.equation.substring(props.equation.length - 1) != '-');
+    // console.log(stepNo);
+
+    if(props.equation.substring(props.equation.length - 1) === '-' || props.equation.substring(props.equation.length - 1) === '+' || props.equation.substring(props.equation.length - 1) === 'x' || props.equation.substring(props.equation.length - 1) === '/'){
+      equationInProgress = true;
+      //stepNo = 1;
+      //console.log(stepNo);
+    } else {
+      equationInProgress = false;
+
+
+    }
+
+    // console.log(props.equation);
+    // console.log(equationInProgress);
+    // console.log(stepNo);
+
+    if(equationInProgress === false){
+
+      if(props.displayNum != '0' && props.displayNum.length < check && props.tracking != '2'){
+        props.setDisplayNum(props.displayNum + props.button);
+        //console.log(props.button);
+      } else if (props.displayNum === '0' || props.tracking === '2'){
+        props.setDisplayNum(props.button);
+        if (props.tracking === '2'){
+          props.setTracking('0');
+        }
+      };
+
+    } else if( equationInProgress === true){
+
+
+      if(props.tracking === '0' ){
+
+        props.setDisplayNum(props.button);
+        props.setTracking('1');
+
+      } else {
+
+          if(props.displayNum != '0' && props.displayNum.length < check){
+            props.setDisplayNum(props.displayNum + props.button);
+            //console.log(props.button);
+          } else if (props.displayNum === '0'){
+            props.setDisplayNum(props.button);
+          };
+
+        };
+
+    };
+
+    // console.log(stepNo);
+
+    // if(stepNo > 1 && equationInProgress === true){
+    //
+    //   if(props.displayNum != '0' && props.displayNum.length < check){
+    //     props.setDisplayNum(props.displayNum + props.button);
+    //     //console.log(props.button);
+    //   } else if (props.displayNum === '0'){
+    //     props.setDisplayNum(props.button);
+    //   };
+    //
+    // };
+
+  };
+
   return (
-    <>
-      {/* Display a button element rendering the data being passed down from the parent container on props */}
-    </>
+
+    <button className="number-button" onClick={setToNumber}>
+    {/* Display a button element rendering the data being passed down from the parent container on props */}
+      <span>
+        {props.button}
+      </span>
+    </button>
+
+
   );
 };
+
+export default NumberButton;

src/components/ButtonComponents/NumberButtons/Numbers.js

@@ -1,19 +1,39 @@
-import React from "react";
+import React, {useState}  from "react";
+import {numbers} from "../../../data.js";
+import NumberButton from "./NumberButton.js";
 
 //import any components needed
-// example of import from data.js. Note all the ../   This is how we move through folders. 
-/* 
-import { numbers } from '../../../data' 
+// example of import from data.js. Note all the ../   This is how we move through folders.
+/*
+import { numbers } from '../../../data'
 */
 //Import your array data to from the provided data file
 
-const Numbers = () => {
+const Numbers = (props) => {
   // STEP 2 - add the imported data to state
+  const [numberState, setNumberState] = useState(numbers);
+
   return (
-    <div>
+    <div className = "number-button-container">
       {/* STEP 3 - Use .map() to iterate over your array data and return a button
        component matching the name on the provided file. Pass
        it any props needed by the child component*/}
+       {
+         numberState.map((button, index) => (
+           <NumberButton
+              button={button}
+              key={index}
+              setDisplayNum ={props.setDisplayNum}
+              displayNum= {props.displayNum}
+              setEquation = {props.setEquation}
+              equation = {props.equation}
+              setTracking = {props.setTracking}
+              tracking = {props.tracking}
+          />
+         ))
+       }
     </div>
   );
 };
+
+export default Numbers;

src/components/ButtonComponents/OperatorButtons/OperatorButton.js

@@ -1,9 +1,55 @@
 import React from "react";
 
-const OperatorButton = () => {
+const OperatorButton = (props) => {
+  const equate = () =>{
+    //console.log(props.button);
+    if(props.button.char != '='){
+      if(props.equation === 'nothing'){
+        props.setEquation(props.displayNum + ' ' + props.button.char);
+
+      } else {
+        props.setEquation(props.equation + ' ' + props.displayNum + ' ' + props.button.char)
+        props.setTracking('0');
+      }
+
+    } else{
+
+      //props.setEquation(props.equation + ' ' + props.displayNum );
+      props.setTracking('2');
+
+      let total = props.equation + ' ' + props.displayNum;
+      total = total.replace(/x/g, "*");
+      total = total.trim();
+      console.log(total);
+      if (total.substring(total.length - 1) === '-' || total.substring(total.length - 1) === '+' || total.substring(total.length - 1) === '*' || total.substring(total.length - 1) === '/' || total.substring(total.length - 1) === '='){
+        total = total.slice(0, total.length - 2);
+        total = eval(total);
+      } else {
+        total = eval(total);
+      }
+
+      props.setDisplayNum(total.toString());
+      props.setEquation('nothing');
+      //console.log(total);
+      // total.forEach( id =>{
+      //   props.setTotal(eval(props.total)
+      //
+      // })
+
+    }
+
+  }
+
   return (
-    <>
-      {/* Display a button element rendering the data being passed down from the parent container on props */}
-    </>
+    <button className="operator-button" onClick= {equate}>
+    {/* Display a button element rendering the data being passed down from the parent container on props */}
+      <span>
+        {props.button.char}
+      </span>
+    </button>
+
+
   );
 };
+
+export default OperatorButton;

src/components/ButtonComponents/OperatorButtons/Operators.js

@@ -1,16 +1,38 @@
-import React from "react";
-
+import React, {useState}  from "react";
+import {operators} from "../../../data.js";
+import OperatorButton from "./OperatorButton.js";
 //import any components needed
 
 //Import your array data to from the provided data file
 
-const Operators = () => {
+const Operators = (props) => {
   // STEP 2 - add the imported data to state
+  const [operatorState, setOperatorState] = useState(operators);
+
   return (
-    <div>
+    <div className = "operator-button-container">
       {/* STEP 3 - Use .map() to iterate over your array data and return a button
        component matching the name on the provided file. Pass
        it any props needed by the child component*/}
+       {
+         operatorState.map((button, index) => (
+           <OperatorButton
+             button={button}
+             key={index}
+             setEquation= {props.setEquation}
+             equation= {props.equation}
+             displayNum= {props.displayNum}
+             setDisplayNum= {props.setDisplayNum}
+             total= {props.total}
+             setTotal= {props.setTotal}
+             setTracking = {props.setTracking}
+             tracking = {props.tracking}
+
+          />
+         ))
+       }
     </div>
   );
 };
+
+export default Operators;