Fibonacci Clock
HTML
<div id="play">
<div class="left">
<div class="upper">
<div class="left-u">
<div id="big-2"></div>
</div>
<div class="right-u">
<div id="big-1-1"></div>
<div id="big-1-2"></div>
</div>
</div>
<div class="lower">
<div id="big-3"></div>
</div>
</div>
<div class="right">
<div id="big-5"></div>
</div>
</div>
SCSS
html,body{
height : 100%;
}
.blue{
background : blue;
}
.green{
background : green;
}
.red{
background : red;
}
#big-5,#big-3,#big-2{
height : 100%;
}
#play{
width : 450px;
background : #fff;
height : 350px;
border : 1px solid #000;
margin: 20px auto 0 auto;
display:flex;
flex-direction : row;
.left{
flex : 0.6;
border : 1px solid #000;
display : flex;
flex-direction : column;
.upper{
flex:1;
border : 1px solid #000;
display:flex;
flex-direction : row;
.left-u{
border : 1px solid #000;
flex: 1.4;
}
.right-u{
border : 1px solid #000;
flex: 1;
#big-1-1{
height : 50%;
border : 1px solid #000;
}
#big-1-2{
height : 50%;
border : 1px solid #000;
}
}
}
.lower{
flex:1;
border : 1px solid #000;
}
}
.right{
flex : 1;
border : 1px solid #000;
}
}
ES6
class fiboClock{
constructor(time){
this.hour = (time.getHours() )% 12;
this.hour = this.hour ? this.hour : 12;
this.minutes =Math.floor(time.getMinutes()/5);
this.blue= 0;
this.green= 0;
this.red= 0;
}
initiateClock(){
if(this.hour>=this.minutes){
this.blue = this.minutes;
this.hour = this.hour-this.minutes;
this._checkBlue(this.blue);
this._checkReds(this.hour);
}
else if(this.hour<this.minutes){
this.blue = this.hour;
this.minutes = this.minutes-this.hour;
this._checkBlue(this.blue);
this. _checkGreens(this.minutes)
}
}
_checkBlue(blues){
//debugger;
let filcheck = false;
while(blues>0){
if(blues>=5){
blues = blues-5;
document.getElementById('big-5').className = 'blue';
}
else if(blues>=3){
blues = blues-3;
document.getElementById('big-3').className = 'blue';
}
else if(blues>=2){
blues = blues-2;
document.getElementById('big-2').className = 'blue';
filcheck = true;
}
else if(blues == 2 && filcheck){
blues = blues-2;
document.getElementById('big-1-1').className = 'blue';
document.getElementById('big-1-2').className = 'blue';
}
else if(blues == 1){
blues = blues-1;
document.getElementById('big-1-1').className = 'blue';
}
console.log(blues);
}
}
_checkClass(ele){
if(ele.getAttribute('class') == 'green' || ele.getAttribute('class') == 'red' || ele.getAttribute('class') == 'blue'){
return true;
}
else{
return false;
}
}
_checkGreens(blues){
debugger;
while(blues>0){
if(blues>=5 && !this._checkClass(document.getElementById('big-5'))){
blues = blues-5;
document.getElementById('big-5').className = 'green';
}
else if(blues>=3 && !this._checkClass(document.getElementById('big-3'))){
blues = blues-3;
document.getElementById('big-3').className = 'green';
}
else if(blues>2 && !this._checkClass(document.getElementById('big-2'))){
blues = blues-2;
document.getElementById('big-2').className = 'green';
}
else if(blues == 2 && !this._checkClass(document.getElementById('big-1-1'))&& !this._checkClass(document.getElementById('big-1-2'))){
blues = blues-2;
document.getElementById('big-1-1').className = 'green';
document.getElementById('big-1-2').className = 'green';
}
else if(blues>2 && !this._checkClass(document.getElementById('big-1-1'))){
blues = blues-1;
document.getElementById('big-1-1').className = 'green';
}
else if(blues>2 && !this._checkClass(document.getElementById('big-1-2'))){
blues = blues-1;
document.getElementById('big-1-2').className = 'green';
}
else if(blues == 1 && !this._checkClass(document.getElementById('big-1-1'))){
blues = blues-1;
document.getElementById('big-1-1').className = 'green';
}
else if(blues == 1 && !this._checkClass(document.getElementById('big-1-2'))){
blues = blues-1;
document.getElementById('big-1-2').className = 'green';
}
}
}
_checkReds(blues){
debugger;
while(blues>0){
if(blues>=5 && !this._checkClass(document.getElementById('big-5'))){
blues = blues-5;
document.getElementById('big-5').className = 'red';
}
else if(blues>=3 && !this._checkClass(document.getElementById('big-3'))){
blues = blues-3;
document.getElementById('big-3').className = 'red';
}
else if(blues>2 && !this._checkClass(document.getElementById('big-2'))){
blues = blues-2;
document.getElementById('big-2').className = 'red';
}
else if(blues == 2 && !this._checkClass(document.getElementById('big-1-1'))&& !this._checkClass(document.getElementById('big-1-2'))){
blues = blues-2;
document.getElementById('big-1-1').className = 'red';
document.getElementById('big-1-2').className = 'red';
}
else if(blues>2 && !this._checkClass(document.getElementById('big-1-1'))){
blues = blues-1;
document.getElementById('big-1-1').className = 'red';
}
else if(blues>2 && !this._checkClass(document.getElementById('big-1-2'))){
blues = blues-1;
document.getElementById('big-1-2').className = 'red';
}
else if(blues == 1 && !this._checkClass(document.getElementById('big-1-1'))){
blues = blues-1;
document.getElementById('big-1-1').className = 'red';
}
else if(blues == 1 && !this._checkClass(document.getElementById('big-1-2'))){
blues = blues-1;
document.getElementById('big-1-2').className = 'red';
}
}
}
}
let d = new Date();
let clock = new fiboClock(d);
clock.initiateClock();
