Click Counter Lab

by Ryan Morris

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".
//
// Inside the anonymous function below, write the necessary code so
// that clicking any "Click Me" element will increment its paired
// counter.
//
// 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
// make it turn red.
(function() {

  console.log("Welcome to the Exercise");
  
  var buttons = document.querySelectorAll('button, #click-me, a');
  
  for (var i=0; i<buttons.length; i++) {
    buttons[i].addEventListener('click', function(e) {
      this.nextElementSibling.innerHTML++;
      return false; // e.preventDefault();
    });
  }
  
  // bonus
  var container = document.getElementById('container');
  var counterEl = document.createNode('div')
  counterEl.id = 'counter';
  counterEl.innerHTML = 0;
  container.appendChild(counterEl);

})();