JSFiddle - React, Tailwind, and code Playground

by happysmiles

HTML

<form>
    <table>
        <tr>
            <td>Please choose your Favorite Pet:
                <br />
                <input name="cat" onclick="SetCookie('animal', this.name, exp);" type="checkbox" />Cat
                <br />
                <input name="dog" onclick="SetCookie('animal', this.name, exp);" type="checkbox" />Dog
                <br />
                <input name="gerbil" onclick="SetCookie('animal', this.name, exp);" type="checkbox" />Gerbil
                <br />
                <input name="gopher" onclick="SetCookie('animal', this.name, exp);" type="checkbox" />Gopher
                <br />
            </td>
        </tr>
    </table>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
<ul>
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="four">4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS

.favRed {
    color:red;
}
.favBlue {
    color:blue;
}
.favYellow {
    color:yellow;
}
.favWhite {
    color:white;
}

JavaScript

var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays * 24 * 60 * 60 * 1000));

function getCookieVal(offset) {
    var endstr = document.cookie.indexOf(";", offset);
    if (endstr == -1) endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie(name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
    }
    return null;
}

function SetCookie(name, value, exp) {
    var argv = SetCookie.arguments;
    var argc = SetCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    var path = (argc > 3) ? argv[3] : null;
    var domain = (argc > 4) ? argv[4] : null;
    var secure = (argc > 5) ? argv[5] : false;
    document.cookie = name + "=" + escape(value) + ((expires === null) ? "" : ("; expires=" + expires.toGMTString())) + ((path === null) ? "" : ("; path=" + path)) + ((domain === null) ? "" : ("; domain=" + domain)) + ((secure === true) ? "; secure" : "");
    
    determineFavorite(); 
}

function DeleteCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = GetCookie(name);
    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

function myFunction() {
    document.getElementById("one").className = "favBlue";
}

function determineFavorite() {
    var favorite = GetCookie('animal');

    if (favorite !== null) {
        switch (favorite) {
            case 'cat':
                document.getElementById("one").className = "favBlue";
                break;
            case 'dog':
                document.getElementById('two').className = 'favBlue';
                break;
            case 'gerbil':
               ...