March 18, 2024 - Randomizing Code (JS)

Here's my favorite code to display a random message or picture on your website each time the page is reloaded. I don't actually know Javascript (or anything other than HTML) but I stole this code off of google and fell in love with it:

<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>

This code creates an array (list of things) and mixes it up so that when you tell the script to write a certain entry in the array it gives you a random thing out of the array. I also have code on my website that gives me one random thing out of a set, but I prefer this code because it can be used to create many random selections that don't repeat.

Tips:

• AThe stuff you put in the array and document.write quotation marks is going to come out as html code
• With any code you're putting in "" in javascript change the " to '
• The "" + arrayName[0] can go on forever and you can use another number later to select another random thing different than the first
• You can change the array name to whatever you want for organization

Example

<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.JPG' alt='ommited for clarity' width='100%'>"; picc[6] = "<img src='Images/Printcha.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>

Characters from: Rainy's Home on the Wayback Machine
Icons from: Diego Vanilla on Deviant Art
Page Dividers and Backgrounds from: Cinni's Dream House on NeoCities

 My Other Coding Projects:

Sidebar Page Layout

Gradient Page Layout

Genshin Themed Todo List

Test Click-Through Game

HTML Tips from the Lists page:

• When you're working with divs inside divs give them a background color so you can see what's going on
• Your css is going to be messy, embrace it
• Changing a and a:hover (how links look) makes your website look less generic
• #div::-webkit-scrollbar {
  display: none;
  }
• If you want to code something complicated and you don't know how google the situation your in just start copy pasting different pieces of code
• Look at other people's source code (right click, inspect) and copy small bits you like
• Learn the position property
• Use hexcode colors (#ffffff) instead of rbg (0, 0, 0)
• overflow-y: scroll;
• p tags are for individual paragraphs (don't abuse br tags)
img {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
• Learn how to type properly >~<
• Have fun!

How to make this div

#pasteldiv {
margin: 20px; /* buffer around div */
padding: 5px; /* buffer around stuff inside div */
border: 3px dotted blue;
border-radius: 20px;
width: 95%; /* works because of my table layout */
height: 200px;
overflow: scroll;
background-image: linear-gradient(lavender, pink, wheat);
background-attachment: local; /* makes the background scroll with this element */
}

#pasteldiv::-webkit-scrollbar {
display: none; /* hides scroll bar */
}

Falling objects example

Falling objects html code:

<script> for (let i = 0; i < 34; i++) { // i<34 makes the code run 33 times var scrollamount = Math.floor(Math.random() * 5) + 1; // sets how fast an image falls to a random number between 1 and 6 var scrolldelay = Math.floor(Math.random() * 101); // sets the pause before an image starts to fall to a random number between 0 and 100 var left = 0 + 3*i; // sets left for each image to 3 percent more than last image starting at zero (if you change this value edit the for loop to run enough times to end around 100 document.write("<marquee behavior='scroll' direction='down' scrollamount='" + scrollamount + "' scrolldelay='" + scrolldelay + "' style='position:absolute; left:" + left + "%; top:0px; width:5; height:700px;'><img src='Images/sparkleheart.gif'></marquee>"); //change the height if it's too long or short // code that prints each value of scrollamount, scrolldelay, and left to help adjust the code // delete this if you don't need it //const para = document.createElement("p"); //const node = document.createTextNode("Scrollamount = " + scrollamount + " scrolldelay = " + scrolldelay + " left = " + left + "."); //para.appendChild(node); //const element = document.getElementById("// id of place you want this to print"); //element.appendChild(para); } </script>