JSFiddle - React, Tailwind, and code Playground

by Oliver Kelso

HTML

<div class="divContainer">
    <p>Changing colour plugin</p>
    <div class="square">Square 1</div>
    <div class="square">Square 2</div>
    <div class="square">Square 3</div>
    <div class="square">Square 4</div>
    <div class="square">Square 5</div>
    <div class="square">Square 6</div>
    <div class="square">Square 7</div>
    <div class="square">Square 8</div>
    <button class="changeColour">change colour</button>
</div>

CSS

.divContainer {
    width:600px;
    height:300px;
    background-color:grey;
    position:absolute;
    top:450px;
}
.square {
    background-color:red;
    width:50px;
    height:50px;
    margin-right:10px;
    float:left;
}

JavaScript

(function ($) {
    $.fn.colourThem = function (options) {
        //declare defaults
        var defaults = {
            background: 'green',
            color: 'white'
        }
        var settings = $.extend({}, defaults, options);
        $(this).each(function () {
            $(this).css({
                "backgroundColor": settings.background,
                "color": settings.color
            });
            return this;
        });
    }
}(jQuery));


$(".changeColour").click(function () {
    $(".square").colourThem({
        background: 'yellow',
        color: 'green'
    });
});