Charles Lee Zhao Yi - Guess The Word #56
Conversation
…ith alerts and appropriate resets
…ensure uppercase letters are checked properly
| this.state.guessedLetters.pop | ||
| ), | ||
| }); | ||
| alert("Please enter only one letter at a time."); |
There was a problem hiding this comment.
Try to avoid alerts. Alerts block the user from interacting from your website, thus it is an anti-pattern to what React is trying to achieve. I suggest rather some red text that shows this validation warning or something along these lines.
There was a problem hiding this comment.
That's a great point. I'll look into inline error messaging in future implementations. Thanks Rob!
| type="text" | ||
| value={this.state.formInput} | ||
| onChange={this.handleChange} | ||
| ></input> |
| @@ -43,8 +91,21 @@ class App extends React.Component { | |||
| ? this.state.guessedLetters.toString() | |||
| : "-"} | |||
| <h3>Input</h3> | |||
| {/* Insert form element here */} | |||
| Todo: Insert form element here | |||
| <form onSubmit={this.handleSubmit}> | |||
There was a problem hiding this comment.
If you are using buttons below for submission, the <form> tag is redundant
There was a problem hiding this comment.
Thanks for the feedback Rob - will keep in mind for future implementations!
| {this.state.numGuessesLeft > 1 ? ( | ||
| <button onClick={this.handleSubmit}>Submit</button> | ||
| ) : ( | ||
| <button onClick={this.handleSubmit} disabled> | ||
| Submit | ||
| </button> |
There was a problem hiding this comment.
| {this.state.numGuessesLeft > 1 ? ( | |
| <button onClick={this.handleSubmit}>Submit</button> | |
| ) : ( | |
| <button onClick={this.handleSubmit} disabled> | |
| Submit | |
| </button> | |
| <button onClick={this.handleSubmit} disabled={!this.state.numGuessesLeft}>Submit</button> |
There was a problem hiding this comment.
Great catch - I should have caught this in my implementation. Will improve in logic in future. Thanks Rob!
PR for Guess The Word Assignment. Added exception handling and alerts.