.info
%h1 Decimal to Binary
%p Do you remember how to convert from Decimal to Binary representations?
%p - Shortcuts:
%ul
%li [0-1] Enter a digit
%li [return] Submit
%li [H] Hide helper groups
.wrapper
%p.random-number
.inputs
%button.inputs--zero 0
%button.inputs--one 1
.results
%svg{:class => "svg up", :viewBox => "0 0 140 116"}
%g{:transform => "translate(0,116) scale(0.1,-0.1)"}
%path{:d => "M817 807 l-346 -352 -120 125 -120 125 -116 -120 -116 -120 153 -148 c84 -82 192 -187 240 -234 l86 -86 324 327 c177 180 385 391 461 469 l138 141 -103 103 c-57 57 -110 108 -119 113 -12 7 -87 -64 -362 -343z"}
%svg{:class => "svg down", :viewBox => "0 0 116 116"}
%g{:transform => "translate(0,116) scale(0.1,-0.1)"}
%path{:d => "M116 1041 l-120 -120 171 -170 170 -171 -170 -170 -171 -171 122 -122 121 -121 170 171 170 171 171 -171 171 -171 122 122 121 121 -167 166 c-92 92 -167 170 -167 174 0 5 75 83 167 175 l167 167 -122 122 -121 121 -170 -171 -171 -170 -169 168 c-93 93 -171 169 -173 169 -2 0 -57 -54 -122 -119z"}
.inputs--feedback
- 8.times do |i|
%button 0
.actions
%button.actions--submit Ok
%button.actions--reset Clear
%button.actions--rand Rand@import "compass/css3";
@import "compass/reset";
@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
@mixin font-stack {font-family: 'Droid Sans Mono', sans-serif;
}
@mixin font-smooth {
font-smoothing:antialiased;
font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
font-smooth:always;
}
@mixin width($val) {
width: #{$val}#{"px"};
min-width: #{$val}#{"px"};
max-width: #{$val}#{"px"};
}
@mixin height($val) {
height: #{$val}#{"px"};
min-height: #{$val}#{"px"};
max-height: #{$val}#{"px"};
}
$light: #f5f5f5;
$color: #333;
$success: #2EDDBA;
$fail: #FF5A60;
html {
height: 100%;
background-color: $light;
color: darken($light, 15);
font-size: 12px;
@include font-stack;
@include font-smooth;
}
button {
border: none;
color: darken($light, 30);
text-transform: uppercase;
cursor: pointer;
}
.info {
position: absolute;
z-index: 1;
color: $color;
width: 260px;
top: 20px;
left: 20px;
padding: 10px 14px;
box-sizing: border-box;
font-family: Inconsolata, monospace;
background: rgba(255, 255, 255, 1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border-radius: 2px;
h1 {
line-height: 18px;
font-size: 16px;
margin: 0;
padding: 0 0 10px;
border-bottom: 1px solid transparentize($color, 0.9);
}
p {
font-size: 13px;
margin: 10px 0;
}
li {
font-size: 13px;
}
a {
color: darken($color, 40);
text-transform: uppercase;
font-size: 11px;
text-decoration: none;
}
}
.wrapper {
width: 320px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -160px;
text-align: center;
}
.random-number {
font-size: 65px;
line-height: 65px;
font-weight: 600;
}
.inputs {
height: 116px;
padding: 30px 0;
button {
width: 116px;
height: 116px;
font-size: 0;
line-height: 0;
padding: 0;
margin: 0 5px;
@include transition(transform 30ms linear);
&:active {
@include transform(scale(1.1));
}
}
}
.inputs--zero {
@include border-radius(50%);
background-color: transparentize($fail, 0.2);
}
.inputs--one {
width: 59px;
background-color: transparentize($success, 0.2);
}
.results {
height: 116px;
display: none;
.svg {
height: 116px;
.up {width: 140px;}
.down {width: 116px;}
}
}
.inputs--feedback {
padding: 0 0 30px;
min-height: 14px;
@include transform(translateZ(0));
button {
color: darken($light, 20);
background-color: transparent;
display: inline-block;
position: relative;
border: 1px dashed darken($light, 20);
padding: 5px 0;
@include width(30);
@include height(30);
@include box-sizing(border-box);
@include border-radius(3px);
&::after {
font-size: 9px;
position: absolute;
bottom: -21px;
left: 0;
width: 100%;
text-align: center;
}
}
.active {
color: darken($light, 35);
}
:nth-child(1)::after {content: '128'}
:nth-child(2)::after {content: '64'}
:nth-child(3)::after {content: '32'}
:nth-child(4)::after {content: '16'}
:nth-child(5)::after {content: '8'}
:nth-child(6)::after {content: '4'}
:nth-child(7)::after {content: '2'}
:nth-child(8)::after {content: '1'}
&.hide-hints {
button::after {
display: none;
}
}
}
.actions {
padding: 20px 0 0;
button {
width: 49px;
height: 49px;
padding: 0;
font-size: 9px;
@include box-sizing(border-box);
@include border-radius(50%);
background-color: transparent;
@include box-shadow(inset 0 0 0 4px darken($light, 4));
}
.actions--submit {
background-color: lighten($light, 5);
}
.actions--reset {
color: darken($light, 13);
}
}
.success,
.lose {
.inputs button {display: none}
.results {display: block}
.random-number {font-size: 50px}
}
.success {
background-color: $success;
color: darken($success, 25);
.inputs--feedback button,
.inputs--feedback .active,
.actions button {
background-color: inherit;
color: inherit;
border-color: inherit;
}
.inputs button {
background-color: darken($success, 25);
}
.svg {
&.up {fill: darken($success, 25);}
&.down {display: none;}
}
.actions button {
@include box-shadow(inset 0 0 0 4px darken($success, 5));
}
}
.lose {
background-color: $fail;
color: darken($fail, 20);
.inputs--feedback button,
.inputs--feedback .active,
.actions button {
background-color: inherit;
color: inherit;
border-color: inherit;
}
.inputs button {
background-color: darken($fail, 20);
}
.actions button {
@include box-shadow(inset 0 0 0 4px darken($fail, 5));
}
.svg {
&.down {fill: darken($fail, 20)}
&.up {display: none}
}
}
var $html = $('html'),
$document = $(document);
var MIN_NUM = 1,
MAX_NUM = 255,
INDEX = 0,
DELAY = 2000,
TIMER;
var UI = {
randomNumber: $('.random-number'),
inputZero : $('.inputs--zero'),
inputOne : $('.inputs--one'),
feedback : $('.inputs--feedback'),
send : $('.actions--submit'),
reset : $('.actions--reset'),
rand : $('.actions--rand'),
digits : $('.inputs--feedback').children()
};
var baseTwo = {
number: 0,
input : [],
init: function() {
baseTwo.number = 0;
baseTwo.clear();
baseTwo.bindEvents();
baseTwo.generateRandomNumber();
},
clear: function() {
baseTwo.input = [0,0,0,0,0,0,0,0];
INDEX = 0;
UI.digits
.removeClass('active')
.html(0);
},
bindEvents: function() {
baseTwo.unbindEvents();
UI.inputZero.on('click', function() { baseTwo.updateFeedback(0) });
UI.inputOne.on('click', function() { baseTwo.updateFeedback(1) });
UI.digits.on('click', baseTwo.toggleDigit);
$document.on('keypress', baseTwo.keyHot);
UI.send.on('click', baseTwo.compare);
UI.reset.on('click', baseTwo.clear);
UI.rand.on('click', baseTwo.init);
},
unbindEvents: function() {
UI.inputZero.off('click');
UI.inputOne.off('click');
UI.digits.off('click');
$document.off('keypress');
UI.send.off('click');
UI.reset.off('click');
UI.rand.off('click');
},
keyHot: function(e) {
switch(e.which) {
case 13: // return
baseTwo.compare();
break;
case 48: // 0
baseTwo.updateFeedback(0);
break;
case 49: // 1
baseTwo.updateFeedback(1);
break;
case 72: // h
case 104: // H
UI.feedback.toggleClass('hide-hints');
break;
}
},
generateRandomNumber: function() {
this.number = Math.floor( Math.random() * (MAX_NUM - MIN_NUM) + MIN_NUM);
UI.randomNumber[0].innerHTML = this.number;
},
toggleDigit: function(e) {
var self = $(e.target),
val = (self.text() == "0")
? 1
: 0;
self
.addClass('active')
.text( val );
baseTwo.input[ self.index() ] = val;
},
updateFeedback: function(number) {
baseTwo.input[ INDEX ] = number;
UI.feedback.children().eq( INDEX ).addClass('active').html( number );
INDEX += 1;
if (INDEX === (baseTwo.input.length))
baseTwo.compare();
},
compare: function() {
(parseInt( baseTwo.input.join().replace(/\,/ig,''), 2 ) === baseTwo.number)
? baseTwo.win()
: baseTwo.lose();
baseTwo.unbindEvents();
},
win: function() {
var inputNumber = parseInt( baseTwo.input.join().replace(/\,/ig,''), 2 );
$html.addClass('success');
UI.randomNumber[0].innerHTML = (inputNumber + "=" + UI.randomNumber[0].innerHTML);
timer = setTimeout(baseTwo.reset, DELAY);
},
lose: function() {
var inputNumber = parseInt( baseTwo.input.join().replace(/\,/ig,''), 2 );
$html.addClass('lose');
UI.randomNumber[0].innerHTML = (inputNumber + "≠" + UI.randomNumber[0].innerHTML);
timer = setTimeout(baseTwo.reset, DELAY);
},
reset: function() {
clearTimeout( timer );
timer = null;
$html.removeClass('success lose');
baseTwo.init();
}
};
baseTwo.init();
console.log("[0, 1] - enter a number");
console.log("[return] - submit");
console.log("[h] - hide groups");
console.log("-------");
External CSS
This Pen doesn't use any external CSS resources.