✩ Coding Projects ✩

Back

Coding Tip:

Use these css attributes to make your pixel art not blurry:

image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;

Falling Stars

This is the code I put on my page to generate the randomly falling stars in the background. You can change the text inside the p tags in the document.write section to anything you want.

HTML code:

<script> for (let i = 0; i < 34; i++) { var scrollamount = Math.floor(Math.random() * 5) + 1; var scrolldelay = Math.floor(Math.random() * 101); var left = 0 + 3*i; document.write("<marquee class='rain' behavior='scroll' direction='down' scrollamount='" + scrollamount + "' scrolldelay='" + scrolldelay + "' style='position:fixed; left:" + left + "%; top:0px; width:5; height:700px;'><p id='star-color'> .<br> .<br>+<br>✩</p></marquee>"); //Script to print out marquee variables for testing // //const para = document.createElement("p"); //const node = document.createTextNode("Scrollamount = " + scrollamount + " scrolldelay = " + scrolldelay + " left = " + left + "."); //para.appendChild(node); //const element = document.getElementById("_______div id________"); //element.appendChild(para); } </script>

CSS code:

#star-color { color: #9AAFCD; } .rain { z-index: -1; }

Randomizing Page Elements

This code can be used to randomize an array of things (pun intended) from text to pictures to entire divs. It uses an array to create a numbered list of html code snipets that are mixed up, so that when it prints the first entry on the list it's a random element. If you pull on multiple code snipets in the array they will all be different.

HTML code:

<script language="javascript"> var arrayName = new Array (); arrayName[0] = "put one set words, pictures or code you want as an option here"; arrayName[1] = "put another set words, pictures or code you want as an option here"; arrayName.sort(() => Math.random() - 0.5); document.write("<p>Your randome thing is: </p>" + arrayName[0] + "<p>!</p>"); </script>

Random Picture Table

This is an example of the randomizing code used to create a table of different randomly selected pictures.

<SCRIPT LANGUAGE="JAVASCRIPT"> // sets the six images that could be in the table var picc = new Array (); picc[0] = "<img src='Images/Snowcha.png' alt='ommited for clarity' width='100%'>"; picc[1] = "<img src='Images/MLPcha.png' alt='ommited for clarity' width='100%'>"; picc[2] = "<img src='Images/Flowcha.png' alt='ommited for clarity' width='100%'>"; picc[3] = "<img src='Images/Willicha.png' alt='ommited for clarity' width='100%'>"; picc[4] = "<img src='Images/Brightcha.png' alt='ommited for clarity' width='100%'>"; picc[5] = "<img src='Images/fshcha.jpeg' alt='ommited for clarity' width='100%'>"; picc[6] = "<img src='Images/Printcha.png' alt='ommited for clarity' width='100%'>"; picc[7] = "<img src='Images/Cyacha.png' alt='ommited for clarity' width='100%'>"; picc[8] = "<img src='Images/Berricha.png' alt='ommited for clarity' width='100%'>"; // mixes them up picc.sort(() => Math.random() - 0.5); // adds html code that creates a table and adds the first four pictures from the array in it document.write("<table><tr><td>"+ picc[0] + "</td><td>" + picc[1] + "</td></tr><tr><td>" + picc[2] + "</td><td>" + picc[3] + "</td></tr></table>"); </script>