JSFiddle - React, Tailwind, and code Playground

by blinkydamo

HTML

<div id="content" class="colorPicker1">
    <p>Text</p>
</div>
<div id="colorPicker1" class="palette colorPicker1" title="Transparent"></div>
<div id="colorPicker2" class="palette colorPicker2" title="Portafino"></div>
<div id="colorPicker3" class="palette colorPicker3" title="Pink Lace"></div>
<div id="colorPicker4" class="palette colorPicker4" title="Mint Green"></div>
<div id="colorPicker5" class="palette colorPicker5" title="Melrose"></div>
<div id="result"></div>

CSS

#content {
    margin:100px 0px 0px 100px;
    width:100%;
    height:20px;
}

.palette {
    cursor: pointer;
    height: 18px;
    width: 18px;
    border: 2px solid #000
}

.colorPicker1 {
    background: /*#e1ffff;*/none;
}
#colorPicker1 {
	background-image:url('../images/noBackground.png');
	position:fixed;
	top:25px;
	left:50px;
}
.colorPicker2 {
    background: #ffffb8;
}
#colorPicker2 {
	position:fixed;
	top:45px;
	left:50px;
}

.colorPicker3 {
    background: #ffc5ff;
}
#colorPicker3 {
	position:fixed;
	top:65px;
	left:50px;
}

.colorPicker4 {
    background-color: #99ff9c;
}
#colorPicker4 {
	position:fixed;
	top:85px;
	left:50px;
}

.colorPicker5 {
    background: #97acff;
}
#colorPicker5 {
	position:fixed;
	top:105px;
	left:50px;
}

JavaScript

$(document).ready(function () {
/* Checks if the browser is compatible with localStorage*/
	if (typeof (localStorage) == 'undefined') {
    document.getElementById("result").innerHTML = 
'Your browser does not support HTML5 localStorage. Try upgrading.';
} else {
    if (localStorage.getItem("background") !== null) {
        getColour = localStorage.background;
        $("#content").addClass(getColour);
    }
}
/* Collects the colour and stores it into localStorage*/
    getColour = localStorage.background;
    $('.palette').click(function () {
        getColour = localStorage.background;
        $("#content").removeClass(getColour);
        localStorage.removeItem('background');
        var setColour = $(this).attr("id");
        $("#content").addClass(setColour);
        localStorage.setItem("background", setColour);
    });
});