☰
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

7. Add conditional logic that checks if the game is over

In this challenge, we're going to use an if-statement to pop up an alert that says "You lose!" if the number goes above 21.
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Add an alert to the "+3" click handler if the score goes above 21

You won't need to make an if-else statement, since there's only one branch to our logic. You can use the example from the first conditional logic challenge if you need help.

Hint: You'll need to use a ">" in your code to check if one side is greater than another
if (event.target.matches('.plus-three')){ counter = counter + 3; alert(counter); if (counter > 21) { alert("You lose!"); } }

2. Add the same logic to your "+1" and "+2" click handlers

var counter = 0; document.addEventListener('click', function(event){ if (event.target.matches('.plus-one')){ counter = counter + 1; alert(counter); if (counter > 21) { alert("You lose!"); } } if (event.target.matches('.plus-two')){ counter = counter + 2; alert(counter); if (counter > 21) { alert("You lose!"); } } if (event.target.matches('.plus-three')){ counter = counter + 3; alert(counter); if (counter > 21) { alert("You lose!"); } } });