JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>DOM</title>

    <!-- assets here -->
  </head>

  <body>
    <div class="container">
      <h3 id="title">Hello World!</h3>

      <ul id="list" class="list red" name="Programming Languages">
        <li class="item">HTML</li>
        <li class="item">CSS</li>
        <li class="item">JavaScript</li>
      </ul>
    </div>
  </body>

</html>

CSS

.red {
  color: red;
}

.blue {
  color: blue;
}

.item {
  font-weight: bold;
}

JavaScript

var ulElement = document.querySelector('#list');

var clickListener = function(event){
	console.log(event.currentTarget);
  console.log(event.target);
};

ulElement.addEventListener('click', clickListener);