figbertmath

commit 8f3195782e859415117b45ede58d60aec2b1ffc6
parent 707c3c885dbea1df9979ac4d51e30f6da44dcc4d
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Sat, 23 Nov 2019 23:22:54 -0800

Merge all CSS into one file, add initial dynamic pad selection

Diffstat:
D
src/components/App.css
 | 
49
-------------------------------------------------
M
src/components/App.js
 | 
9
++++-----
M
src/components/calcOut.js
 | 
11
++---------
A
src/components/calcPads/pad.js
 | 
23
+++++++++++++++++++++++
M
src/index.css
 | 
49
+++++++++++++++++++++++++++++++++++++++++++++++++

5 files changed, 78 insertions(+), 63 deletions(-)
diff --git a/src/components/App.css b/src/components/App.css
@@ -1,48 +0,0 @@
-.calc {
-    background: #ac1a2d;
-    color: rgba(255, 255, 255, .7);
-    font-family: Tomorrow, -apple-system, sans-serif;
-}
-
-.calc__out {
-    width: 10vmax;
-    text-align: right;
-    line-height: 50%;
-    padding: 1.5vmax 10vmax 1.5vmax 10vmax;
-    border: 1vmax solid #1d1d1d;
-    border-top-left-radius: 1.5vmax;
-    border-top-right-radius: 1.5vmax;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: flex-end;
-}
-
-.calc__pad {
-    background-color: #1d1d1d;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    padding-bottom: 4vmax;
-    border-bottom-left-radius: 1.5vmax;
-    border-bottom-right-radius: 1.5vmax;
-}
-
-.calc__row {
-    background-color: #1d1d1d;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    margin-top: 2vmax;
-}
-
-.calc__button {
-    width: 6vmax;
-    height: 6vmax;
-    font-size: x-large;
-    text-align: center;
-    border-radius: 25%;
-}
-\ No newline at end of file
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,15 +1,14 @@
 import React from 'react';
-import './App.css';
 import { CalcOut } from "./calcOut";
-import { BasicPad } from "./calcPads/basicPad";
+import { Pad } from "./calcPads/pad";
 
 export class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       mode: 'basic',
-      output: '000000',
-      input: '0000'
+      output: 0,
+      input: [0]
     };
   }
 
@@ -17,7 +16,7 @@ export class App extends React.Component {
     return (
         <div>
           <CalcOut output={this.state.output} input={this.state.input} />
-          <BasicPad />
+          <Pad mode='basic'/>
         </div>
     );
   }
diff --git a/src/components/calcOut.js b/src/components/calcOut.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './App.css'
 
 export class CalcOut extends React.Component {
     render() {
@@ -14,12 +13,6 @@ export class CalcOut extends React.Component {
 }
 
 CalcOut.propTypes = {
-    output: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number
-    ]).isRequired,
-    input: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number
-    ]).isRequired
+    output: PropTypes.number.isRequired,
+    input: PropTypes.arrayOf(PropTypes.number).isRequired
 };
 \ No newline at end of file
diff --git a/src/components/calcPads/pad.js b/src/components/calcPads/pad.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BasicPad } from "./basicPad";
+
+export class Pad extends React.Component {
+    render() {
+        let pad;
+        if (this.props.mode === 'basic') {
+            pad = <BasicPad />
+        } else {
+            pad = <BasicPad />
+            /*
+            TO DO:
+            Implement other pads for calculator
+             */
+        }
+        return pad;
+    }
+}
+Pad.propTypes = {
+    mode: PropTypes.string.isRequired
+};
+\ No newline at end of file
diff --git a/src/index.css b/src/index.css
@@ -11,4 +11,53 @@ body {
     display: flex;
     flex-direction: row;
     justify-content: center;
+}
+
+.calc {
+    background: #ac1a2d;
+    color: rgba(255, 255, 255, .7);
+    font-family: Tomorrow, -apple-system, sans-serif;
+}
+
+.calc__out {
+    width: 10vmax;
+    text-align: right;
+    line-height: 50%;
+    padding: 1.5vmax 10vmax 1.5vmax 10vmax;
+    border: 1vmax solid #1d1d1d;
+    border-top-left-radius: 1.5vmax;
+    border-top-right-radius: 1.5vmax;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: flex-end;
+}
+
+.calc__pad {
+    background-color: #1d1d1d;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    padding-bottom: 4vmax;
+    border-bottom-left-radius: 1.5vmax;
+    border-bottom-right-radius: 1.5vmax;
+}
+
+.calc__row {
+    background-color: #1d1d1d;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    margin-top: 2vmax;
+}
+
+.calc__button {
+    width: 6vmax;
+    height: 6vmax;
+    font-size: x-large;
+    text-align: center;
+    border-radius: 25%;
 }
 \ No newline at end of file