☰
1. (Demo) Add click-handlers 2. (Demo) Use conditional logic to toggle between green and gray 3. (Group Activity) Play a game of "Count to 21" 4. (Demo) Use variables to keep track of data 5. Connect a counter to your button 6. Add buttons for "+2" and "+3" 7. Add conditional logic that checks if the game is over 8. (Optional) Display the game in HTML instead of alerts 9. (Optional) Add your own rules!

Project 371: Count to 21

6. Add buttons for "+2" and "+3"

In this challenge, we're going to add two more buttons with click handler code so we can completely simulate the actions in "Count to 21".
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Add "+1" and "+2" buttons with distinguishing classes

You'll need to add two more buttons to get the game working, but you'll also need to add classes to the buttons so your JavaScript code can tell them apart.

Don't forget to update the click handler for "+1" with the new class name as well.

2. Add a click handler for the "+2" button that increases the counter by 2

Use the existing "+1" click handler as an example.
var counter = 0; document.addEventListener('click', function(event){ if (event.target.matches('.plus-one')){ counter = counter + 1; alert(counter); } if (event.target.matches('.plus-two')){ counter = counter + 2; alert(counter); } });

3. Add a click handler for the "+3" button that increases the counter by 3

Use the existing "+1" click handler as an example.
var counter = 0; document.addEventListener('click', function(event){ if (event.target.matches('.plus-one')){ counter = counter + 1; alert(counter); } if (event.target.matches('.plus-two')){ counter = counter + 2; alert(counter); } if (event.target.matches('.plus-three')){ counter = counter + 3; alert(counter); } });