Exercise (02)

Supply the <div> element with another style by switching its css class per button click. Each click should use another css class from the provided array.

HTML

<div id="target">Style me!</div>
<div>
    <button>Switch style</button>
</div>

CSS

.style1 {
    border: 1px dashed red;
    font-family: monospace;
}

.style2 {
    border: 2px solid blue;
    font-family: fantasy;
}

.style3 {
    background: black;
    color: yellow;
    padding: 10px;
}

.style4 {
    letter-spacing: 10px;
    border: 1px dotted black;
}

JavaScript

var i = 0; 
$(document).ready(function () {
    var styles = ['style1', 'style2', 'style3', 'style4'];
    
    
    $('button').click(
        function()
        {
            var target = $('#target');
            
            target.removeClass(styles[i]);
                
            i === 3 ? i = 0 : i++;            

            target.addClass(styles[i]);

        });
    
        
    
});