JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<div class="main bg1"> 
<img id="logo-img" class="green-img" src="http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png" alt="logo"/>
<h2>Lorem ipsum dolor sit</h2>
</div>

<p>Choose a theme:</p>
<ul class="theme-switcher">
<li class="green">&nbsp;</li>
<li class="purple">&nbsp;</li>
<li class="rust">&nbsp;</li>
</ul>

CSS

body {color:#000; font-family: verdana;}

h2 {font-size: 1.3em; padding: 10px; margin: 10px; color: #fff}

.main { width:400px;}

.bg1 {background: #a0b544;}
.bg2 { background-color:#5b5e7a;}
.bg3 { background-color:#c64b16;}



ul.theme-switcher li
{ width:20px; height:20px; display:block; margin:1px; cursor:pointer; float:left;
}

.green {background-color:  #a0b544;}
.purple {background-color:#5b5e7a;}
.rust {background-color:#c64b16;}

JavaScript

$(document).ready(function(){
    
/* 
On click the theme is changed for the image and the logo. So far I have JQuery cookie working to keep the background color that was selected even after page reload. 

To do: retain the selected theme logo using coookie.
*/
    
    
    $("li.green").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
        $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png');
        $.cookie('mycookie','bg1');
        $.cookie('mycookieimg','green-img');
    });

    $("li.purple").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
        $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-purple.png');
        $.cookie('mycookie','bg2');
        $.cookie('mycookieimg','purple-img');
    });

    $("li.rust").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
        $('#logo-img').attr('src', 'http://i1294.photobucket.com/albums/b601/danomatic11/logo-rust.png');
        $.cookie('mycookie','bg3');
        $.cookie('mycookieimg','rust-img');
    }); 
    
    if ($.cookie('mycookie')) {
        $('.main').addClass($.cookie('mycookie'));
    }
    if ($.cookie('mycookieimg')){
        var img = {'green-img':'http://i1294.photobucket.com/albums/b601/danomatic11/logo-green.png', 'purple-img':'http://i1294.photobucket.com/albums/b601/danomatic11/logo-purple.png', 'rust-img':'http://i1294.photobucket.com/albums/b601/danomatic11/logo-rust.png'};
         $('#logo-img').attr('src',img.$.cookie('mycookieimg'));
     }
});