Let's Code Together - Flopnames

Toggle Team Name Display


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.

  1. Implement changing the color of the current team display to reflect the current team.
  2. Make the text red when the current team is Red, and blue when the team is Blue.
  3. Don't change the color of the text "Current Team:".
  4. Create a new element that wraps the binding of the team name.
  5. Bind to the css class property of this new element, using a property of the app component.
  6. Set the class to either "redtext" or "bluetext" in the click event handlers.

I finished! On to the next chapter