JSFiddle - React, Tailwind, and code Playground

by Shang WenLong

HTML

<section>
  <ul id="list">
    <li><a href="/">home</a></li>
    <li><a href="">self</a></li>
    <li><a href="https://www.google.com/">google</a></li>
    <li><a href="https://www.baidu.com/">baidu</a></li>
  </ul>
</section>
<section>
  <input id="toggle" type=checkbox>
  <label for="toggle">show visited</label>
</section>

CSS

ul#list a {
  color: black;
  text-decoration: none;
}

ul#list.show-visited a:visited {
  color: red;
  text-decoration: underline;
}

JavaScript

const t = document.getElementById('toggle')
t.addEventListener('click', () => {
	document.getElementById('list').classList.toggle('show-visited')
})