JSFiddle - React, Tailwind, and code Playground

by biz79

HTML

<ul class="colors-list">
        <li><a title="Black" id="black" class="black" >black</a></li>
        <li><a title="Green" id="green" class="green" >green</a></li>
        <li><a title="Blue" id="blue" class="blue" >blue</a></li>
        <li><a title="Red" id="red" class="red" >red</a></a></li>
</ul>

<div>
    <span>cookie value: </span><span id='result'>none</span>
</div>

JavaScript

$('#black').click(function () {
  // stylesheet stuff...
  createCookie('cookie','black',1);
});
$('#blue').click(function () {
  // stylesheet stuff...
  createCookie('cookie','blue',1);
}); 
$('#green').click(function () {
  // stylesheet stuff...
  createCookie('cookie','green',1);
});
$('#red').click(function () {
  // stylesheet stuff...
  createCookie('cookie','red',1);
});

// this event is just to update the result
// instead, you might want to have this run on doc ready
// if a cookie is found, then update CSS
$('ul').on('click',function() { 
    updateResult();
});

function updateResult() {
  var cookieValue = getCookie('cookie');
  if (cookieValue.length) {
    $('#result').html(cookieValue);
  }
}

//--------------
function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}