Edit on
<!--I added an element that should contain the pun of the day. I gave that element an id called "punGoesHere".-->

<h1>The Pun O' the Day should appear below</h1>

<p id="punGoesHere"></p>

<h1>The Pun O' the Day should appear above</h1>

/*I can style the #punGoesHere element like I'd style any other element*/

#punGoesHere {
	text-align: center;
	font-size: 20px;
	color: maroon;
	font-variant: small-caps;
}
// This line finds the element with the ID name "punGoesHere". It keeps a memory of what that element is in a *variable* named "punSpot". So if I want to use the element, I just need to call for "punSpot"

var punSpot = document.getElementById("punGoesHere");

// Here I'm creating another variable. This one is named "listOfPuns". This variable contains all of the puns in an *array*. An array is a list of things surrounded by square brackets [] and separated by commas

// Since our puns are sentences, JavaScript considers them *strings*, and strings need to be surrounded by quotation marks

var listOfPuns = [
	"What time did the man go to the dentist? Tooth hurt-y.",
	"Did you hear about the guy who invented Lifesavers? They say he made a mint.",
	"Why did the Clydesdale give the pony a glass of water? Because he was a little horse!",
	"Why do chicken coops only have two doors? Because if they had four, they would be chicken sedans!",
	"What do you call a cow with no arms and no legs? Ground beef!",
	"What do you call an alligator that wears a vest? An investigator.",
	"What do you call a fish with two knees? A tunee fish!"
];


//Here I'm creating another variable called "todaysPun". This variable contains some JavaScript *methods* or actions that pick a random pun from our listOfPuns and then stores that pun into todaysPun. Scroll down to the end of the code for an explaination.

var todaysPun = listOfPuns[Math.floor(Math.random() * listOfPuns.length)];
	 

// Now I'm putting all of our variables together. This next line says when the *window* of your web page loads, do this *function*. A function is a set of instructions that we write.

// The function here is called "addPunToSpot" because it adds our pun to the right spot in the HTML.

window.onload = function addPunToSpot(){
	
	// Here's the instructions inside of the function. It takes the punSpot we identified above. It adds text into the spot in the HTML. The text that gets added is todaysPun, or whatever pun we stored in the todaysPun variable above. Now our pun appears on the webpage! 	
	
		punSpot.textContent = todaysPun;	
	
}


/*

Here's an explaination of how the random pun was choosen. Thanks to this site for helping me understand: https://zenscript.wordpress.com/2013/11/23/how-to-pick-a-random-entry-out-of-an-array-javascript/

First, keep in mind that the first position in JavaScript is 0 and we'll always start counting from 0, not 1. So in our list of puns we have 7 puns, but if we count we'll count them from 0 to 6.

Math.random() gives us a random number between 0 and .999
listOfPuns.length finds the number of puns we have in our list

We multiply Math.random() * listOfPuns.length and that gives us a number that represents a spot in our list, along with some unneeded decimals.

When we put our equation into Math.floor(), Math.floor() removes those uneeded decimals and just gives us a spot in our list. The pun at that spot becomes our todaysPun.

Here are some examples of what the equation does:

Random number 0.003 * Number of puns in our list 7 = 0.021 and then Math.floor() gives us 0, or "What time did the man go to the dentist..."

Random number 0.222 * Number of puns in our list 7 = 1.554 and then Math.floor() gives us 1, or "Did you hear about the guy who invented Lifesavers..."

Random number 0.539 * Number of puns in our list 7 = 3.773 and then Math.floor() gives us 3, or "Why do chicken coops only have two doors..."

Random number 0.997 * Number of puns in our list 7 = 6.979 and then Math.floor() gives us 6, or "What do you call a fish with two knees..."

*/

/* 

I listed more sources that helped me in comments in Part 1: https://codepen.io/AreliaJones-CoderSpace/pen/EjOZbY

Also check out Part 2 where I added a variable for the pun instead of adding specific text: https://codepen.io/AreliaJones-CoderSpace/pen/PqxRxE

*/
Rerun