diff --git a/src/components/PlayerSubmissionForm.css b/src/components/PlayerSubmissionForm.css index 7cded5d9..6d6f98eb 100644 --- a/src/components/PlayerSubmissionForm.css +++ b/src/components/PlayerSubmissionForm.css @@ -31,7 +31,7 @@ background-color: tomato; } -.PlayerSubmissionFormt__input--invalid { +.PlayerSubmissionForm__input--invalid { background-color: #FFE9E9; } diff --git a/src/components/PlayerSubmissionForm.js b/src/components/PlayerSubmissionForm.js index 1de05095..a85c2fbf 100644 --- a/src/components/PlayerSubmissionForm.js +++ b/src/components/PlayerSubmissionForm.js @@ -5,29 +5,109 @@ class PlayerSubmissionForm extends Component { constructor(props) { super(props); + + this.state = { + adj: '', + noun: '', + adv: '', + verb: '', + adj2: '', + noun2: '', + } + } + + onInputChange = (event) => { + const updatedState = {}; + + const field = event.target.name; + const value = event.target.value; + + updatedState[field] = value; + this.setState(updatedState); + } + + sendSubmission = (event) => { + event.preventDefault(); + + const submission = { + adj: this.state.adj, + noun: this.state.noun, + adv: this.state.adv, + verb: this.state.verb, + adj2: this.state.adj, + noun2: this.state.noun2, + } + + this.props.sendSubmission(submission); + this.resetForm(); } render() { return ( -
+

Player Submission Form for Player #{ }

-
+ -
+
- { - // Put your form inputs here... We've put in one below as an example - } + type="text" + htmlFor='adj' + placeholder='adjective' + onChange={this.onInputChange} + value={this.state.adj} + className="PlayerSubmissionForm__input"/> + + + + + + + + the + + + + +
-
- +
+
diff --git a/src/components/RecentSubmission.js b/src/components/RecentSubmission.js index 663da34b..bd9d70ff 100644 --- a/src/components/RecentSubmission.js +++ b/src/components/RecentSubmission.js @@ -5,7 +5,7 @@ const RecentSubmission = (props) => { return (

The Most Recent Submission

-

{ }

+

{ props.submission }

); }