diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..b512c09d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..5151e8ce --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "hodaessi_calculator", + "version": "0.1.0", + "private": true, + "dependencies": { + "react": "^16.12.0", + "react-dom": "^16.12.0", + "react-scripts": "0.9.5" + }, + "devDependencies": {}, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + } +} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 00000000..5c125de5 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..aab5e3b0 --- /dev/null +++ b/public/index.html @@ -0,0 +1,31 @@ + + + + + + + + React App + + +
+ + + diff --git a/src/App.css b/src/App.css new file mode 100644 index 00000000..8e45c1e1 --- /dev/null +++ b/src/App.css @@ -0,0 +1,16 @@ +.App { + display: flex; + justify-content: center; + align-items: enter; + height: 100vh; + width: 100%; + margin-top: 50px; +} +.calculation { + width: 400px; + height: 600px; +} +.row { + display: flex; + widthL: 100%; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js new file mode 100644 index 00000000..67cebc47 --- /dev/null +++ b/src/App.js @@ -0,0 +1,137 @@ +//https://www.youtube.com/watch?v=nImdvUVMfl0 +import React, { Component } from 'react'; +import './App.css'; +import Button from './components/Button'; +import Input from './components/Input'; +import ClearButton from './components/ClearButton'; + +class App extends Component { + constructor(props) { + super(props); + + this.state = { + input: "", + previousNumber: "", + currentNumber: "", + operator: "" + }; + } + + addToInput = val => { + this.setState({input: this.state.input + val}); + }; + + addZeroToInput = val => { + if (this.state.input !== "") { + this.setState({input: this.state.input + val}); + } + } + + addDecimalToInput = val => { + if (this.state.input.indexOf(".") === -1) { + this.setState({input: this.state.input + val}); + } + } + + clearInput = () => { + this.setState({ input: "" }); + } + + add = () => { + this.state.previousNumber = this.state.input; + this.setState({input: ""}); + this.state.operator = "plus"; + } + subtract = () => { + this.state.previousNumber = this.state.input; + this.setState({input: ""}); + this.state.operator = "subtract"; + } + multiply = () => { + this.state.previousNumber = this.state.input; + this.setState({input: ""}); + this.state.operator = "multiply"; + } + divide = () => { + this.state.previousNumber = this.state.input; + this.setState({input: ""}); + this.state.operator = "divide"; + } + + evaluation = () => { + this.state.currentNumber = this.state.input; + + if(this.state.operator == "plus") { + this.setState({ + input: + parseFloat(this.state.previousNumber) + + parseFloat(this.state.currentNumber) + }) + } else if(this.state.operator == "subtract") { + this.setState({ + input: + parseFloat(this.state.previousNumber) - + parseFloat(this.state.currentNumber) + }) + } else if(this.state.operator == "multiply") { + this.setState({ + input: + parseFloat(this.state.previousNumber) * + parseFloat(this.state.currentNumber) + }) + } else if(this.state.operator == "divide") { + this.setState({ + input: + parseFloat(this.state.previousNumber) / + parseFloat(this.state.currentNumber) + }) + } + } + + render() { + return ( +
+
+
+ {this.state.input} +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + + + +
+
+ Clear +
+
+
+ ); + } +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 00000000..b84af98d --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); +}); diff --git a/src/components/Button.css b/src/components/Button.css new file mode 100644 index 00000000..f1dc5327 --- /dev/null +++ b/src/components/Button.css @@ -0,0 +1,16 @@ +.button { + display: flex; + height: 4em; + flex: 1; + justify-content: center; + align-items: center; + font-weight: lighter; + font-size: 1.4em; + background-color: #e0e1e6; + color: black; + outline: 1px solid gray; +} +.operator { + background-color: #fe9241; + color: white; +} \ No newline at end of file diff --git a/src/components/Button.js b/src/components/Button.js new file mode 100644 index 00000000..06f10232 --- /dev/null +++ b/src/components/Button.js @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import './Button.css'; + +class Button extends Component { + isOperator = val => { + return !isNaN(val) || val === "." || val === "="; + }; + + render() { + return ( +
this.props.handleClick( + this.props.children)} + > + {this.props.children} +
+ ); + } +} + +export default Button; diff --git a/src/components/ClearButton.css b/src/components/ClearButton.css new file mode 100644 index 00000000..7cac555a --- /dev/null +++ b/src/components/ClearButton.css @@ -0,0 +1,12 @@ +.clear-button{ + display: flex; + flex: 1; + height: 4em; + align-items: center; + justify-content: center; + font-weight: lighter; + font-size: 1.rem; + outline: 1px solid #888; + height: 4em; + background-color: #c5c3cd; +} \ No newline at end of file diff --git a/src/components/ClearButton.js b/src/components/ClearButton.js new file mode 100644 index 00000000..0a0c9c05 --- /dev/null +++ b/src/components/ClearButton.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; +import './ClearButton.css'; + +class ClearButton extends Component { + render() { + return ( +
this.props.handleClear()} + > + {this.props.children} +
+ ); + } +} + +export default ClearButton; diff --git a/src/components/Input.css b/src/components/Input.css new file mode 100644 index 00000000..7ea7a571 --- /dev/null +++ b/src/components/Input.css @@ -0,0 +1,13 @@ +.input { + display: flex; + height: 4em; + flex: 1; + background-color: #000000; + outline: 1px solid #888888; + color: #fff; + justify-content: flex-end; + padding: 0.5em; + font-weight: bold; + font-size: 1.4em; + align-items: center; +} \ No newline at end of file diff --git a/src/components/Input.js b/src/components/Input.js new file mode 100644 index 00000000..652ed2bf --- /dev/null +++ b/src/components/Input.js @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; +import './Input.css'; + +class Input extends Component { + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +export default Input; diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..b4cc7250 --- /dev/null +++ b/src/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..54c5ef1a --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; +import './index.css'; + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 00000000..6b60c104 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + +