The Matrix

by Brock Callahan

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
  width: 10px;
  height: 500px;
  float: left;
  background-color: green;
  color: #fff;
  overflow-wrap: break-word;
}

div:nth-child(2n) {
  background-color: #333;
}

JavaScript

let divs = document.getElementsByTagName("div");


for (let j = 0; j < 29; j++) {
    	for (let i = 0; i < divs.length; i++) {
        let rand = Math.floor(Math.random() * (2-0) + 0);
        divs[i].innerText += rand;
    }
}

/* This method borrowed from: 
http://stackoverflow.com/questions/1431094/how-do-i-replace-a-character-at-a-particular-index-in-javascript */
String.prototype.replaceAt=function(index, character) {
    return this.substr(0, index) + character + this.substr(index+character.length);
}

setInterval(function() {
    let ceil = divs.length;
    let randDiv = Math.floor(Math.random() * (ceil-0) + 0);
    let randPos = Math.floor(Math.random() * (28-0) + 0);
    let randBinary = Math.floor(Math.random() * (2-0) + 0);
    divs[randDiv].innerText = divs[randDiv].innerText.replaceAt(randPos, randBinary);
}, 1);