Add basis for controlled form

index.js

@@ -1 +1 @@
-import "./week17/uncontrolledForm/index";
+import "./week17/controlledForm/index";

package.json

@@ -57,6 +57,7 @@
     },
     "dependencies": {
         "isomorphic-unfetch": "^2.0.0",
+        "lodash": "^4.17.11",
         "react": "^16.3.1",
         "react-dom": "^16.3.1",
         "webpack-serve": "^0.3.1"

week17/controlledForm/App.js

@@ -1,11 +1,15 @@
 import React, { Component } from "react";
+import Form from './components/form';
+import "./styles.css";
 
-export class App extends Component {
+class App extends Component {
     render() {
         return (
-            <div className="typewriter">
-                This
-            </div>
-        );
+        <div className="App">
+            <Form />
+        </div>
+        )
     }
 }
+
+export default App;

week17/controlledForm/components/footer.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+
+class Footer extends Component {
+    render() {
+        return (
+            <footer className="footer">
+                <span className="footer__error">Passwords do not match</span>
+                <button className="footer__button" type="submit">Submit</button>
+            </footer>
+        )
+    }
+}
+
+export default Footer;

week17/controlledForm/components/form.js

@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+import FormFieldSet from "./formFieldSet";
+import Footer from "./footer";
+import _ from "lodash";
+
+class Form extends Component {
+
+    constructor(props) {
+        super(props);
+        this.fields = {};
+    }
+
+    gatherData() {
+        return _.mapValues(this.fields, 'value');
+    }
+
+    handleSubmit(e) {
+        e.preventDefault();
+        console.table(this.gatherData());
+    }
+
+    returnFieldData () {
+
+    }
+
+    render() {
+        return (
+            <div className="conatiner">
+                <form className="form" onSubmit={(e) => {
+                    this.handleSubmit(e)
+                }}>
+                    <h1 className="form__header">Would you like to know more?</h1>
+                    <fieldset className="form_fieldset">
+                        <FormFieldSet filedText="Username" filedId="username" type="text" callBack={ this.returnFieldData } />
+                        <FormFieldSet filedText="Email" filedId="email" type="text" callBack={ this.returnFieldData } />
+                        <FormFieldSet filedText="Password" filedId="password1" type="text" callBack={ this.returnFieldData } />
+                        <FormFieldSet filedText="Please confirm password" filedId="password2" type="text" callBack={ this.returnFieldData } />
+                    </fieldset>
+                    <Footer />
+                </form>
+            </div>
+        );
+    }
+}
+
+export default Form;

week17/controlledForm/components/formFieldSet.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const FormFieldSet = ({ filedText, filedId, type }) =>
+    <div className="field">
+        <label className="field__label" htmlFor={filedId}>{filedText}</label>
+        <input
+            id={filedId}
+            type={ type }
+            required
+            maxLength="50"
+            className="field__input field__input--text" />
+    </div>
+
+
+export default FormFieldSet;

week17/controlledForm/index.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { App } from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
 ReactDOM.render(<App />, document.getElementById("app"));

week17/controlledForm/styles.css

@@ -0,0 +1,86 @@
+
+.form {
+    background-color: #f7f7f7;
+    padding: 32px;
+    max-width: 600px;
+    min-width: 320px;
+    box-sizing: border-box;
+    margin: 32px;
+    font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
+    text-align: left;
+}
+
+.form__header {
+    display: block;
+    color: #333;
+    font-weight: 300;
+    padding-bottom: 16px;
+    margin: 0 0 16px 0;
+    border-bottom: 3px white solid;
+    font-size: 1.8em;
+}
+
+.form_fieldset {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: none;
+    display: flex;
+    flex-direction: column;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 16px;
+}
+
+.field__input {
+    padding: 4px;
+    margin: 8px 8px 8px 0;
+    border-radius: 2px;
+    font-size: 0.8em;
+    line-height: 20px;
+    box-sizing: border-box;
+    border: 1px solid #d9d9d9;
+    font-weight: 300;
+}
+
+.field__label {
+    font-weight: 300;
+}
+
+.footer__button {
+    display: block;
+    padding: 8px 16px;
+    margin-top: 16px;
+    border: none;
+    border-radius: 3px;
+    background-color: #61b2a7;
+    font-weight: 400;
+    font-size: 0.8em;
+    cursor: pointer;
+    color: white;
+}
+
+.footer__button:hover {
+    opacity: 0.7;
+}
+
+.footer__button:disabled {
+    opacity: 0.7;
+    background-color: grey;
+}
+
+.footer__error {
+    font-size: 0.9em;
+    font-style: italic;
+    color: salmon;
+    display: none;  
+}
+
+.footer__error--display {
+    display: block;
+}
+
+