function drawHeader(targetDiv) {
    // Handle the resize event
    var windowWidth = $(window).width(); //in px
    var digitWidth = 20;
    var numOfDigits = Math.floor(windowWidth / digitWidth);
    
    //Remove all children
    while (targetDiv.firstChild) {
        targetDiv.removeChild(targetDiv.firstChild);
    }
    
    for (var i = 0; i < numOfDigits; i++) {
        var digitDiv = document.createElement("div");
        digitDiv.style.cssFloat = "left";
        digitDiv.style.backgroundColor = "gray";
        digitDiv.style.height = (digitWidth - 2).toString() + "px";
        digitDiv.style.width = (digitWidth - 2).toString() + "px";
        digitDiv.style.border = "1px solid black";
        
        targetDiv.appendChild(digitDiv);
    }
}

// 1. Draw the header when the page loads
$(document).ready(function() {
    var headerDiv = $("#header-js")[0];
    headerDiv.style.backgroundColor = "red";
    headerDiv.style.height = "20px";
    headerDiv.style.width = "100%";
    
    drawHeader(headerDiv);
});

// 2. Update the header when the page resizes
$(window).resize(function() {
    var headerDiv = $("#header-js")[0];    
    drawHeader(headerDiv);
});
@@ -1,16 +1,422 @@
+function colorForIndex(index) %7B%0A    switch(index %25 10) %7B%0A        case 0: return %22black%22;%0A        case 1: return %22lightgray%22;%0A        case 2: return %22#3f51b5%22;%0A        case 3: return %22#ffeb3b%22;%0A        case 4: return %22#d32f2f%22;%0A        case 5: return %22#388e3c%22;%0A        case 6: return %22#ec407a%22;%0A        case 7: return %22#ffc107%22;%0A        case 8: return %22#e65100%22;%0A        case 9: return %22#880e4f%22;%0A    %7D%0A%7D%0A%0A
 function drawHea
@@ -428,24 +428,24 @@
 argetDiv) %7B%0A
-
     // Handl
@@ -608,16 +608,17 @@
  %0A    //
+ 
 Remove a
@@ -867,25 +867,24 @@
  %22left%22;
-%0A
         
 digitDiv
@@ -879,48 +879,8 @@
     
-digitDiv.style.backgroundColor = %22gray%22;
 %0A   
@@ -911,36 +911,32 @@
 ht = (digitWidth
- - 2
 ).toString() + %22
@@ -986,12 +986,8 @@
 idth
- - 2
 ).to
@@ -1015,48 +1015,192 @@
     
-digitDiv.style.border
+%0A        digitDiv.innerText = (i %25 10).toString();%0A        digitDiv.style.color = colorForIndex(i);%0A        digitDiv.style.fontSize
  = %221
+8
 px
- solid black
+%22;%0A        digitDiv.style.textAlign = %22center
 %22;%0A 
@@ -1322,32 +1322,32 @@
 dy(function() %7B%0A
+
     var headerDi
@@ -1374,53 +1374,8 @@
 0%5D;%0A
-    headerDiv.style.backgroundColor = %22red%22;%0A
     

Change header to show colored numerals