JSFiddle - React, Tailwind, and code Playground

by KooiInc MeHere

HTML

<script src="http://kooiinc.github.io/JSHelpers/Helpers-min.js"></script>
<div class="solink" data-linkid="27720750"></div>
<div id="bttns">
    <button id="scaledown">scale down (-10%)</button>
    <br>
    <button id="scaleup">scale up (10%)</button>
</div>

CSS

body {
  background: url('http://testbed.nicon.nl/img/_FBs3b.svg') repeat;
  background-size: 100px;
}

button {margin-top: 5px;}

JavaScript

(function() {
    document.querySelector('#bttns').addEventListener('click', scale);
    function scale(e) {
        var from = e.target || e.srcElement;
        if (!/^scale/i.test(from.id)) {return true;}
        var bodystyle = document.body.style;
        var currentsize = parseInt(bodystyle.backgroundSize,10) || 100;
        var up = /^scaleup$/i.test(from.id);
        // limit grid size between 20 en 200
        currentsize = currentsize < 20 ? 20 : currentsize > 200 ? 200 : currentsize;
        bodystyle.backgroundSize = (currentsize + (up ? 0.1 : -0.1) * currentsize) +'px';
        return true;
    }
}())