msgcalculator

src/App.css

@@ -1,12 +1,13 @@
 .container {
     background-color: #c00025;
-    width: 100%;
-    max-width: 550px;
+    max-width: 500px;
     border-radius: 15px;
     border: 2px solid grey;
     padding-bottom: 25px;
 }
+
 .display {
+    margin: 0 auto;
     margin-top: 25px;
     height: 100px;
     width: 450px;
@@ -20,3 +21,54 @@
     padding-right: 8%;
     font-size: 5.0rem;
   }
+
+  .char, .numbers, .special{
+      background: rgb(49, 93, 129);
+      border-radius: 150%;
+      width: 50px;
+      height: 50px;
+      margin: 5%;
+      color: white;
+      border: 2px groove white;
+    } 
+
+
+
+
+  .char{
+   background: dodgerblue;
+   margin: 8%;
+  }
+
+  .numbers{
+   background: steelblue;
+  }
+
+  .char-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-right: 29%;
+    margin-top: 11%;
+  }
+
+  .numbers-container {
+    margin: 3%;
+    margin-left: 5%;
+  }
+
+  .special-container {
+   margin-left: 2.5%;
+  }
+
+
+
+  .others {
+      display: flex;
+      width: 100%;
+      justify-content: center;
+  }
+
+  .other1 {
+    width: 50%;
+    margin-top: -20.5%;
+  }

src/App.js

@@ -1,4 +1,8 @@
-import React from "react";
+import React, { useState }from "react";
+import Numbers from "./components/ButtonComponents/NumberButtons/Numbers"
+import Operators from "./components/ButtonComponents/OperatorButtons/Operators"
+import Specials from "./components/ButtonComponents/SpecialButtons/Specials"
+import Display from "./components/DisplayComponents/Display"
 import "./App.css";
 // 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,11 +16,33 @@ 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 [info , setInfo] = useState(0);
+
+
+  // const newInfo = (entry) => {setInfo(entry)};
 
   return (
     <div className="container">
       <Logo />
+      <Display info1 = { info }/>
       <div className="App">
+
+      <Specials newInfo = { setInfo }/>
+      <div className="others">
+
+      <div>
+      <Numbers newInfo = { setInfo }/>
+
+      </div>
+
+      <div className="other1">
+      <Operators newInfo = { setInfo }/>
+      </div>
+
+      </div>
+
+
         {/* STEP 4 - Render your components here and be sure to properly import/export all files */}
       </div>
     </div>

src/components/ButtonComponents/NumberButtons/NumberButton.js

@@ -1,9 +1,17 @@
 import React from "react";
 
-const NumberButton = () => {
+
+const NumberButton = ( { newInfo1,item } ) => {
   return (
-    <>
+    <span className="numbers-container">
+
+    <button className="numbers" onClick = {() => { newInfo1(item) }}>
       {/* Display a button element rendering the data being passed down from the parent container on props */}
-    </>
+      { item }
+    </button>
+    </span>
   );
 };
+
+
+export default NumberButton

src/components/ButtonComponents/NumberButtons/Numbers.js

@@ -1,4 +1,7 @@
-import React from "react";
+import React ,{ useState }from "react";
+import NumberButton from "./NumberButton"
+import { numbers } from "../../../data"
+import { tsPropertySignature } from "@babel/types";
 
 //import any components needed
 // example of import from data.js. Note all the ../   This is how we move through folders. 
@@ -7,13 +10,21 @@ 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 [number,setNumbers] = useState(numbers)
+
   return (
     <div>
       {/* 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*/}
+
+      { number.map((item,index) => {
+         return <NumberButton item = {item} keys = { index } newInfo1 = { props.newInfo }/>
+       })}
     </div>
   );
 };
+
+export default Numbers

src/components/ButtonComponents/OperatorButtons/OperatorButton.js

@@ -1,9 +1,14 @@
 import React from "react";
 
-const OperatorButton = () => {
+const OperatorButton = (props) => {
   return (
-    <>
+   <span className="char-container">
+    <button className="char" onClick = {() => { props.newInfo1(props.item.char) }}>
       {/* Display a button element rendering the data being passed down from the parent container on props */}
-    </>
+      {props.item.char}
+    </button>
+    </span>
   );
 };
+
+export default OperatorButton

src/components/ButtonComponents/OperatorButtons/Operators.js

@@ -1,16 +1,27 @@
-import React from "react";
-
+import React ,{ useState }from "react";
+import { operators } from "../../../data"
+import OperatorButton from "./OperatorButton"
 //import any components needed
 
 //Import your array data to from the provided data file
 
-const Operators = () => {
+const Operators = (props) => {
+  const [operator, setOperators] = useState(operators)
   // STEP 2 - add the imported data to state
   return (
     <div>
       {/* 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*/}
+
+       {
+         operator.map((item,index) => {
+            return <OperatorButton item ={item} index ={index} newInfo1 = { props.newInfo }/>
+         })
+       }
+
     </div>
   );
 };
+
+export default Operators

src/components/ButtonComponents/SpecialButtons/SpecialButton.js

@@ -1,9 +1,15 @@
 import React from "react";
+import { tsPropertySignature } from "@babel/types";
 
-const SpecialButton = () => {
+const SpecialButton = ({ newInfo1,item }) => {
   return (
-    <>
+    <span className="special-container">
+    <button className="special" onClick = {() => { newInfo1(item) }}>
       {/* Display a button element rendering the data being passed down from the parent container on props */}
-    </>
+      {item}
+    </button>
+    </span>
   );
 };
+
+export default SpecialButton

src/components/ButtonComponents/SpecialButtons/Specials.js

@@ -1,17 +1,29 @@
-import React from "react";
+import React ,{ useState }from "react";
+import SpecialButton from "./SpecialButton"
+import { specials } from "../../../data"
 
 //import any components needed
 
 //Import your array data to from the provided data file
 
-const Specials = () => {
+const Specials = (props) => {
   // STEP 2 - add the imported data to state
+  const [special, setSpecial] = useState(specials)
 
   return (
     <div>
       {/* 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*/}
+
+       {
+         special.map((item,index) => {
+           return  <SpecialButton item = {item} keys = { index } newInfo1 = { props.newInfo }/>
+         })
+       }
+
     </div>
   );
 };
+
+export default Specials

src/components/DisplayComponents/Display.js

@@ -1,5 +1,8 @@
 import React from "react";
+import { tsPropertySignature } from "@babel/types";
 
-const Display = () => {
-  return <div className="display">{/* Display any props data here */}</div>;
+const Display = ({info1}) => {
+return <div className="display">{ info1 }{/* Display any props data here */}</div>;
 };
+
+export default Display

src/data.js

@@ -4,9 +4,9 @@
 // file. No real tricks here just be aware of what is in each array
 // and how you'll access the data.
 
-const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."];
+export const numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."];
 
-const operators = [
+export const operators = [
   {
     char: "/",
     value: "/"
@@ -29,4 +29,4 @@ const operators = [
   }
 ];
 
-const specials = ["C", "+/-", "%"];
+export const specials = ["C", "+/-", "%"];