implemented clear madlib button and gave it functionality

src/components/app.js

@@ -14,8 +14,6 @@ export default class App extends Component {
             </div>
           </div>
           <MadlibForm />
-
-
         </div>
       </div>
     );

src/components/madlib_form.js

@@ -59,6 +59,27 @@ class MadlibForm extends Component {
         event.preventDefault();
     }.bind(this);
 
+    handleClick = function() {
+        this.setState({
+            completedForm: false,
+            color: '',
+            pluralNoun: '',
+            adjectiveOne: '',
+            celebrityOne: '',
+            adjectiveTwo: '',
+            nounOne: '',
+            numberOne: '',
+            numberTwo: '',
+        });
+    }.bind(this)
+
+    renderButton = function() {
+        if(this.state.completedForm) {
+            return <a className="clear-button" onClick={this.handleClick}>Clear Mad Lib</a>
+        }
+        return <input type="submit" className="generate-button" value="Generate Mad Lib" /> 
+    }
+
     render() {
 
         this.inputData = [
@@ -71,7 +92,6 @@ class MadlibForm extends Component {
             {placeholder: 'Noun', prop: 'nounOne', state: this.state.nounOne},
             {placeholder: 'Number', prop: 'numberOne', state: this.state.numberOne},
             {placeholder: 'Number', prop: 'numberTwo', state: this.state.numberTwo},
-
         ]
 
       return (
@@ -87,7 +107,7 @@ class MadlibForm extends Component {
                     </Row>
                     <Row>
                         <Col md="12" className="button-wrapper">
-                            <input type="submit" className="generate-button" value="Generate Mad Lib" />
+                            {this.renderButton()}
                         </Col>
                     </Row>
                 </form>

src/style/components/madlib_form.scss

@@ -43,19 +43,26 @@ input {
     color: white;
 }
 
-.generate-button {
-    height: 50px;
-    width: 300px;
-    border-radius: 4px;
-    background-color: $bottegaGreen;
-    color: white;
-    font-size: 1.25em;
-}
-
 .button-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
+}
+
 
+.generate-button {
+    @include buttonStyles;
+    background-color: $bottegaGreen;
+}
+
+.clear-button, a {
+    @include buttonStyles;
+    background-color: $clearBlue;
+    padding-top: 9px;
+    text-align: center;
 }
 
+input:focus,
+button:focus {
+    outline: none;
+}

src/style/main.scss

@@ -1,5 +1,6 @@
 
 @import 'variables';
+@import 'mixins';
 @import 'components/madlib_form';
 @import 'header';
 

src/style/mixins.scss

@@ -0,0 +1,9 @@
+@mixin buttonStyles {
+    height: 50px;
+    width: 300px;
+    border-radius: 4px;
+    color: white !important;
+    font-size: 1.25em;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+    margin-top: 42px;
+}