JSFiddle - React, Tailwind, and code Playground

by kflorence

HTML

<div>
    <div id="contain">
        <img src="http://placekitten.com/200/200">
        <button id="previous" type="button">Previous</button>
        <button id="random" type="button">Random</button>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a mauris et metus ultrices porttitor eget consectetur erat. Nulla facilisi. Vestibulum dictum tempus egestas. Duis fermentum elementum nisi in congue. Integer suscipit aliquam dignissim. Sed varius ante a metus consequat in ultrices arcu volutpat. Pellentesque hendrerit mi nec ipsum dictum gravida. Praesent pretium ultricies viverra. Maecenas sed tortor quis augue rutrum sodales. Cras eget congue felis. Vestibulum semper bibendum velit, ac laoreet tellus imperdiet ut. Aliquam dapibus purus at leo eleifend a placerat sem rhoncus. Maecenas porttitor vehicula lacus, ut auctor dui egestas in.

Etiam justo tortor, semper nec bibendum eu, scelerisque in ante. Cras interdum viverra aliquam. Aliquam erat volutpat. Sed turpis nisl, porttitor nec mattis vitae, egestas vel sem. Nam aliquam varius ante, eu placerat turpis fermentum rhoncus. Duis faucibus aliquam nunc, id condimentum tellus accumsan at. Nullam eu ipsum quis quam feugiat facilisis vel ut erat. Nulla eu ante non urna vulputate consectetur. Mauris aliquet nulla tristique metus faucibus ultricies. Praesent eros enim, sodales a viverra sed, placerat ut arcu. Cras risus ipsum, adipiscing a blandit non, gravida a arcu.

Sed laoreet nisi nec nisi convallis pharetra. Ut consectetur augue a augue euismod facilisis. Cras tempus urna quis nunc dapibus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean nec tortor massa. Maecenas quis lectus magna, sit amet dapibus erat. Suspendisse potenti. Quisque tincidunt molestie ultrices. Morbi ultricies, neque eu interdum gravida, diam mi dignissim tortor, id adipiscing urna massa eu lorem. Pellentesque convallis, neque ac elementum rhoncus, est libero...

CSS

img {

}

#contain {
    float: left;
    width: 200px;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
}

#previous {
    position: absolute;
    bottom: 0;
    left: 0;
}

#random {
    position: absolute;
    bottom: 0;
    right: 0;
}

JavaScript

var shown = [];

function randomImage() {
    var catId = 200 + Math.floor(Math.random() * 11);

    if ( $.inArray( catId, shown ) < 0 ) { 
        $("img").attr("src", "http://placekitten.com/200/" + catId);
        shown.push(catId);

    } else if ( shown.length <= 10 ) {
        randomImage();
    }
}

$("#random").click(function() {
    randomImage();
});

$("#previous").click(function() {
    if ( shown.length ) {
        var catId = shown.pop();
        console.log( shown, catId);
        $("img").attr("src", "http://placekitten.com/200/" + catId);
    }
});