☰
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

5. Connect a counter to your button

Now, we're going to actually start building the game. Make sure to use the starting point below. In this challenge, we're going to build on what we know about variables to to store and update a number based on how many times the "+1" button gets clicked.
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Add a basic counter to your JavaScript

Just like in the last step, add a counter variable with a starting value of 0.
var counter = 0;

2. Display the value of the counter in an alert

Write some JavaScript code that runs when you click on the button. You should see the value of the counter variable in the alert. 

Hint: You'll need to use an event listener to get this step working.
var counter = 0; document.addEventListener('click', function(event){ if (event.target.matches('button')){ alert(counter); } });

3. Add 1 to the counter every time you click the button

Just like in the last challenge, you'll need to update the variable with itself to get this step working. 
var counter = 0; document.addEventListener('click', function(event){ if (event.target.matches('button')){ counter = counter + 1; alert(counter); } });