Led magic 2

by Nikita Jadhao

HTML

<div id="led" class="led">hello</div>

CSS

.box {
    display:inline-block;
    margin-right:3px;
    transform-style: preserve-3d;
    transition: all 0.01s linear;
}
.letters{
    display : inline-block;
    margin-left:10px;
}
.led{
    display:inline-block
}

JavaScript

var digitNo = 9;
var matrixRow = 7;
var RowBox = 5;
var matrix ={};

$(document).ready(function () {
    LedBox($('#led'), 20, '#4679BD', '#AADAFF');
})

function LedBox(parent, size,color ,bkgdColor) {
     var content  = (parent.text().toUpperCase().trim()).replace(/[\.,-\/#!$%\^&\*;:{}=\-_`~()]/g,"").split('');
      parent.text("");
      for (var i in content) {
          //alert(content[i]);
          parent.append('<div class="letters child'+i+'"></div>');
          var child  = $('.child'+i);
          initLedBox(child);
          setProp(child, size,bkgdColor); 
          paintMatrix(child, content[i]);
          setHighlight(child, color);
      }
    
    
    
    /* var max = ['0', '1', '2','3','4','5','6' ,'7','8','9'];
    var i = 0;
    
     initLedBox(ele);
     setProp(ele, size,bkgdColor);   
     setInterval(function(){
         clearMatrix();
         setProp(ele, size,bkgdColor);
         paintMatrix(ele, max[i++]);
         setHighlight(ele, color); 
         if(i > digitNo ){i=0;}
    }, 1000);   */


function initLedBox(ele){
    var i, j;
    for (i = 0; i < matrixRow; i++) {
    ele.append('<div class="row row-' + i + '"></div>')
    for (j = 0; j < 5; j++) {
        ele.find('.row-' + i).
        append('<div class="box box'+i+''+j+'"></div>');
    }
    }
}

function setProp(ele, size , color){
   var boxEle = ele.find('.box');
    boxEle.css('width',size);
    boxEle.css('height',size);
    boxEle.css('border-radius',size/4);
    boxEle.css('background-color',color);
    boxEle.hover(function(){
        $(this).css('background-color','#E7933A');
        $(this).css('transform','rotate(45deg)');
    },function(){
         $(this).css('background-color',color);
         $(this).css('transform','rotate(0deg)');
    })
}

function setHighlight(ele, color){
    var domEle = ele.find('.highlight');
        domEle.css('background-color',color);
        domEle.hover(function(){
        $(this).css('background-color','green');
       ...