FlippingBinary

FlippingBinary.markdown

FlippingBinary

A Pen by mhakes on CodePen.

License.

View Full Version

index.html

 <div class="container-fluid padTop">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
             <h3 class="outputLG">
                <span class="pull-left">Binary Date/Time:</span>
                <span class="pull-right">
                   <button class="btn btn-sm btn-danger" data-showing="dec" id="sbd">Show Binary Only</button>
                </span>
            </h3>

        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-3 col-md-6 text-center">
             <p title="Its all about the present!">Seconds Ahead Today: <span class="output" id="a"></span>&nbsp;<span class="outputBi" id="bia"></span>
            </p>
        </div>
    </div>
    <div class="rowp">
        <div class="col-md-12">
            <div class="holder">
                <p class="lead">Month:</p>
                <p class="output" id="mh"></p>
                <p class="outputBi" id="bimh"></p>
            </div>
            <div class="card notThis">
                <div class="front notThis"> <i class="fa fa-ban text-danger"></i>

                </div>
                <div class="back">X</div>
            </div>
            <div class="card notThis">
                <div class="front notThis"> <i class="fa fa-ban text-danger"></i>

                </div>
                <div class="back">X</div>
            </div>
            <div class="card isOff" id="mh0">
                <div class="front">8</div>
                <div class="back">8</div>
            </div>
            <div class="card isOff" id="mh1">
                <div class="front">4</div>
                <div class="back">4</div>
            </div>
            <div class="card isOff" id="mh2">
                <div class="front">2</div>
                <div class="back">2</div>
            </div>
            <div class="card isOff" id="mh3">
                <div class="front">1</div>
                <div class="back">1</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="holder">
                <p class="lead">Date:</p>
                <p class="output" id="d"></p>
                <p class="outputBi" id="bid"></p>
            </div>
            <div class="card notThis">
                <div class="front notThis"> <i class="fa fa-ban text-danger"></i>

                </div>
                <div class="back">X</div>
            </div>
            <div class="card isOff" id="d0">
                <div class="front">16</div>
                <div class="back">16</div>
            </div>
            <div class="card isOff" id="d1">
                <div class="front">8</div>
                <div class="back">8</div>
            </div>
            <div class="card isOff" id="d2">
                <div class="front">4</div>
                <div class="back">4</div>
            </div>
            <div class="card isOff" id="d3">
                <div class="front">2</div>
                <div class="back">2</div>
            </div>
            <div class="card isOff" id="d4">
                <div class="front">1</div>
                <div class="back">1</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="holder">
                <p class="lead">Weekday:</p>
                <p class="output" id="wd"></p>
                <p class="outputBi" id="biwd"></p>
            </div>
            <div class="card notThis">
                <div class="front notThis"> <i class="fa fa-ban text-danger"></i>

                </div>
                <div class="back">X</div>
            </div>
            <div class="card notThis">
                <div class="front notThis"> <i class="fa fa-ban text-danger"></i>

                </div>
                <div class="back">X</div>
            </div>
            <div class="card isOff" id="wd0">
                <div class="front">8</div>
                <div class="back">8</div>
            </div>
            <div class="card isOff" id="wd1">
                <div class="front">4</div>
                <div class="back">4</div>
            </div>
            <div class="card isOff" id="wd2">
                <div class="front">2</div>
                <div class="back">2</div>
            </div>
            <div class="card isOff" id="wd3">
                <div class="front">1</div>
                <div class="back">1</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="holder">
                <p class="lead">Hours:</p>
                <p class="output" id="hours"></p>
                <p class="outputBi" id="bih"></p>
            </div>
            <div class="card notThis" id="ampm">
                <div class="front notThis np">&nbsp;</div>
                <div class="back notThis np"> <i title="am" class="fa fa-2x fa-sun-o hide" style="color:yellow"></i>
 <i title="pm" class="fa fa-2x fa-moon-o" style="color:white"></i>

                </div>
            </div>
            <div class="card isOff" id="h0">
                <div class="front">16</div>
                <div class="back">16</div>
            </div>
            <div class="card isOff" id="h1">
                <div class="front">8</div>
                <div class="back">8</div>
            </div>
            <div class="card isOff" id="h2">
                <div class="front">4</div>
                <div class="back">4</div>
            </div>
            <div class="card isOff" id="h3">
                <div class="front">2</div>
                <div class="back">2</div>
            </div>
            <div class="card isOff" id="h4">
                <div class="front">1</div>
                <div class="back">1</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="holder">
            <p class="lead">Minutes:</p>
            <p class="output" id="minutes"></p>
            <p class="outputBi" id="bim">X</p>
        </div>
        <div class="card isOff" id="m0">
            <div class="front">32</div>
            <div class="back">32</div>
        </div>
        <div class="card isOff" id="m1">
            <div class="front">16</div>
            <div class="back">16</div>
        </div>
        <div class="card isOff" id="m2">
            <div class="front">8</div>
            <div class="back">8</div>
        </div>
        <div class="card isOff" id="m3">
            <div class="front">4</div>
            <div class="back">4</div>
        </div>
        <div class="card isOff" id="m4">
            <div class="front">2</div>
            <div class="back">2</div>
        </div>
        <div class="card isOff" id="m5">
            <div class="front">1</div>
            <div class="back">1</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="holder">
            <p class="lead">Seconds:</p>
            <p class="output" id="seconds"></p>
            <p class="outputBi" id="bis">X</p>
        </div>
        <div class="card isOff" id="s0">
            <div class="front">32</div>
            <div class="back">32</div>
        </div>
        <div class="card isOff" id="s1">
            <div class="front">16</div>
            <div class="back">16</div>
        </div>
        <div class="card isOff" id="s2">
            <div class="front">8</div>
            <div class="back">8</div>
        </div>
        <div class="card isOff" id="s3">
            <div class="front">4</div>
            <div class="back">4</div>
        </div>
        <div class="card isOff" id="s4">
            <div class="front">2</div>
            <div class="back">2</div>
        </div>
        <div class="card isOff" id="s5">
            <div class="front">1</div>
            <div class="back">1</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-3 col-md-6 text-center">
            <p title="Can't do anything about these!">Seconds Past Today: <span class="output" id="p"></span>&nbsp;<span class="outputBi" id="bip"></span>

            </p>

        </div>
    </div>
</div>

script.js

// Libaries:
/*
    JQuery
    twitter-bootstrap
    lodash
    moment.js
    font-awesome
    jquery-flip @ http://nnattawat.github.io/flip/ 
*/
// http://nnattawat.github.io/flip/
function FlipBinary() {
    var that = this;
    this.endOfDay = null;
    this.startOfDay = null;
    //  set up the .card divs, those
    //  elements that flip
    //
    //  allow them to grow on mouseover
    $('.card').not('.notThis').addClass('grow').css('cursor','crosshair');
    //  loop through the individual cards
    $('.card').each(function (i, c) {
        //  grab the card
        var $c = $(c);
        //  store the decimal value
        var dv = $c.find('.back').text();
        //  set up the options for the card flip
        var x = {
            'axis': 'y',
            'speed': 400,
            'ignoreClick': true,
            'trigger': 'none'
        };
        //  store the decimal value in the div
        $c.attr('title', dv);
        //   alternate the flip axis
        if (i % 2 === 0) {
            x.axis = 'x';
        }
        //  set the flip options
        $c.flip(x);
    });
    /**
     * Create and display the binary values of elements
     * once a second...just like a clock
     * @param  {string} what    the type of element being parsed (seconds, day ect.)
     * @param  {int}    value   the current value for that second
     * @param  {int}    padding the length needed for the binary string being displayed
     * <= this.setClock() && this.makeDates() && this.runClock()
     * => this.makeDate()
     */
    function getBi(what, value, padding) {
        //  turn the value into a binary string
        var bi = Number(value).toString(2),
            //  store the value for display
            biDisplay = bi,
            //  difference from the required length to the actual length
            diff = padding - bi.length,
            i = 0,
            z = '',
            $card;
        //  create any padding need for the string
        while (i < diff) {
            z += '0';
            i += 1;
        }
        //  assemble the full string
        bi = z + bi;
        //  loop through each 0 || 1 of the binary string
        _.forEach(bi, function (r, i) {
            //  grab the dom element (.card) by the index of the what or element being parsed
            //  example $('#' + 's' + 4) === seconds.eq(4)
            $card = $('#' + what + i);
            //  if 0 and $card is showing its on/1 value
            //  turn it off
            if (Number(r) === 0 && $card.hasClass('isOn')) {
                $card.removeClass('isOn').addClass('isOff');
                $card.flip(false);
            } else if (Number(r) === 1 && $card.hasClass('isOff')) {
                //  if 1 and $card is not showing its  on/1 value
                //  turn it on
                $card.removeClass('isOff').addClass('isOn');
                $card.flip(true);
            }
        });
        //  output the unpadded binary string
        $('#bi' + what).text(biDisplay);
        //  based on what is being parsed/displayed
        //  amend  the display
        //  h = hours
        if (what === 'h') {
            // show hide the am/pm icon
            if (value < 12) {
                $('.fa-moon-o').addClass('hide').hide();
                $('.fa-sun-o').removeClass('hide').show();
            } else {
                $('.fa-sun-o').addClass('hide').hide();
                $('.fa-moon-o').removeClass('hide').show();
            }
            //  display the hours
            $('#hours').text(moment().format('HH') + ' / ' + moment().format('hh'));
            //  refresh the icon is visible at noon
            if (value === 12) {
                $('#ampm').flip(true);
                //  midnight -> need a new Date
            } else if (value === 0) {
                that.makeDates();
            }
        } else if (what === 'm') {
            $('#minutes').text(moment().format('mm'));
        } else if (what === 's') {
            $('#seconds').text(moment().format('ss'));
        } else if (what === 'wd') {
            $('#wd').html(value + ' / ' + moment().format('ddd'));
        } else if (what === 'd') {
            $('#d').text(value);
        } else if (what === 'mh') {
            $('#mh').text(value + ' / ' + moment().format('MMMM'));
        }

    }
    /**
     * Set the Weekday, day and montth
     * Called at start up and at 00:00:00 each day
     * <= this.setClock() && getBi()
     * => this.getBi()
     */
    this.makeDates = function () {
        var now = moment();
        that.endOfDay = moment().endOf('d').unix();
        that.startOfDay = moment().startOf('d').unix();
        //  show the sun/moon - am/pm card
        $('#ampm').flip(true);
        //  weekday
        getBi('wd', now.weekday(), 4);
        // day
        getBi('d', now.format('DD'), 5);
        // month
        getBi('mh', now.format('MM'), 4);
    };
    /**
     * Display the time spent & time ahead for the day
     * <= this.makeDate() && this.runClock()
     * => \\
     */
    this.startEnd = function(){
        var u = moment().unix(),
            a = that.endOfDay - u,
            p = u - that.startOfDay;
        $('#a').text(a);
        $('#p').text(p);
        $('#bip').text(p.toString(2));
        $('#bia').text(a.toString(2));
    };
    /**
     * Set the 1 second redraw of the date/time display
     * using the moment.js libary
     * <= this.setClock()
     * => getBi() && this.makeDates()
     */
    this.runClock = function () {
        setInterval(function () {
            // grab and store the current time
            var now = moment(),
                x = now.seconds();
            that.startEnd();
            //  seconds must be parsed...well..every second
            //  's' = what
            //   x  = value
            //   6  = padding (the length required for the binary string)
            getBi('s', x, 6);
            //  set minutes, just once a minute
            if (x === 0) {
                x = now.minutes();
                getBi('m', x, 6);
                //  set the hours just once an hour
                if (x === 0) {
                    x = now.hours();
                    getBi('h', x, 5);
                    //  set the day just once a day
                    if (x === 0) {
                        that.makeDates();
                    }
                }
            }
        }, 1000);
    };
    /**
     * Set up the clock prior to running
     * s = seconds
     * m = minutes
     * h = hours
     * <= on load
     * => that.makeDates() && getBi() && that.runClock()
     */
    this.setClock = function () {
        var now = moment();
        that.makeDates();
        getBi('h', now.hours(), 5);
        getBi('m', now.minutes(), 6);
        getBi('s', now.seconds(), 6);
        //  call the setInterval()
        that.runClock();
    };
    /**
     * Set the display values to either decimal or binary
     * @param  {string} style the style to display
     * <= $('#sbd').click()
     * => \\
     */
    this.changeStyle = function (style) {
        // show binary, just 1 and 0
        if (style === 'bi') {
            $('.front').not('.notThis').text('0');
            $('.back').not('.notThis').text('1');
            $('.output').addClass('hide').hide();
            return;
        }
        $('.output').removeClass('hide').show();
        //  set the decimal values
        $('.front').each(function (i, e) {
            $(e).not('.notThis').empty().text($(e).parent().attr('title'));
        });
        $('.back').each(function (i, e) {
            $(e).not('.notThis').empty().text($(e).parent().attr('title'));
        });
    };
    /**
     * Add some fun to the sun/moon icons - spin them
     */
    $('#ampm').on("mouseover", function () {
        var $i = $(this).find('i').not(':hidden');
        $i.addClass('fa-spin');
    }).on("mouseout", function () {
        var $i = $(this).find('i').not(':hidden');
        $i.removeClass('fa-spin');
    });
}
// create and run the clock
var f = new FlipBinary();
f.setClock();
//  switch binary/decimal display
$('#sbd').on("click", function (e) {
    var style = $(this).attr('data-showing');
    e.preventDefault();
    if (style === 'dec') {
        f.changeStyle('bi');
        $(this)
            .attr('data-showing', 'bi')
            .text('Show Integers')
            .removeClass("btn-danger")
            .addClass('btn-success');
        return;
    }
    f.changeStyle('dec');
    $(this)
        .attr('data-showing', 'dec')
        .text('Show Binary Only')
        .removeClass("btn-success")
        .addClass('btn-danger');
});
//  flip.js has a lot of things going on when you click a $('div').flip()
//  I just want the animation, therefore stop propagation
$(document).on("click", function (e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
});

style.css

body {
    background: #222;
    color: white;
    text-align: center;
}
.card, .holder {
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    font-size: 40px;
    outline: 4px solid #FF2605;
    outline-offset: 1px;
 }
.holder {
    vertical-align: top;
    padding: 4px;
}
.front, .back {
    border: 2px gray ridge;
    padding: 16px;
 }
.front {
    background-color: #ccc;
    opacity: 0.2;
}
 .back {
    background-color: red;
 }
.output, .outputLG {
    color: red;
    font-weight: bold;
}
.output, .outputBi {
    font-size: 16px;
    line-height: 16px;
}
.outputBi {
    color: white;
}
.outputLG {
    font-size: 30px;
}
.padTop {
    margin-top: 20px;
}
.txt-inverse {
    color: black;
}
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
.np {
    padding: 1px;
}