JSFiddle - React, Tailwind, and code Playground

by Kavitha Venkataswamy

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

  console.log("Welcome to the Exercise");
  
  // Your code here.
  
var buttons = document.querySelectorAll("button");
 for(var i= 0; i < buttons.length ; i++){
    buttons[i].addEventListener('click',function(e){
          //console.log("hiiii");
          this.nextElementSibling.innerHTML++;
          console.log(e.target);
     
    });
  }

 
 
  
  
  
  

})();