Outline
-
Let's Code Together - Flopnames
- Introduction
- Demo Code Introduction
- First Assignment
- Create Toggle Button Event Handler
- Show & Hide the Key
- Toggle Team Name Display
- Toggle Team Name Color
- Handle Grid Cell Click
- Create Background Color Binding
- Set Background to Red on Click
- Create a Model for the Tiles
- Set Background Correctly
- Create new Child Component Files
- Move Game Grid Display to new Child Component
- Write the Initial checkForWinner Method
- Refactor Into a countTile Method
- Log Out the Correct Winner
- Report the Winner to the Parent Component
- Show the User the Winner
- Create the Game Service
- Extract Game Logic to Service & Summary
Outline
-
Let's Code Together - Flopnames
- Introduction
- Demo Code Introduction
- First Assignment
- Create Toggle Button Event Handler
- Show & Hide the Key
- Toggle Team Name Display
- Toggle Team Name Color
- Handle Grid Cell Click
- Create Background Color Binding
- Set Background to Red on Click
- Create a Model for the Tiles
- Set Background Correctly
- Create new Child Component Files
- Move Game Grid Display to new Child Component
- Write the Initial checkForWinner Method
- Refactor Into a countTile Method
- Log Out the Correct Winner
- Report the Winner to the Parent Component
- Show the User the Winner
- Create the Game Service
- Extract Game Logic to Service & Summary
In this video
We create click event handlers for the team selection buttons, and set the text of the current team to display the correct value based on what button was clicked.
Assignment:
- Implement changing the color of the current team display to reflect the current team.
- Make the text red when the current team is Red, and blue when the team is Blue.
- Don't change the color of the text "Current Team:".
- Create a new element that wraps the binding of the team name.
- Bind to the css class property of this new element, using a property of the app component.
- Set the class to either "redtext" or "bluetext" in the click event handlers.