-
Notifications
You must be signed in to change notification settings - Fork 37
Fire - Ayesha & Water - Sophia #25
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
React Tic Tac Toe
Major Learning Goals/Code Review
| Criteria | yes/no, and optionally any details/lines of code to reference |
|---|---|
| Demonstrates proper JavaScript coding style. | ✔️ |
| Correctly passes props to child components. | ✔️ |
| Correctly passes callback functions to child components and calls them to respond to user events.) | ✔️ |
| Maintains the status of the game in state. | ✔️ |
| Practices git with at least 6 small commits and meaningful commit messages | ✔️ |
| Uses existing stylesheets to render components | ✔️ |
Functional Requirements
| Functional Requirement | yes/no |
|---|---|
The Square component renders properly and executes the callback on a click event. |
✔️ |
| The Board component renders a collection of squares | ✔️ |
The App component renders a board and uses state to maintain the status of the game. |
✔️ |
| Utilizes callbacks to UI events to update state | ✔️ |
Overall Feedback
| Overall Feedback | Criteria | yes/no |
|---|---|---|
| Green (Meets/Exceeds Standards) | 5+ in Code Review && 3+ in Functional Requirements | ✔️ |
| Yellow (Approaches Standards) | 4+ in Code Review && 2+ in Functional Requirements, or the instructor judges that this project needs special attention | |
| Red (Not at Standard) | 0-3 in Code Review or 0,1 in Functional Reqs, or assignment is breaking/doesn’t run with less than 5 minutes of debugging, or the instructor judges that this project needs special attention |
Additional Feedback
You have one test that is erroring out; however, that test is optional. If you wish, you can put it back as a skip should you so choose! So, don't worry that one of these tests is erroring out on Learn. I won't hold that against this assignment 👍
Code Style Bonus Awards
Was the code particularly impressive in code style for any of these reasons (or more...?)
| Quality | Yes? |
|---|---|
| Perfect Indentation | ✅ |
| Elegant/Clever | ✅ |
| Descriptive/Readable | ✅ |
| Concise | ✅ |
| Logical/Organized | ✅ |
| const Board = ({ squares, onClickCallback }) => { | ||
| const squareList = generateSquareComponents(squares, onClickCallback); | ||
| console.log(squareList); | ||
| // console.log(squareList); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
make sure you get rid of any and all console.log statements before submitting, not just commenting them out
| const onClickCallback = () => { | ||
| const updatedSquare = { | ||
| value: props.value, | ||
| id: props.id, | ||
| onClickCallback: props.onClickCallback | ||
| } | ||
|
|
||
| props.onUpdateSquare(updatedSquare); | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks like this was a function that was never used. it can be deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Didn't notice Claire had already graded this. Good job!
| for (let i = 0; i < squares.length; i += 1) { | ||
| for (let j = 0; j < squares.length; j += 1) { | ||
| if(event === squares[i][j].id){ | ||
| // need conditional to stop user from playing square if it is not an empty stringq |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This missing conditional is why you have a failing test.
React Tic Tac Toe
Congratulations! You're submitting your assignment. Please reflect on the assignment with these questions.
Reflection
useStateconnected?CS Fundamentals Questions
setState-- it must re-render all of the components that now have different content because of that change.What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components?
Speculate wildly about what the Big-O time complexity of that code might be.