✩ 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; }

Cipher Encoder

This is code I used to create different ciphers for my Secret Garden page. When you enter your text it encodes the letters according to a simple substitution cipher.

HTML code:

<script type="text/javascript"> function cipherText() { var text = document.getElementById("cipher").value; var text = text.toLowerCase(); var text = text.replaceAll("a", "@"); var text = text.replaceAll("b", "d"); var text = text.replaceAll("c", "k"); var text = text.replaceAll("d", ":"); var text = text.replaceAll("e", "="); var text = text.replaceAll("f", "e"); var text = text.replaceAll("g", ">"); var text = text.replaceAll("h", "#"); var text = text.replaceAll("i", "("); var text = text.replaceAll("j", "{︎"); var text = text.replaceAll("k", "["); var text = text.replaceAll("l", "~"); var text = text.replaceAll("m", "}︎"); var text = text.replaceAll("n", "!"); var text = text.replaceAll("o", "*"); var text = text.replaceAll("p", "&"); var text = text.replaceAll("q", "<"); var text = text.replaceAll("r", ")"); var text = text.replaceAll("s", "$"); var text = text.replaceAll("t", "+"); var text = text.replaceAll("u", "%݁"); var text = text.replaceAll("v", "^"); var text = text.replaceAll(",", "l"); var text = text.replaceAll(".", "a"); var text = text.replaceAll("w", "."); var text = text.replaceAll("x", "]"); var text = text.replaceAll("y", ";"); var text = text.replaceAll("z", "?"); var text = text.replaceAll("!", "b"); var text = text.replaceAll("?", "c"); var text = text.replaceAll("(", "x"); var text = text.replaceAll(")", "y"); document.getElementById("output").innerHTML = text; } </script> <form> <textarea id="cipher">Enter your text here</textarea> <input type="button" value="Submit" onclick="cipherText();"/> </form> <textarea id="output">=b+=y ;*%݁y +=]+ #=y=</textarea>

Translate Text to Cipher:

This is an example cipher you could use to encode text.

=b+=y ;*%݁y +=]+ #=y=

Enter your text here

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>