moved client js and css to separate files

public/client.js

+var stepPos = 0;
+       
+
+        $(function(){
+            // generate graphics
+            generateSteps();
+
+            var iosocket = io.connect();
+            iosocket.on('connect', function () {
+
+            }); 
+
+            // metronome
+            iosocket.on('metronome', function(serverStepPos){
+                stepPos = serverStepPos;
+                advanceStep(stepPos);
+                playSound();
+            });
+
+            // if bpm changes from other client, update slider pos here
+            iosocket.on('setBpmSlider', function(newSliderVal){
+                $('#bpm').val(newSliderVal);
+                console.log(newSliderVal);
+            });
+            
+            // send bpm change to server
+            $( "#bpm" ).change(function() {
+                iosocket.emit('bpm', $(this).val());
+            });
+        });
+
+
+        function advanceStep(serverStepPos){
+        /*           
+            if(stepPos >= 16){
+               stepPos = 0;
+            }
+        */  
+            $('.step'+serverStepPos).removeClass('inactive').addClass('active');
+               
+            for(var i = 0; i < 16; i++){
+                if(i != serverStepPos){
+                    $('.step'+i).removeClass('active').addClass('inactive');
+                }
+            }
+        //   stepPos++;
+        }
+        
+
+        function generateSteps(){
+            for (var i = 0; i < 5; i++){
+                if(i<4){
+                    $('#steps').append('<tr class="row" id="row'+i+'">');
+                    for(var j = 0; j < 16; j++){
+                        //if(j%4==0){
+                            $('#row'+i).append('<td id="td'+j+i+'"><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
+                            if(j%4==0){
+                            $('#td'+j+i).addClass('four');
+                            }
+                        /*
+                        }else{
+                            $('#row'+i).append('<td><input class="checkbox css-checkbox step'+j+' row'+i+'" id="step'+j+' row'+i+'" type="checkbox"/><label for="step'+j+' row'+i+'" class="css-label"></label></td>');
+                        } 
+                        */  
+                        
+                    }
+                    $('#row'+i).append(
+                        '<div class="styled-select">'+
+                            '<select>'+
+                                '<option value="bd">Kick</option>'+
+                                '<option value="cowbell">Cowbell</option>'+
+                                '<option value="cymbal">Cymbal</option>'+
+                                '<option value="glitch">Glitch</option>'+
+                                '<option value="hhc">HiHat Closed</option>'+
+                                '<option value="hho">HiHat Open</option>'+
+                                '<option value="ht">Tom High</option>'+
+                                '<option value="mt">Tom Medium</option>'+
+                                '<option value="lt">Tom Low</option>'+
+                                '<option value="perch">Percussion High</option>'+
+                                '<option value="percl">Percussion Low</option>'+
+                                '<option value="rim">Rimshot</option>'+
+                                '<option value="shaker">Shaker</option>'+
+                                '<option value="snare">Snare</option>'+
+                            '</select>'+
+                        '</div>'
+                     );
+                    $('#row'+i).append('<input type="range" id="pitchRow'+i+'" min=".5" max="4" value="1" step=".1" name="power" list="sounds">');
+
+                    $('#steps').append('</div>');
+                }else{
+                    $('#steps').append('<tr>');
+                    for(var j = 0; j < 16; j++){
+                        $('#steps').append('<td class="row beatIndicator step'+j+' inactive" id="metronome"/>');
+                    }
+                    $('#steps').append('<tr/>');
+                }
+            }
+        }
+
+        function playSound(){
+            for (var i = 0; i < 4; i++){
+                if($('.step'+stepPos)[i].checked){
+                    //if(i == 0){
+                        $('body').css('background-color', randomColor());
+                    //}
+                    var sound = $('#row'+i+' select').val();
+                    this[sound].pause();
+                    this[sound].currentTime = 0;
+                    this[sound].playbackRate = $('#pitchRow'+i).val();
+                    //this[sound].doperShift = 100;
+                    this[sound].play();
+                }
+            }
+        }
+
+        function randomColor(){
+            var value = Math.random() * 0xFF | 0;
+            var grayscale = (value << 16) | (value << 8) | value;
+            var color = '#' + grayscale.toString(16);
+            return color;
+            //return(function(m,s,c){return (c ? arguments.callee(m,s,c-1) : '#') +
+            //s[m.floor(m.random() * s.length)]})(Math,'0123456789ABCDEF',5)
+        }
\ No newline at end of file

public/style.css

+
+        body{
+            margin-top:120px;
+            background-color:#1c1a1a;
+            font-family: 'Codystar', cursive;
+            color:#9d0000;
+        }
+
+        #container{
+            width:500px;
+            margin:auto;
+        }
+
+        .beatIndicator{
+            border: 1px solid black;
+            width: 8px;
+            height: 8px;
+            margin-right:8px;
+            margin-left:8px;
+            border-radius: 5px;
+            float: left;
+        }
+
+        .beatIndicator.inactive{
+            background-color:#303030;
+        }
+
+        .beatIndicator.active{
+            background-color:#9d0000;
+        }
+
+
+        .checkbox{
+            width:20px!important;
+        }
+        .four{
+            background-color:#3f0e0e!important;
+        }
+
+        input[type=checkbox].css-checkbox {
+            position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
+        }
+
+        input[type=checkbox].css-checkbox + label.css-label {
+            padding-left:20px;
+            height:20px; 
+            display:inline-block;
+            line-height:20px;
+            background-repeat:no-repeat;
+            background-position: 0 0;
+            font-size:20px;
+            vertical-align:middle;
+            cursor:pointer;
+
+        }
+
+        input[type=checkbox].css-checkbox:checked + label.css-label {
+            background-position: 0 -20px;
+        }
+        label.css-label {
+            background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_e735e2688b7676957c8e335c4c9e2311.png);
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        td{
+            vertical-align: middle!important;
+        }
+
+        .styled-select select {
+           background: #303030;
+           color:#d3d3d3;
+           padding: 5px;
+           font-size: 16px;
+           line-height: 1;
+           border: 0;
+           border-radius: 5px;
+           height: 25px;
+           -webkit-appearance: none;
+
+        }
+
+        #bpm{
+            width:100%;
+        }