JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="box">
    <button id="previous">Previous</button>
    <button id="next">Next</button>
    <p id="log"></p>
</div>

CSS

* { font-size: 14px; font-family: helvetica, arial; }

.box {
    position: relative;
    background: grey;
    color: #fff;
    height: 50px;
    line-height: 50px;
}

button {
    position: absolute;
    top: 0; bottom: 0;    
    width: 90px;
    margin: 0;
    border: 0;
    cursor: pointer;
}

button:hover {
    background-color:rgb(214, 214, 214);
}

button:active {
    background-color:#999;
}

#previous {
    left: 0;
}


#next {
    right: 0;
}

#log {
    margin: 0 90px;
    padding: 0 10px
}

JavaScript

var prev = document.getElementById('previous'),
    next = document.getElementById('next'),
    log  = document.getElementById('log'),
    array  = [0,2,3,9,32,2,5,8,9, 79],
    count = 0,

    updateLog = (function () {
        var x,
            amount_to_show = 3;
            
        return function () {
            x = count * amount_to_show;
            log.innerText = array.slice(x, x+amount_to_show).join(', ');
        };
    })(),
    
    nextClick = (function () {
        var x = Math.ceil(array.length / 3 - 1);

        return function () {
            if ( count != x ) {
                ++count ;
                updateLog();
            }
        };
    })(),
    
    previousClick = function () {
        if ( count != 0 ) {
            --count;
            updateLog();
        }
    };


prev.onclick = previousClick;
next.onclick = nextClick;

updateLog();