JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<!--

    fucking flashlight 


    2012 by Tim Pietrusky
    tim-pietrusky.de
-->

<!--
    You can click the flashlight (anywhere) to toggle start/stop
-->
<body title="click to toggle on/off"></body>

CSS

/*
 * fucking flashlight
 *
 *
 * 2012 by tim-pietrusky.de
 *
 * Licensed under VVL 1.33b7 - tim-pietrusky.de/license
 */
@import url(http://fonts.googleapis.com/css?family=Codystar);

html, 
body  {
    border-width: 0px;
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    
    text-align:center;
    
    background:#000;
    overflow:hidden;
    
    font:4em 'Codystar', cursive;
}

body {
    padding-top:8%;
}

/*
 * and this is all the flashlight magic
 */
body.flash {
    -webkit-animation: flash .35s infinite linear forwards;
       -moz-animation: flash .35s infinite linear forwards;
        -ms-animation: flash .35s infinite linear forwards;
         -o-animation: flash .35s infinite linear forwards;
}

@-webkit-keyframes flash {
  0%   {background: #fff;}
  25%  {background: #000;}
}
@-moz-keyframes flash {
  0%   {background: #fff;}
  25%  {background: #000;}
}
@-ms-keyframes flash {
  0%   {background: #fff;}
  25%  {background: #000;}
}
@-o-keyframes flash {
  0%   {background: #fff;}
  25%  {background: #000;}
}

JavaScript

$(function() {
    var _body = $('body'),
        _interval,
        random_content,
        random_content_lastValue,
        content = new Array(
"&#9728;","&#9729;","&#9730;","&#9731;","&#9732;","&#9733;","&#9734;","&#9742;","&#9748;","&#9749;","&#9752;","&#9754;","&#9755;","&#9760;","&#9762;","&#9763;","&#9764;","&#9765;","&#9770;","&#9773;","&#9774;","&#9775;","&#9785;","&#9786;","&#9798;","&#9819;","&#9818;","&#9820;","&#9821;","&#9822;","&#9824;","&#9827;","&#9829;","&#9830;","&#9832;","&#9835;","&#9834;","&#9855;","&#9840;","&#9855;","&#9842;","&#9859;","&#9861;","&#9883;","&#9881;","&#9885;","&#9884;","&#9889;","&#9873;","&#9874;","&#9875;","&#9876;","&#9877;","&#9878;","&#9923;","&#9990;","&#9991;","&#9992;","&#10025;","&#10026;","&#10027;","&#10028;","&#10029;","&#10030;","&#10031;", "Knife Party", "visual vomit");
    
    // start the fucking flashlight
    _body.addClass('flash');
    
    // start changing everything
    startChanging();
    
    // start/stop flashing            
    $('body').click(function() {
        if (_body.hasClass('flash')) {
            _body.removeClass('flash');
        } else {
            _body.addClass('flash');
        }
    });
    
    function startChanging() {
        
        setInterval(function() {
            random_content = randomBetween(content.length);
            _body.html(content[random_content]);
        }, 325);
    };
    
    function randomBetween (max) {
        var r;
        do {r = Math.random();} while(r == 1.0);
        return parseInt(r * max);
    }
});

// Load webfonts
WebFontConfig = {
    google: { families: [ 'Codystar::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
 ...