stylize part 1

by craigcav

HTML

<div id=main></div>

CSS

.square { 
    height: 100px; 
    width: 100px; 
    margin-left:auto;
    margin-right:auto; 
    line-height: 100px; 
    font-size:500%;
    letter-spacing: 100em;
    overflow: hidden;
    padding-left: .3em;
    box-sizing: border-box; 
    font-family: 'Lucida Console', monospace;
}


.color1 { background: #2F4F4F; }
.color2 { background: #1E90FF; }
.color3 { background: #ADD8E6; }
.color4 { background: #BC8F8F; }
.color5 { background: #87CEEB; }
.color6 { background: #00FF7F; }

JavaScript

$(function() {
    var words = ['AlphaTest', 'QuaziTest', 'BetaTest', 'ZetaTest', 'MacroTest', 'ChronoTest', 'AlphaTest', 'ZetaTest', 'AlphaTest', 'QuaziTest', 'BetaTest', 'ZetaTest', 'MacroTest', 'ChronoTest', 'AlphaTest', 'ZetaTest'];
    var classes = ['color1', 'color2', 'color3', 'color4', 'color5', 'color6'];


    $.each(words, function(index, word) {

        var hash = 0;
        for (i = 0; i < word.length; i++) {
            char = word.charCodeAt(i);
            hash = hash + char * 3;
        }
        hash = hash % 5;
        $("<div id=identifier" + i + " class= \" square " + classes[hash] + "\">" + word[0] + " </div>").appendTo("div#main");

    });
});