Note: If the code isn't working correctly, check to see if you have all the necessary CSS classes/IDs. 

Step 1: Make a simple button 

HTML:
	<div class="pagecontent">
        <button>click me</button>
	</div>
---------------------------------------
Step 2: Make a color class

CSS:
	.black {
		background-color: black;
	}
---------------------------------------
Step 3: Set up your JQuery library

HTML: (Inside the head tag)
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
---------------------------------------
Step 4: Javascript/JQuery

HTML: (Right before the closing body tag)
	<script>
		$(document).ready(function() {
			//This code will run after your page loads
		});
	</script>
---------------------------------------
Step 4: Make it black

HTML/JQuery: (Inside your .ready function from Step 4)
	$('button').click(function(){
	});
	
HTML/JQuery: (Inside the .click function you made above)
	$( 'body' ).addClass( 'black' );
	
Now test your code by clicking the button on your page. Does the background turn black? Good. Now we'll write code to make it switch between night and day
---------------------------------------
Step 5: Toggling with if/then/else

HTML/JQuery: (Remove the .addClass( 'black' ) line and replace it with this)
	if ($('body').hasClass('black')) {
        $('body').removeClass('black').addClass('white'); //if the background is black, it will change to white
    }
    else {
        $('body').removeClass('white').addClass('black'); //if the background is white, it will change to black
    }

Now test your code by clicking the button on your page. Does the background change between white and black? Good. Now let's add a sun and a moon.
---------------------------------------
Step 5: Adding the sun and moon

HTML: 
(delete the button tag we created in step 1)

CSS: 
First, add a CSS ID for our sun/moon:
	#orb {
		height: 300px;
		width: 300px;
		border-radius: 100%;
		padding: 20px;
		margin: auto;
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		background-color: #blue;
	}
CSS:	
Then add a CSS ID for the sky:
	#sky {
		height: 100%;
		width: 100%;
	}

HTML: 
Add divs foor the sky and sun/moon:
	<div id= "orb"></div>
    <div id= "sky"></div>
---------------------------------------
Step 6: Make styles to switch

CSS:
Add classes to change the color of the outline and fill of the sun/moon	
	.sun {
		background-color: #ffdd00;
		border: 10px solid #f1c40f;
	}
	.moon {
		background-color: #bdc3c7;
		border: 10px solid #eaeff2;
	}
	
CSS:
Then add classes to change the background color for night and day
	.night {
		background-color: #2c3e50;
	}
	.day {
		background-color: #37d8e6;
	}
	
HTML:  
Add classes to the divs for "orb" and "sky" in your HTML
	class= "sun"
	class= "day"
---------------------------------------
Step 7: Add hover ability

CSS: Add a :hover sun class
	.sun:hover {
		border: 20px solid #f1c40f;
	}
	
Now do the same thing for the moon.
---------------------------------------
Step 8: Sun/Moon toggle

HTML/JQuery:
Change 'button' to '#orb'
Change white and black to sun and moon

Now test your code. Does the sun become the moon when you click it? Does the moon become the sun when you click it? Good. Now let's change the background colors, too.
---------------------------------------
Step 9: Day/Night toggle

HTML/JQuery:
Below the #orb if/then/else statement from Step 8, create another if/then/else statement for the day and night classes.

Now test your code. Does the sun have a light blue background? Does it switch to a dark blue background with a moon when you click the sun? Good. Now let's make that moon look better.
---------------------------------------
Step 10: Add some moon craters

CSS:
Create three moonspot IDs. One that is 40px wide (code below), one that is 80px in diameter, and one that is 180px in diameter.
	#moonspot1 {
		height: 40px;
		width: 40px;
		border-radius: 100%;
		float:right;
		margin: 20px;
	}

CSS:
Then make a class to make them visible when the moon is visible
	.visible {
		background-color: #eaeff2;
	}

HTML:
Now add the moonspot IDs to the orb div in the HTML. (This is only the code for the first moonspot)
	<div id= "moonspot1"></div>

Make sure your moonspots are arranged nicely. Use this image as a reference: http://i.imgur.com/3GFCJ35.jpg
---------------------------------------	
Step 11: Moonspots aren't on the sun...
HTML/JQuery:
Finally, set the moonspots to only show then the moon is visible. (This is the code for the 40px wide moonspot only)
	if ($('#moonspot1').hasClass('visible')) {
		$('#moonspot1').removeClass('visible');
	} 
	else {
		$('#moonspot1').addClass('visible');
	}

Now test your code. If everything worked out correctly, you're done! Turn your project in and try Part 2 of the Sun/Moon project.