☰
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

1. (Demo) Add click-handlers

In this challenge, were going to add a basic click-hander to each circle so they turn green when clicked. 
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Add a click handler

Add a basic JavaScript event handler to the document that triggers when clicked. Use the "addEventListener( )" function. 
document.addEventListener('click', function(event){ alert('clicked'); });

2. Only pop up an alert if a circle is clicked

Use the "matches( )" method on the event's target to check if the target has a class of "circle". 
document.addEventListener('click', function(event){ if (event.target.matches(".circle")){ alert('clicked circle'); } });

3. Create a class to turn the circle green

Anything related to visual styling should be done in CSS. If we want to turn the circles green when they're clicked, the easiest way would be to add a CSS class to the circle that adds a green background color. 
.on { background-color: green; }

4. Apply the class when the circle is clicked

Use the "classList" property and the "add( )" method to add the class you just created to a clicked circle. When you get things working, delete the "alert( )" line since we don't need it for feedback anymore. 
document.addEventListener('click', function(event){ if (event.target.matches(".circle")){ event.target.classList.add("on"); } });