added reactstrap, and inputs

bottega-code-school · Mar 7, 2018 · faa2c49 · faa2c49
1 parent 243eaa6
commit faa2c49
Showing 1 changed file with 54 additions and 1 deletion.
diff --git a/src/components/madlib_form.js b/src/components/madlib_form.js
@@ -1,8 +1,61 @@
 import React, { Component } from 'react';
+import {
+    Col,
+    Row
+} from 'reactstrap';
 
 class MadlibForm extends Component {
+
+    handleChange = function() {
+        console.log('trying to handle change');
+    }
+
+
     render() {
-      return <h1>Bottega Mad Libs Form Component</h1>;
+      return (
+        <Row style={{textAlign: 'center', color: 'white'}}>
+            <Col md="3" className="inputWrapper">
+                <Row>
+                    <Col md="2">
+                        <label className="greenLabel">1</label>
+                    </Col>
+                    <Col md="10">
+                        <input placeholder='Color' type='text' onChange={this.handleChange} />
+                    </Col>
+                </Row>
+            </Col>
+            <Col md="3" className="inputWrapper">
+                <Row>
+                    <Col md="2">
+                        <label className="greenLabel">1</label>
+                    </Col>
+                    <Col md="10">
+                        <input placeholder='Color' type='text' onChange={this.handleChange}  />
+                    </Col>
+                </Row>
+            </Col>
+            <Col md="3" className="inputWrapper">
+                <Row>
+                    <Col md="2">
+                        <label className="greenLabel">1</label>
+                    </Col>
+                    <Col md="10">
+                        <input placeholder='Color' type='text' onChange={this.handleChange}  />
+                    </Col>
+                </Row>
+            </Col>
+            <Col md="3" className="inputWrapper">
+                <Row>
+                    <Col md="2">
+                        <label className="greenLabel">1</label>
+                    </Col>
+                    <Col md="10">
+                        <input placeholder='Color' type='text' onChange={this.handleChange} />
+                    </Col>
+                </Row>
+            </Col>
+        </Row>
+      );
     }
 }