Clean code

README.md

@@ -2,16 +2,7 @@
 
 This is a simple arithmetic calculator built with REACT.JS library. 
 
-Live version deployed at [heroku](https://calculator-n.herokuapp.com/)
-
 To run it on your local machine clone into the repo, then type: 
 
     npm install && npm start
 
-
-A sneak peek: 
-
-![alt react-calculator-simple](Screenshot.png)
-
-
-

package.json

@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "^18.1.0",
+    "react-dom": "^16.14.0",
     "react-scripts": "^2.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/App.css

@@ -1,27 +1,59 @@
+.App{
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color:#444;
+}
 .result {
-  height: 60px;
-  background-color: #bbb;
+  height: 150px;
+  background-color: #111;
   width: 100%;
+  border-radius: 10px 10px 0 0 ;
 }
 
+
 .result p {
   font-size: 40px;
   margin: 5px;
-
+  color: white;
+  padding: 15px;
 }
 
 .calculator-body {
-  max-width: 400px;
+  width: 400px;
   margin: auto;
 }
 
 .button {
   display: block;
-  background-color: #bbb;
 }
 
 button {
+  background-color: #555;
   width: 25%;
-  height: 60px;
+  height: 80px;
   font-size: 30px;
+  cursor:pointer;
+  border:1px solid #333;
+  color: white;
+}
+button:hover{
+  background-color: #666;
+}
+.actions{
+  background-color: #444;
+  color: #ef6431;
+}
+.actions:hover{
+  background-color: #333;
+}
+.equal{
+  background-color: orangered;
+  color: white;
 }
+.equal:hover{
+  background-color: rgb(255, 181, 154);
+  color: orangered;
+}

src/App.js

@@ -1,84 +1,55 @@
-import React, { Component } from 'react';
+import React, {useState} from 'react';
 import './App.css';
 import ResultComponent from './components/ResultComponent';
 import KeyPadComponent from "./components/KeyPadComponent";
 
-class App extends Component {
-    constructor(){
-        super();
 
-        this.state = {
-            result: ""
-        }
-    }
-
-    onClick = button => {
-
-        if(button === "="){
-            this.calculate()
-        }
-
-        else if(button === "C"){
-            this.reset()
-        }
-        else if(button === "CE"){
-            this.backspace()
-        }
-
-        else {
-            this.setState({
-                result: this.state.result + button
-            })
-        }
-    };
-
-
-    calculate = () => {
+const App =()=> {
+    const [result, setResult] = useState("")
+    const calculate = () => {
         var checkResult = ''
-        if(this.state.result.includes('--')){
-            checkResult = this.state.result.replace('--','+')
+        if (result.includes('--')) {
+            checkResult = result.replace('--', '+')
+        } else {
+            checkResult = result
         }
-
-        else {
-            checkResult = this.state.result
-        }
-
         try {
-            this.setState({
-                // eslint-disable-next-line
-                result: (eval(checkResult) || "" ) + ""
-            })
+            // let stringRes = (eval(checkResult) || "").toString()
+            let stringRes = Function('"use strict";return ('+ (checkResult||"") +')')().toString()
+            setResult(stringRes)
         } catch (e) {
-            this.setState({
-                result: "error"
-            })
-
+            setResult("error")
         }
-    };
+    }
+    const reset = () => {
+        setResult("")
+    }
+    const backspace = () => {
+        setResult(prevState => prevState.slice(0, -1))
+    }
 
-    reset = () => {
-        this.setState({
-            result: ""
-        })
-    };
+    const onClick = (button) => {
+        switch (button){
+            case "=" : return calculate()
+            case "C" : return  reset()
+            case "CE" : return backspace()
+            default : setResult(prevState => prevState+button)
+        }
+    }
 
-    backspace = () => {
-        this.setState({
-            result: this.state.result.slice(0, -1)
-        })
-    };
+    return (
+        <div className={`App`}>
+            <div className="calculator-body">
+                <ResultComponent result={result}/>
+                <KeyPadComponent onClick={onClick}/>
+            </div>
 
-    render() {
-        return (
-            <div>
-                <div className="calculator-body">
-                    <h1>Simple Calculator</h1>
-                    <ResultComponent result={this.state.result}/>
-                    <KeyPadComponent onClick={this.onClick}/>
-                </div>
+            <div style={{backgroundColor:"white"}}>
             </div>
-        );
-    }
+
+        </div>
+    )
 }
 
-export default App;
+export default App
+

src/components/KeyPadComponent.js

@@ -1,40 +1,56 @@
-import React, {Component} from 'react';
-
-class KeyPadComponent extends Component {
-
-    render() {
-        return (
-            <div className="button">
-                <button name="(" onClick={e => this.props.onClick(e.target.name)}>(</button>
-                <button name="CE" onClick={e => this.props.onClick(e.target.name)}>CE</button>
-                <button name=")" onClick={e => this.props.onClick(e.target.name)}>)</button>
-                <button name="C" onClick={e => this.props.onClick(e.target.name)}>C</button><br/>
-
-
-                <button name="1" onClick={e => this.props.onClick(e.target.name)}>1</button>
-                <button name="2" onClick={e => this.props.onClick(e.target.name)}>2</button>
-                <button name="3" onClick={e => this.props.onClick(e.target.name)}>3</button>
-                <button name="+" onClick={e => this.props.onClick(e.target.name)}>+</button><br/>
-
-
-                <button name="4" onClick={e => this.props.onClick(e.target.name)}>4</button>
-                <button name="5" onClick={e => this.props.onClick(e.target.name)}>5</button>
-                <button name="6" onClick={e => this.props.onClick(e.target.name)}>6</button>
-                <button name="-" onClick={e => this.props.onClick(e.target.name)}>-</button><br/>
-
-                <button name="7" onClick={e => this.props.onClick(e.target.name)}>7</button>
-                <button name="8" onClick={e => this.props.onClick(e.target.name)}>8</button>
-                <button name="9" onClick={e => this.props.onClick(e.target.name)}>9</button>
-                <button name="*" onClick={e => this.props.onClick(e.target.name)}>x</button><br/>
-
-
-                <button name="." onClick={e => this.props.onClick(e.target.name)}>.</button>
-                <button name="0" onClick={e => this.props.onClick(e.target.name)}>0</button>
-                <button name="=" onClick={e => this.props.onClick(e.target.name)}>=</button>
-                <button name="/" onClick={e => this.props.onClick(e.target.name)}>÷</button><br/>
-            </div>
-        );
-    }
+import React from 'react';
+
+
+const buttons = [
+    [
+        {text:"(",value:"(",className:"actions"},
+        {text:"CE",value:"CE",className:"actions"},
+        {text:")",value:")",className:"actions"},
+        {text:"C",value:"C",className:"actions"},
+    ],
+    [
+        {text:"1",value:"1",className:""},
+        {text:"2",value:"2",className:""},
+        {text:"3",value:"3",className:""},
+        {text:"+",value:"+",className:"actions"},
+    ],
+    [
+        {text:"4",value:"4",className:""},
+        {text:"5",value:"5",className:""},
+        {text:"6",value:"6",className:""},
+        {text:"-",value:"-",className:"actions"},
+    ],
+    [
+        {text:"7",value:"7",className:""},
+        {text:"8",value:"8",className:""},
+        {text:"9",value:"9",className:""},
+        {text:"x",value:"*",className:"actions"},
+    ],
+    [
+        {text:".",value:".",className:""},
+        {text:"0",value:"0",className:""},
+        {text:"=",value:"=",className:"equal"},
+        {text:"÷",value:"/",className:"actions"},
+    ],
+]
+const KeyPadComponent = ({onClick}) => {
+
+    return (
+        <div className="button">
+            {
+                buttons.map((rows) => (
+                    <>
+                        {rows.map((item, index) => {
+                            return (
+                                <button key={index} className={item.className} onClick={() => onClick(item.value)}>{item.text}</button>)
+                        })}
+                        <br/>
+                    </>
+
+                ))
+            }
+        </div>
+    );
 }
 
 

src/components/ResultComponent.js

@@ -1,19 +1,12 @@
-import React, {Component} from 'react';
+import React from 'react';
 
-class ResultComponent extends Component {
-
-
-    render() {
-        let {result} = this.props;
-        return (
-            <div className="result">
-                <p>{result}</p>
-            </div>
+const ResultComponent = ({result}) => {
+    return (
+        <div className="result">
+            <p>{result}</p>
+        </div>
     )
-        ;
-    }
 }
 
-
 export default ResultComponent;
 

src/index.js

@@ -2,7 +2,5 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import registerServiceWorker from './registerServiceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+ReactDOM.render(<App/>, document.getElementById('root'));