commit 3601713ac2ce9663acdda2d9a7bf092417521e87
parent 8f3195782e859415117b45ede58d60aec2b1ffc6
Author: therealFIGBERT <figbertwelner@gmail.com>
Date: Sun, 24 Nov 2019 21:15:56 -0800
Add functionality to basic calculator, add missing calculator row, restructure calculator files
Diffstat:
10 files changed, 188 insertions(+), 103 deletions(-)
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,23 +1,19 @@
import React from 'react';
-import { CalcOut } from "./calcOut";
-import { Pad } from "./calcPads/pad";
+import { BasicCalc } from "./basicCalc/basicHandler";
export class App extends React.Component {
constructor(props) {
super(props);
this.state = {
- mode: 'basic',
- output: 0,
- input: [0]
+ mode: 'basic'
};
}
render() {
- return (
- <div>
- <CalcOut output={this.state.output} input={this.state.input} />
- <Pad mode='basic'/>
- </div>
- );
+ if (this.state.mode === 'basic') {
+ return <BasicCalc />;
+ } else {
+ return <div />;
+ }
}
}
\ No newline at end of file
diff --git a/src/components/basicCalc/basicButton.js b/src/components/basicCalc/basicButton.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class BasicButton extends React.Component {
+ render() {
+ return (
+ <button type='button' onClick={this.props.onButtonPress} className='calc calc__button' value={this.props.value}>
+ <span style={{fontSize: '2vw'}}>{this.props.value}</span>
+ </button>
+ );
+ }
+}
+BasicButton.propTypes = {
+ value: PropTypes.string.isRequired
+};
+
+export class BasicButtonRow extends React.Component {
+ render() {
+ let onButtonPress = this.props.onButtonPress;
+ return (
+ <div className='calc calc__row'>
+ {this.props.buttonValues.map(function (value, index, _) {
+ return <BasicButton idx={index} value={value} onButtonPress={onButtonPress} />;
+ })}
+ </div>
+ );
+ }
+}
+BasicButtonRow.propTypes = {
+ buttonValues: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+\ No newline at end of file
diff --git a/src/components/basicCalc/basicHandler.js b/src/components/basicCalc/basicHandler.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import { BasicOut } from "./basicOut";
+import { BasicPad } from "./basicPad";
+
+export class BasicCalc extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ output: 0,
+ input: '',
+ justSolved: false
+ };
+ this.onButtonPress = this.onButtonPress.bind(this);
+ this.addDigit = this.addDigit.bind(this);
+ this.equate = this.equate.bind(this);
+ this.delete = this.delete.bind(this);
+ this.clear = this.clear.bind(this);
+ }
+
+ onButtonPress(object) {
+ let value = object.target.value;
+ switch (value) {
+ case 'AC':
+ this.clear();
+ break;
+ case 'DEL':
+ this.delete();
+ break;
+ case '=':
+ this.equate();
+ break;
+ case '…':
+ console.log('Mode switch eventually');
+ break;
+ case undefined:
+ console.log("FUCK");
+ break;
+ default:
+ this.addDigit(value);
+ }
+ }
+
+ addDigit(buttonVal) {
+ if (this.state.justSolved) {
+ this.setState({
+ output: 0,
+ input: '',
+ justSolved: false
+ });
+ }
+ let value;
+ switch (buttonVal) {
+ case '÷':
+ value = '/';
+ break;
+ case '–':
+ value = '-';
+ break;
+ case '×':
+ value = '*';
+ break;
+ default:
+ value = buttonVal;
+ }
+ const newInput = this.state.input + value;
+ this.setState({
+ input: newInput
+ });
+ }
+
+ delete() {
+ this.setState({
+ input: this.state.input.slice(0,-1)
+ });
+ }
+
+ clear() {
+ this.setState({
+ output: 0,
+ input: ''
+ });
+ }
+
+ equate() {
+ if (!this.state.justSolved) {
+ let final;
+ if (!isNaN(Number(this.state.input.slice(-1)))) {
+ // eslint-disable-next-line
+ final = eval(this.state.input);
+ } else {
+ final = 'ERROR';
+ }
+ this.setState({
+ output: final,
+ input: '',
+ justSolved: true
+ });
+ }
+ }
+
+ render() {
+ return (
+ <div>
+ <BasicOut output={this.state.output} input={this.state.input} />
+ <BasicPad onButtonPress={this.onButtonPress}/>
+ </div>
+ );
+ }
+}
+\ No newline at end of file
diff --git a/src/components/basicCalc/basicOut.js b/src/components/basicCalc/basicOut.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export class BasicOut extends React.Component {
+ render() {
+ return (
+ <div className='calc calc__out'>
+ <div style={{fontSize: '4vmax', marginTop: '0.5vmax', marginBottom: '2vmax'}}>{this.props.output}</div>
+ <div style={{fontSize: '1.5vmax'}}>{this.props.input}</div>
+ </div>
+ );
+ }
+}
+
+BasicOut.propTypes = {
+ output: PropTypes.number.isRequired,
+ input: PropTypes.string.isRequired
+};
+\ No newline at end of file
diff --git a/src/components/basicCalc/basicPad.js b/src/components/basicCalc/basicPad.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { BasicButtonRow } from "./basicButton";
+
+export class BasicPad extends React.Component {
+ render() {
+ return (
+ <div className='calc calc__pad'>
+ <BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['AC', 'DEL', '%', '÷']} />
+ <BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['7', '8', '9', '×']} />
+ <BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['4', '5', '6', '–']} />
+ <BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['1', '2', '3', '+']} />
+ <BasicButtonRow onButtonPress={this.props.onButtonPress} buttonValues={['…', '0', '.', '=']} />
+ </div>
+ );
+ }
+}
+\ No newline at end of file
diff --git a/src/components/calcButton.js b/src/components/calcButton.js
@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class CalcButton extends React.Component {
- render() {
- return (
- <button type='button' className='calc calc__button' value={this.props.value}>
- <span style={{fontSize: '2.5vw'}}>{this.props.value}</span>
- </button>
- );
- }
-}
-CalcButton.propTypes = {
- value: PropTypes.string.isRequired
-};
-
-export class CalcButtonRow extends React.Component {
- render() {
- return (
- <div className='calc calc__row'>
- {this.props.buttonValues.map(function (value, index, _) {
- return <CalcButton idx={index} value={value} />;
- })}
- </div>
- );
- }
-}
-CalcButtonRow.propTypes = {
- buttonValues: PropTypes.arrayOf(PropTypes.string).isRequired
-};
-\ No newline at end of file
diff --git a/src/components/calcOut.js b/src/components/calcOut.js
@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export class CalcOut extends React.Component {
- render() {
- return (
- <div className='calc calc__out'>
- <div style={{fontSize: '4vmax', marginTop: '0.5vmax', marginBottom: '2vmax'}}>{this.props.output}</div>
- <div style={{fontSize: '1.5vmax'}}>{this.props.input}</div>
- </div>
- );
- }
-}
-
-CalcOut.propTypes = {
- output: PropTypes.number.isRequired,
- input: PropTypes.arrayOf(PropTypes.number).isRequired
-};
-\ No newline at end of file
diff --git a/src/components/calcPads/basicPad.js b/src/components/calcPads/basicPad.js
@@ -1,15 +0,0 @@
-import React from "react";
-import { CalcButtonRow } from "../calcButton";
-
-export class BasicPad extends React.Component {
- render() {
- return (
- <div className='calc calc__pad'>
- <CalcButtonRow buttonValues={['AC', '±', '%', '÷']} />
- <CalcButtonRow buttonValues={['4', '5', '6', '–']} />
- <CalcButtonRow buttonValues={['1', '2', '3', '+']} />
- <CalcButtonRow buttonValues={['…', '0', '.', '=']} />
- </div>
- );
- }
-}
-\ No newline at end of file
diff --git a/src/components/calcPads/pad.js b/src/components/calcPads/pad.js
@@ -1,22 +0,0 @@
-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
@@ -40,7 +40,7 @@ body {
flex-direction: column;
flex-wrap: wrap;
justify-content: space-evenly;
- padding-bottom: 4vmax;
+ padding-bottom: 3vmax;
border-bottom-left-radius: 1.5vmax;
border-bottom-right-radius: 1.5vmax;
}
@@ -55,8 +55,8 @@ body {
}
.calc__button {
- width: 6vmax;
- height: 6vmax;
+ width: 5vmax;
+ height: 5vmax;
font-size: x-large;
text-align: center;
border-radius: 25%;
