Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lockers</title>

  <style>
    @import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
    @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

    *{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      margin:0;
      padding:0;
    }

    html{
      font-size: 16px;
    }

    body{
      font-family: "Oswald",Arial,Helvetica,sans-serif;
        padding:1em;
        background: #333;
        color:#f3c9a0;
    }

    table{
        font-family:'Source Code Pro';
        background: #ddd;
        color:#222;
        padding: .5em;
        margin-bottom: .5em;
    }

    td.open{
        color:#000;
    }

    td.closed{
        color:#aaa;
    }
  </style>

</head>
<body>

  <script>
    // Boolean. If true, the door is open, if false, it is closed
    var o = false,
        lockers = [o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o,
                   o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o,
                   o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o,
                   o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o,
                   o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o, o],
        count = lockers.length;

    function everyN(n){
        for(var i=n-1; i<count; i+=n){
            // inverse the state (open / closed)
            lockers[i] = !lockers[i];
        }
    }


    // Wait for the page to load and do this
    window.onload = function(){
        // custom function to display the lockers
        displayLockers('Initial state');
        everyN(2);
        displayLockers('Every Two');
        everyN(2);
        displayLockers('Every Two + Every Two = Initial state');
        everyN(3);
        displayLockers('Every Three');
        everyN(2);
        displayLockers('Every Three + Every Two');
    };


    function displayLockers(title){
        var s = ['<h1>'+title+'</h1>'];
        s.push('<table>');
        for(var i=0; i<5; i++){
            s.push('<tr>');
            for(var j=0; j<20; j++){
                s.push((lockers[i*5+j]?'<td class="open">o':'<td class="closed">c') +'</td>');
            }
            s.push('</tr>');
        }
        s.push('</table>');
        document.body.insertAdjacentHTML('beforeend', s.join(''));
        console.log(lockers);
    }
</script>

</body>
</html>