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');


console.log(ulElement.classList.value);
console.log('red', ulElement.classList.contains('red'));

ulElement.classList.toggle('red');
console.log('red', ulElement.classList.contains('red'));

ulElement.classList.toggle('red');
console.log('red after toggle', ulElement.classList.contains('red'));

ulElement.classList.add('my-class');
console.log('my-class', ulElement.classList.contains('my-class'));

ulElement.classList.remove('my-class');
console.log('my-class after remove', ulElement.classList.contains('my-class'));

ulElement.classList.replace('red', 'blue');