From e8a2ca17b06f8c879da1e2284dea3440c0bcb148 Mon Sep 17 00:00:00 2001 From: littleonetwo Date: Fri, 18 Oct 2019 23:35:09 -0500 Subject: [PATCH] assignment plus some stretch --- src/App.css | 45 ++++++++- src/App.js | 52 +++++++++- .../NumberButtons/NumberButton.js | 94 ++++++++++++++++++- .../ButtonComponents/NumberButtons/Numbers.js | 32 +++++-- .../OperatorButtons/OperatorButton.js | 54 ++++++++++- .../OperatorButtons/Operators.js | 30 +++++- .../SpecialButtons/SpecialButton.js | 43 ++++++++- .../SpecialButtons/Specials.js | 27 +++++- src/components/DisplayComponents/Display.js | 6 +- src/data.js | 8 +- 10 files changed, 356 insertions(+), 35 deletions(-) diff --git a/src/App.css b/src/App.css index 9593aa1f3..6a97c0cd5 100644 --- a/src/App.css +++ b/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%; +} diff --git a/src/App.js b/src/App.js index dff4ef086..ab93f2967 100644 --- a/src/App.js +++ b/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 (
{/* STEP 4 - Render your components here and be sure to properly import/export all files */} + +
+
+ + +
+
+ +
+
+
); diff --git a/src/components/ButtonComponents/NumberButtons/NumberButton.js b/src/components/ButtonComponents/NumberButtons/NumberButton.js index e440a9bf8..82d90cc42 100644 --- a/src/components/ButtonComponents/NumberButtons/NumberButton.js +++ b/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 */} - + + + + ); }; + +export default NumberButton; diff --git a/src/components/ButtonComponents/NumberButtons/Numbers.js b/src/components/ButtonComponents/NumberButtons/Numbers.js index bb0f9e60b..a0c90f78e 100644 --- a/src/components/ButtonComponents/NumberButtons/Numbers.js +++ b/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 ( -
+
{/* 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) => ( + + )) + }
); }; + +export default Numbers; diff --git a/src/components/ButtonComponents/OperatorButtons/OperatorButton.js b/src/components/ButtonComponents/OperatorButtons/OperatorButton.js index 00d2766a4..a6a983687 100644 --- a/src/components/ButtonComponents/OperatorButtons/OperatorButton.js +++ b/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 */} - + + + ); }; + +export default OperatorButton; diff --git a/src/components/ButtonComponents/OperatorButtons/Operators.js b/src/components/ButtonComponents/OperatorButtons/Operators.js index 388c3d426..2eb629b89 100644 --- a/src/components/ButtonComponents/OperatorButtons/Operators.js +++ b/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 ( -
+
{/* 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) => ( + + )) + }
); }; + +export default Operators; diff --git a/src/components/ButtonComponents/SpecialButtons/SpecialButton.js b/src/components/ButtonComponents/SpecialButtons/SpecialButton.js index c3225526d..3c045aa7c 100644 --- a/src/components/ButtonComponents/SpecialButtons/SpecialButton.js +++ b/src/components/ButtonComponents/SpecialButtons/SpecialButton.js @@ -1,9 +1,46 @@ import React from "react"; -const SpecialButton = () => { +const SpecialButton = (props) => { + let clickCount = 0; + const specialButton = () => { + // let clickCount = 0; + + if(props.button === 'C'){ + props.setDisplayNum('0'); + if(clickCount === 0){ + clickCount++; + //console.log(clickCount); + } else { + props.setEquation('nothing'); + //console.log(props.equation); + clickCount= 0; + props.setTracking('0'); + //console.log(clickCount); + } + } else if (props.button === '+/-'){ + if(props.displayNum.includes('-') != true){ + props.setDisplayNum('-' + props.displayNum); + } else { + + let cut = props.displayNum.replace('-', ' '); + props.setDisplayNum(cut.trim()); + } + clickCount = 0; + } + + }; + + return ( - <> + + + ); }; + +export default SpecialButton; diff --git a/src/components/ButtonComponents/SpecialButtons/Specials.js b/src/components/ButtonComponents/SpecialButtons/Specials.js index 385e0399c..ec9dc1892 100644 --- a/src/components/ButtonComponents/SpecialButtons/Specials.js +++ b/src/components/ButtonComponents/SpecialButtons/Specials.js @@ -1,17 +1,34 @@ -import React from "react"; - +import React, {useState} from "react"; +import {specials} from "../../../data.js"; +import SpecialButton from "./SpecialButton.js"; //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 [specialState, setSpecialState] = useState(specials); return ( -
+
{/* 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*/} + { + specialState.map((button, index) => ( + + )) + }
); }; + +export default Specials; diff --git a/src/components/DisplayComponents/Display.js b/src/components/DisplayComponents/Display.js index 43460c9e0..8931f51d3 100644 --- a/src/components/DisplayComponents/Display.js +++ b/src/components/DisplayComponents/Display.js @@ -1,5 +1,7 @@ import React from "react"; -const Display = () => { - return
{/* Display any props data here */}
; +const Display = (props) => { + return
{props.displayNum}
; }; + +export default Display; diff --git a/src/data.js b/src/data.js index dfd3f2433..81959228b 100644 --- a/src/data.js +++ b/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,6 @@ const operators = [ } ]; -const specials = ["C", "+/-", "%"]; +export const specials = ["C", "+/-", "%"]; + +// export {numbers, operators, specials};