From 5a0ca57756dbb034258a3d0695568053c5097de9 Mon Sep 17 00:00:00 2001
From: mksahota10 <mksahota10@gmail.com>
Date: Thu, 26 Nov 2020 17:51:22 -0800
Subject: [PATCH 1/2] final

---
 src/App.js                       | 15 ++++++-
 src/components/Calculator.js     | 67 ++++++++++++++++++++++++++++++++
 src/components/ClassComponent.js | 13 -------
 src/components/Divide.js         | 62 +++++++++++++++++++++++++++++
 src/components/Multiply.js       | 62 +++++++++++++++++++++++++++++
 src/components/Subtraction.js    | 59 ++++++++++++++++++++++++++++
 6 files changed, 263 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Calculator.js
 delete mode 100644 src/components/ClassComponent.js
 create mode 100644 src/components/Divide.js
 create mode 100644 src/components/Multiply.js
 create mode 100644 src/components/Subtraction.js

diff --git a/src/App.js b/src/App.js
index 993d922..0bdae95 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,28 @@
 import React, { Component } from "react";
 
 import FunctionalComponent from "./components/FunctionalComponent";
-import ClassComponent from "./components/ClassComponent";
+import Calculator from "./components/Calculator";
+import Subtraction from "./components/Subtraction";
+import Multiply from "./components/Multiply";
+import Divide from "./components/Divide";
 
 import "./css/App.css";
 
 class App extends Component {
   render() {
+
+  
+
+
     return (
       <div className="App">
         <FunctionalComponent />
-        <ClassComponent />
+        <Calculator />
+        <Subtraction />
+        <Multiply />
+        <Divide />
       </div>
+      
     );
   }
 }
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
new file mode 100644
index 0000000..9ad1b5c
--- /dev/null
+++ b/src/components/Calculator.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react'
+
+class Calculator extends Component {
+
+    state={
+        total:0,
+        num1:0, 
+        num2:0
+    }
+    setNum=(e, num)=>{
+        console.log(e.target.value)
+        this.setState({
+            [num]: e.target.value
+        })
+    }
+    getTotal=()=>{
+        const grandTotal = parseInt(this.state.num1)+parseInt(this.state.num2)
+       
+    
+    this.setState({
+        // sets numbers in textbox back to zero
+        total: grandTotal,
+        num1:0, 
+        num2:0,
+        })
+    }
+
+
+
+    render() {
+        return (
+<div className="container">
+    <h1>Add with React!</h1>
+
+  <div className="add">
+  <input type="number"
+  name="num1"
+  placeholder="Enter your first number"
+  value={this.state.num1}
+  onChange={ (e) => this.setNum(e, 'num1') }
+/>
+
+    <span>+</span>
+    <input type="number"
+  name="num2"
+  placeholder="Enter your first number"
+  value={this.state.num2}
+  onChange={ (e) => this.setNum(e, 'num2') }
+/>
+    
+    <button onClick={this.getTotal}>=</button>
+    <h3>Addition results go here!</h3>
+    <p>{this.state.total}</p>
+  </div>
+</div>
+
+
+       )
+    }
+}
+
+
+
+
+
+
+export default Calculator
diff --git a/src/components/ClassComponent.js b/src/components/ClassComponent.js
deleted file mode 100644
index fdf0e4f..0000000
--- a/src/components/ClassComponent.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Component } from 'react'
-
-class ClassComponent extends Component {
-    render() {
-        return (
-            <div>
-                Class Component
-            </div>
-        )
-    }
-}
-
-export default ClassComponent
diff --git a/src/components/Divide.js b/src/components/Divide.js
new file mode 100644
index 0000000..1256650
--- /dev/null
+++ b/src/components/Divide.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+
+class Divide extends Component {
+
+    state={
+        total:0,
+        num1:0, 
+        num2:0
+    }
+    setNum=(e, num)=>{
+        console.log(e.target.value)
+        this.setState({
+            [num]: e.target.value
+        })
+    }
+    getTotal=()=>{
+        const grandTotal = parseInt(this.state.num1)/parseInt(this.state.num2)
+       
+    
+    this.setState({
+        // sets numbers in textbox back to zero
+        total: grandTotal,
+        num1:0, 
+        num2:0,
+        })
+    }
+
+
+
+    render() {
+        return (
+<div className="container">
+    <h1>Divide with React!</h1>
+
+  <div className="subtract">
+  <input type="number"
+  name="num1"
+  placeholder="Enter your first number"
+  value={this.state.num1}
+  onChange={ (e) => this.setNum(e, 'num1') }
+/>
+
+    <span>/</span>
+    <input type="number"
+  name="num2"
+  placeholder="Enter your first number"
+  value={this.state.num2}
+  onChange={ (e) => this.setNum(e, 'num2') }
+/>
+    
+    <button onClick={this.getTotal}>=</button>
+    <h3>Divide results go here!</h3>
+    <p>{this.state.total}</p>
+  </div>
+</div>
+
+
+       )
+    }
+}
+
+export default Divide
\ No newline at end of file
diff --git a/src/components/Multiply.js b/src/components/Multiply.js
new file mode 100644
index 0000000..fbd7c94
--- /dev/null
+++ b/src/components/Multiply.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react'
+
+class Multiply extends Component {
+
+    state={
+        total:0,
+        num1:0, 
+        num2:0
+    }
+    setNum=(e, num)=>{
+        console.log(e.target.value)
+        this.setState({
+            [num]: e.target.value
+        })
+    }
+    getTotal=()=>{
+        const grandTotal = parseInt(this.state.num1)*parseInt(this.state.num2)
+       
+    
+    this.setState({
+        // sets numbers in textbox back to zero
+        total: grandTotal,
+        num1:0, 
+        num2:0,
+        })
+    }
+
+
+
+    render() {
+        return (
+<div className="container">
+    <h1>Multiply with React!</h1>
+
+  <div className="subtract">
+  <input type="number"
+  name="num1"
+  placeholder="Enter your first number"
+  value={this.state.num1}
+  onChange={ (e) => this.setNum(e, 'num1') }
+/>
+
+    <span>*</span>
+    <input type="number"
+  name="num2"
+  placeholder="Enter your first number"
+  value={this.state.num2}
+  onChange={ (e) => this.setNum(e, 'num2') }
+/>
+    
+    <button onClick={this.getTotal}>=</button>
+    <h3>Multiply results go here!</h3>
+    <p>{this.state.total}</p>
+  </div>
+</div>
+
+
+       )
+    }
+}
+
+export default Multiply
\ No newline at end of file
diff --git a/src/components/Subtraction.js b/src/components/Subtraction.js
new file mode 100644
index 0000000..ad14e6c
--- /dev/null
+++ b/src/components/Subtraction.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+
+class Subtraction extends Component {
+
+    state={
+        total:0,
+        num1:0, 
+        num2:0
+    }
+    setNum=(e, num)=>{
+        console.log(e.target.value)
+        this.setState({
+            [num]: e.target.value
+        })
+    }
+    getTotal=()=>{
+        const grandTotal = parseInt(this.state.num1)-parseInt(this.state.num2)
+       
+    
+    this.setState({
+        // sets numbers in textbox back to zero
+        total: grandTotal,
+        num1:0, 
+        num2:0,
+        })
+    }
+    render() {
+        return (
+<div className="container">
+    <h1>Subtract with React!</h1>
+
+  <div className="subtract">
+  <input type="number"
+  name="num1"
+  placeholder="Enter your first number"
+  value={this.state.num1}
+  onChange={ (e) => this.setNum(e, 'num1') }
+/>
+
+    <span>-</span>
+    <input type="number"
+  name="num2"
+  placeholder="Enter your first number"
+  value={this.state.num2}
+  onChange={ (e) => this.setNum(e, 'num2') }
+/>
+    
+    <button onClick={this.getTotal}>=</button>
+    <h3>Subtraction results go here!</h3>
+    <p>{this.state.total}</p>
+  </div>
+</div>
+
+
+       )
+    }
+}
+
+export default Subtraction
\ No newline at end of file

From db111da707666480e80cb9113117cd0c8378fc21 Mon Sep 17 00:00:00 2001
From: mksahota10 <mksahota10@gmail.com>
Date: Thu, 26 Nov 2020 17:54:02 -0800
Subject: [PATCH 2/2] updated

---
 src/App.js                                    | 4 ++--
 src/components/{Calculator.js => Addition.js} | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/{Calculator.js => Addition.js} (94%)

diff --git a/src/App.js b/src/App.js
index 0bdae95..3f8312a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
 import FunctionalComponent from "./components/FunctionalComponent";
-import Calculator from "./components/Calculator";
+import Addition from "./components/Addition";
 import Subtraction from "./components/Subtraction";
 import Multiply from "./components/Multiply";
 import Divide from "./components/Divide";
@@ -17,7 +17,7 @@ class App extends Component {
     return (
       <div className="App">
         <FunctionalComponent />
-        <Calculator />
+        <Addition />
         <Subtraction />
         <Multiply />
         <Divide />
diff --git a/src/components/Calculator.js b/src/components/Addition.js
similarity index 94%
rename from src/components/Calculator.js
rename to src/components/Addition.js
index 9ad1b5c..7ee5ebe 100644
--- a/src/components/Calculator.js
+++ b/src/components/Addition.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 
-class Calculator extends Component {
+class Addition extends Component {
 
     state={
         total:0,
@@ -64,4 +64,4 @@ class Calculator extends Component {
 
 
 
-export default Calculator
+export default Addition