JSFiddle - React, Tailwind, and code Playground

by oleg_hansen

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 counter=0;

//
// 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
// to it.  Doing so should make it turn red.
(function() {

  console.log("Welcome to the Exercise");
  var el = document.querySelector(" p button");
  
  // Your code here.
 
   el.addEventListener("click", function(event) 
    { 
      console.log( "event triggered on:", event.target ); 
      
      }, false); 

})();