Last active
August 29, 2015 14:19
-
-
Save mhakes/18e1219dcf2d453e5cd8 to your computer and use it in GitHub Desktop.
FlippingBinary
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> <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"> </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> <span class="outputBi" id="bip"></span> | |
</p> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment