Calc- Homework- Preet

src/App.js

@@ -1,17 +1,28 @@
 import React, { Component } from "react";
 
 import FunctionalComponent from "./components/FunctionalComponent";
-import ClassComponent from "./components/ClassComponent";
+import Addition from "./components/Addition";
+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 />
+        <Addition />
+        <Subtraction />
+        <Multiply />
+        <Divide />
       </div>
+
     );
   }
 }

src/components/Addition.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react'
+
+class Addition 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 Addition

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

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

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