JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="container" id="something">
    
<h1>To do list</h1>

    <ul class="centered" id="todo-list">
        <li class="done">List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li class="done">List item 5</li>
        <li>List item 6</li>
        <li>List item 7</li>
        <li>List item 8</li>
        <li>List item 9</li>
        <li>List item 10</li>
    </ul>
</div>

CSS

body {
    background:green;
    font-size: 1.5em;
}
.container {
    text-align:center;
}
.centered {
    text-align:left;
    width:200px;
    margin:0 auto;
    border:1px solid black;
}
li {
    cursor: pointer;
}
li.done {
    font-weight: 700;
}

JavaScript

(function (todo, undefined) {
    var list = document.getElementById("todo-list");
    var items = list.children;

    for (var i = 0; i < items.length; i++) {
        items[i].addEventListener("click", function () {
            var done = this.classList.contains("done");

            if (done) {
                this.classList.remove("done");
            }
            else {
                this.classList.add("done");
            }
        });
    }
}(window.todo = window.todo || {}));