Just for fun (Javascript >> Matrix)

Lets build a Matrix like effect today
    As the title is. This is just for fun. 

You can get all the code on my github https://github.com/Kimbugwerogers/matrix-javascript-

First this is how the page will look like

 
As you can see. Only one side will be populated.  The reason I want each side to process the effect definitely . Or you can think of a different way to do it  in the blue box.

Ok the Html looks like this (index.html)
<!doctype html>
<html>
    <head>
        <title>Matrix</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Hello</h1>
        <h2 id="time">Time</h2>
        
        <div class="sty">
            <div class="sty1" id="sty1">
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
            </div>
            <div class="sty1" id="demo">0</div>
        </div>
        
        <script src="time.js"></script>
        <script src="sty1.js"></script>
    </body>
</html>

You will notice that i separate the js for time and for the matrix like effect , the reason is when i tried putting that js in the same page, there was an effect . You can try it out and see 

Ok now Css (style.css)

body{
    background: black;
    
}

h1{
    color: red;
}

h2{
    color: green;
}

h1, h2 {
    text-align: center;
}

.sty{
    display: flex;
}

.sty1{
    height: 80vh;
    width: 90vh;
    margin-left: 7vh;
}

.sty1:nth-child(1){
    background:green;
}

.sty1:nth-child(2){
    background:blue;
}

And the time js (time.js)
let tm = document.getElementById("time");

setInterval(()=>{
    let date = new Date;
    tm.innerHTML = date;
}, 1000);


And matrix effect js (sty1.js)
setInterval( () => {
    //get the dom reference
    let contentId = document.getElementById("sty1");

    //toggle
    contentId.innerHTML == `
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
    ` ? 
    contentId.innerHTML = `
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010  
101010101010101010101010101010101010101010101010101010101010101010101010101
    `:
    contentId.innerHTML = `
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
101010101010101010101010101010101010101010101010101010101010101010101010101
010101010101010101010101010101010101010101010101010101010101010101010101010
    `;
}, 1000);





Comments

Post a Comment

Popular posts from this blog

AC Light switch using relay

Image
  There are alot of circuits on how to do this. Most of them require you to place the photosensor between the base (B) of the transistor and the Emitter (E). But i have found this method not to be working well so i decided to place the photosensor between the resistor and the power supply (DC). So how is this method different. First the photosensor is already sending power even at low lighting. So if the source is 12v, that means that power though the photosensor under low light is approximately 8v. This means that 8v won't be able to course an effect on the relay since the relay is 12v based. When a bright light is put in a close distance with the photosensor, There will be low resistance on the photosensor hence the desired power which will follow to the relay The point where I have labeled as " AC power out" is the off point at default on the relay. What I mean is that the point with AC power out is the one is not connected inside of  the relay at first. I have used a ...
Read more

Blinking LED

Image
 This is a simple blinking led using a bc547 transistor. As it is in the diagram. You will need 1 transistor , 1 LED , Capacitor and a Resistor. This will work well on a 12v battery. Other types of batteries may not do the trick. The value of the capacitor will determine the blinking speeds.
Read more

NOT gate (inverter)

Image
This is a logic gate. We use one transistor (NPN) .  And the boxes you see are resisters . It really doesn't matter which values they are. A NOT gate is also called an inverter coz it works in opposite with it's input.  When there is an in put on A , Y will have no out put. And when there is no input on A , then Y will have an output. How to use it. Connect a power source (positive) of your value on the + and (negative) to the earth symbol. Without connecting a positive of the same power source on A , Y will have an output.  When you connect the same positive of the power source to A , Y will have no power.   
Read more