☰
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

8. (Optional) Display the game in HTML instead of alerts

In this challenge, you'll need to update the game so the actual HTML on the page changes to give users feedback.
Starting point link for this challenge

Your goal

Hint: show steps

Steps

1. Add HTML elements to hold the current number and end-game message

Add two div elements with unique classes. The counter should have a value of 0 and the end-game div should be empty.

2. Style both divs with CSS

The counter should have a large, readable font size while the end-game text should be big and red.
.counter { width: 100px; text-align: center; font-size: 48px; } .end-game { width: 100px; font-size: 24px; color: red; }

3. Abstract out repeated code

There is some code that's repeated over and over again in your if-statements. Cut the code out and put it at the bottom of the event handler function. Anytime you see code that's repeated exactly, it's a sign that your code could be more efficient. Now that the repeated code is moved down, you're script is much shorter. And as a benefit, if you need to make any edits to the formerly repeated code, you can just make it once instead of three times.  
var counter = 0; document.addEventListener('click', function(event){ if (event.target.matches('.plus-one')){ counter = counter + 1; } if (event.target.matches('.plus-two')){ counter = counter + 2; } if (event.target.matches('.plus-three')){ counter = counter + 3; } alert(counter); if (counter > 21) { alert("You lose!"); } });

4. Update the "current-num" div every time you click a button

The "querySelector( )" method and the "textContent" property will come in handy here.

"querySelector( )" is a method that's run on the "document" object. It takes a single string argument that represents a CSS selector and finds the first element on the page that matches the selector. If multiple elements match, only the first element is actually selected.

"textContent" is an element property that literally refers to the text inside an element. You can use an "=" to update this property just like you'd update a variable.

Use "querySelector( )" and "textContent" to update the "current-num" div with the counter value. Replace the "alert( )" that's currently being used with your new code. 

You should see the HTML number move up by 1 every time you click the "+1" button.
var currentNum = document.querySelector(".current-num"); currentNum.textContent = counter; if (counter > 21) { alert("You lose!"); }

5. Replace the endgame alert with code that updates the end-game div

You'll need to use the "querySelector( )" method and "textContent" property here as well. 
if (counter > 21) { var endGame = document.querySelector(".end-game"); endGame.textContent = "You lose!"; }