diff --git a/src/App.js b/src/App.js
index 993d922..10c41b0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 
 import FunctionalComponent from "./components/FunctionalComponent";
-import ClassComponent from "./components/ClassComponent";
+import Calculator from "./components/Calculator";
 
 import "./css/App.css";
 
@@ -10,7 +10,7 @@ class App extends Component {
     return (
       <div className="App">
         <FunctionalComponent />
-        <ClassComponent />
+        <Calculator />
       </div>
     );
   }
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
new file mode 100644
index 0000000..a3da561
--- /dev/null
+++ b/src/components/Calculator.js
@@ -0,0 +1,58 @@
+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({ 
+    total:grandTotal,
+    //sets numbers in textbox back to zero
+    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 second 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