added a form, added a submit input, added completed state, and styled…

… our generate-button and button-wrapper
bottega-code-school · Mar 8, 2018 · 4eb508f · 4eb508f
1 parent c93382c
commit 4eb508f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 9 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/src/components/madlib_form.js b/src/components/madlib_form.js
@@ -33,6 +33,7 @@ class MadlibForm extends Component {
         super(props)
 
         this.state = {
+            completedForm: false,
             color: '',
             pluralNoun: '',
             adjectiveOne: '',
@@ -41,7 +42,6 @@ class MadlibForm extends Component {
             nounOne: '',
             numberOne: '',
             numberTwo: '',
-
         }
 
     }
@@ -54,6 +54,11 @@ class MadlibForm extends Component {
         }.bind(this);
     }
 
+    handleSubmit = function(event) {
+        this.setState({completedForm: true});
+        event.preventDefault();
+    }.bind(this);
+
     render() {
 
         this.inputData = [
@@ -72,13 +77,20 @@ class MadlibForm extends Component {
       return (
           <div className="card-wrapper">
             <Card>
-                <Row style={{textAlign: 'center', color: 'white'}}>
-                    {
-                        _.map(this.inputData, (data, indexKey) => {
-                            return <MadlibInput key={indexKey} index={indexKey + 1} state={data.state} placeholder={data.placeholder} onChange={this.handleChange({inputTitle: data.prop})} />
-                        })
-                    }
-                </Row>
+                <form onSubmit={this.handleSubmit} id="madlib-form">
+                    <Row style={{textAlign: 'center', color: 'white'}}>
+                        {
+                            _.map(this.inputData, (data, indexKey) => {
+                                return <MadlibInput key={indexKey} index={indexKey + 1} state={data.state} placeholder={data.placeholder} onChange={this.handleChange({inputTitle: data.prop})} />
+                            })
+                        }
+                    </Row>
+                    <Row>
+                        <Col md="12" className="button-wrapper">
+                            <input type="submit" className="generate-button" value="Generate Mad Lib" />
+                        </Col>
+                    </Row>
+                </form>
             </Card>
           </div>
 

diff --git a/src/style/components/madlib_form.scss b/src/style/components/madlib_form.scss
@@ -41,4 +41,21 @@ input {
     font-size: 18px;
     text-align: center;
     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;
+
+}
+
diff --git a/src/style/main.scss b/src/style/main.scss
@@ -3,4 +3,8 @@
 @import 'components/madlib_form';
 @import 'header';
 
+body {
+    font-family: $font-primary;    
+}
+