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 set the css class of a tile to "red" whenever the tile is clicked.
Code Checkpoint:
If you want to use the same code as in the video, you Can use this code checkpoint: https://stackblitz.com/fork/angular-ivy-gv8ju7
Assignment:
- Create a model to contain the correct class for each tile based on position.
- Make the model an array of arrays.
- Make the arrays contain just string elements that are the correct tile type/css class, i.e. "red", "blue", "neutral", or "assassin".
- We will use this model in the next part to correctly set the class on a tile when clicked.