JSFiddle - React, Tailwind, and code Playground

by babich_ss

HTML

<form id="colorizedList">
            <h1>A or B?</h1>
            <fieldset>
                <label><input type="radio" name="color" value="orange">A</label>
                <label><input type="radio" name="color" value="green">B</label>
            </fieldset>
            <ul id="colorizedItems">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
                <li>Item 7</li>
                <li>Item 8</li>
            </ul>
        </form>

CSS

#colorizedList{
    width: 150px;
    border-radius: 5px;
    border: 1px solid #999;
    padding: 10px;
}
#colorizedList h1{
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}
fieldset{
    border: none;
}
#colorizedList label{
    width: 49%;
    display: inline-block;
    text-align: center;
}
#colorizedList li{
    padding: 5px;
    list-style: none;
}
.green.active{
    background-color: green;
}
.orange.active{
    background-color: orange;
}
#colorizedItems li:before{
    content: "•";
    font-weight: bold;
}
#colorizedItems.green li:before{
    color: green;
}
#colorizedItems.orange li:before{
    color: orange;
}

JavaScript

var collection = document.getElementsByTagName('input'),
    labels = document.getElementsByTagName('label'),
    list = document.getElementById("colorizedItems");
    i = 0,
    j = 0;
for(i; i < collection.length; i++){
    collection[i].addEventListener("click", function(){
        for(j; j < labels.length; j++){
            labels[j].className = "";
        }
        j = 0;
        this.parentNode.className = this.value + " active";
        list.className = this.value;
    });
};