Click Counter Lab

HTML

<div id="container">
  <h1>Events Exercise</h1>

  <h2>Inside a List</h2>
  <ul>
    <li>
      <button>Click Me</button>
      <span>0</span>
    </li>
    <li>
      <button>Click Me</button>
      <span>0</span>
    </li>
  </ul>
</div>

<h2>Inside Paragraphs</h2>
<p>
  <button>Click Me</button>
  <span>0</span>
</p>

<p>
  <span id="click-me">Click Me</span>
  <span>0</span>
</p>

<p>
  <a href="http://www.google.com">Click Me</a>
  <span>0</span>
</p>

CSS

.pass  {color: green;}
.fail  {color: red;}
.goal  {color: red;}
.clear {clear: both;}

JavaScript

// In the HTML there are several elements containing the
// text "Click Me".  Those elements are followed by another element
// containing the number zero, which we'll call the "counter".
//


 var allclickelmts = document.querySelectorAll('button, #click-me, a');
 console.log(allclickelmts);
 
// Inside the anonymous function below, write the necessary code so
// that clicking any "Click Me" element will increment its paired
// counter.
//




 allclickelmts[1].addEventListener('click', function(evnt) {
     // this.nextElementSibling.innerHTML++;
      
        var ct = document.createElement('div')
  ct.id = 'counter';
  ct.innerHTML = 0;
 
  
      // bonus
      ct.innerHTML++;
      if (ct.innerHTML > 10) {
        ct.classList.add('hhhhh');
        ct.classList.remove('gggggg');
      } else if (ct.innerHTML > 5) {
         ct.classList.add('hhhhhhhhh');
      } else {
        ct.classList.remove('hhhhhhhhhh');
      }
      
      console.log("CLICKED"); 
      console.log(ct);
      document.getElementById("container").appendChild(ct);
      }
);
      // end bonus

// BONUS 1: Create a new element on the page that displays the sum of
// all other counters.
//
// BONUS 2: When the global counter goes above 10 add the "goal" class
// to it.  Doing so should make it turn red.
(function() {

  console.log("Welcome to the Exercise");
  
  // Your code here.

})();