JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div id="pagination"></div>

CSS

html {
    height: 100%;
    width: 100%;
    background-color: #D7D7D7;
    background-image: -webkit-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:    -moz-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:     -ms-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:      -o-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:         radial-gradient(contain, #F2F2F2, #D1D1D1);
}
body {
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: Arial, sans-serif;
   ...

JavaScript

/* * * * * * * * * * * * * * * * *
 * Pagination
 * javascript page navigation
 * * * * * * * * * * * * * * * * */

var Pagination = {

    code: '',

    // --------------------
    // Utility
    // --------------------

    // converting initialize data
    Extend: function(data) {
        data = data || {};
        Pagination.size = data.size || 300;
        Pagination.page = data.page || 1;
        Pagination.step = data.step || 3;
    },

    // add pages by number (from [s] to [f])
    Add: function(s, f) {
        for (var i = s; i < f; i++) {
            Pagination.code += '<a>' + i + '</a>';
        }
    },

    // add last page with separator
    Last: function() {
        Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
    },

    // add first page with separator
    First: function() {
        Pagination.code += '<a>1</a><i>...</i>';
    },



    // --------------------
    // Handlers
    // --------------------

    // change page
    Click: function() {
        Pagination.page = +this.innerHTML;
        Pagination.Start();
    },

    // previous page
    Prev: function() {
        Pagination.page--;
        if (Pagination.page < 1) {
            Pagination.page = 1;
        }
        Pagination.Start();
    },

    // next page
    Next: function() {
        Pagination.page++;
        if (Pagination.page > Pagination.size) {
            Pagination.page = Pagination.size;
        }
        Pagination.Start();
    },



    // --------------------
    // Script
    // --------------------

    // binding pages
    Bind: function() {
        var a = Pagination.e.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
            a[i].addEventListener('click', Pagination.Click, false);
        }
    },

    // write pagination
    Finish: function() {
        Pagination.e.innerHTML = Pagination.code;
        Pagination.code = '';
       ...