Night and Day

Step 1: Let’s make a simple button

Let’s start with something a little different. Let’s make a simple button.

• In the HTML tab, within the pagecontent <div>, add a new <button> tag and write some text in in between the tag ends. We added “click me” to ours. Maybe you can be more clever.

Our code looks like this:

• Take a look at your project preview now. See that little button? That’s what the button tag creates. It’s a quick and easy way to make things that look like buttons on web pages.
• Click it. Nothing will happen. That’s ok. The button tag just creates the button object. We haven’t told it what to do yet. We’ll change that in the next two steps.

Step 2: Make a color class

You can make buttons do pretty much anything like load images, animate objects, open new pages etc. However, for this project we want to turn night into day so we’ll focus on making that button change our background color first.

• Go to the CSS tab and add a new class. We named ours .black. Don’t forget to start your class name with a period, it let’s the code know you’re creating a class.
• Add a background-color property to that class. Ours, predictably, is black.

Our code looks like this:

Step 3: Time to open that JS tab…

So now we’re going to go someplace previous projects have not gone before: the JS tab. JS stands for Javascript. Javascript is a programming language that allows you to control how your application functions. You can use Javascript to respond to mouse clicks, perform calculations, or animate things on the screen.

Javascript is different from HTML and CSS in a big way. You might have noticed that HTML and CSS show exactly what’s written in between their tags and braces. They’re static, once they’re set a certain way, they stay that way until you go back and change them. Javascript, on the other-hand, can actually think. It can look at the what’s going on in a project, (what the mouse is doing, for example) and make calculations or run logical responses that change what’s written in the HTML and CSS. So with Javascript, you can change what things look like or how the they behave.

In more advanced projects, Javascript will actually do complex math and calculations to do things like challenge you to a game, animate shapes and Javascript is pretty powerful. It’s what we will use to make our simple button change our background-color.

Step 4: Look at how Javascript talks.

Take a look at the code that’s already in the JS tab.

It should look like this:

This probably looks kinda weird to you. Its syntax, how it’s written, is different than what we’ve been dealing with so far. So let’s walk through it.

What is happening in this text is actually what’s called a function and you can read it a little bit like a sentence if you know how.

document is a variable in javascript that gives you access to the objects and content within the web page you're viewing.

$(document).ready is an event that occurs on our document when it is fully loaded and ready to go. Quite often, we want to wait for a page to finish loading before we use javascript to manipulate its contents. The ready event makes it easy for our code to start working at just the right moment.

function() is how we define a code routine that can be run in javascript. In this specific scenario, it marks the beginning of what we call a callback, which is a function that gets called when an event (like the ready event) happens.

The curly braces, { and }, are also very important. They mark the beginning and the end of the function, and without them, your code won't run correctly. They are similar to the tags in HTML and the curly braces in CSS. Between these curly braces is where we will be writing our own code that will make that button do cool things.

If you read this code out as a sentence it would sound something like this: When the document is ready (fully loaded) then do the actions inside the braces.

To sum it up, this function waits for the web page to be ready for us to do our work. It’s key to all of our web projects that use Javascript because it’s what establishes that our HTML elements exist on the page, before we start to manipulate them in code. So don’t delete this. We will be writing our code inside of it.

Step 5: Get to know jQuery.

In programming, there are usually many different ways to get the same thing done. Instead of writing everything from scratch, we're using a handy tool called jQuery to help us with a few common tasks.

jQuery is what’s called a library, and in Coder it’s pre-loaded in the HTML page. If you go to the <head> tag and open it up you’ll see a line of code that that loads the jQuery library automatically:

It looks like this:

Loading this jQuery library gives us easy access to a whole bunch of useful things, such as events, CSS selectors, and animation effects that will make doing cool stuff simpler and much quicker than writing it out in raw javascript.

When you see $( ) wrapped around something, like around our document variable above, you're looking at jQuery. jQuery encapsulates HTML objects with functionality that allows these objects to be easily manipulated with code. You can do this without jQuery too, but it can sometimes be a bit more difficult. We will be using a handful of jQuery features to help keep our Night & Day project simple.

Step 6: Make it black

That took a while didn’t it? Now let’s make that button do something! You got the button, you’ve got the class you want to apply, you’ve got the JS tab open and you understand a tiny bit how it works. Let’s go!

• Inside the curly braces, let’s start a new function. Let’s think about what we want to do as a sentence: When the button is clicked then add the black CSS class to the HTML’s body.
• Let’s start writing that out using what we know about Javascript syntax from the initial $(document).ready function. We know that our button will be clicked so let’s start the event with the <button> as target inside the $(). Unlike document we’ll need to put the name of the object and classes in quotes from here on out. We can use the jQuery event .click to detect a mouse click on that button.

Our first line like this:

• Now let’s make that button click do something. We’ll need to identify the thing we want to affect with that click. In this case it’s the body. In between the .click {} add a new line targeting the body.
• Use the jQuery function .addClass (make sure you capitalize it correctly) to add the class .black to the body.
• Make sure you finish off each function and statement you make with closed (),{}, and a ; these are the things that tell the browser a function or statement is finished.

All our code looks like this right now:

• Go back the preview mode. Click the button. Did the body turn black?

Step 7: Toggling with if/then/else

Right now our button does one thing then stops. Let’s change that. Remember how we said that Javascript can see what’s going on and actually think for us? Well let’s give it something to think about and use rules and words like “if” and “else” to turn our button into a toggle that can switch between black and white. We will be creating a function that checks to see if the body has a certain class, if it does, it will remove that class and add a new one, if it doesn’t then it removes and adds the inverse classes.

• Let’s first make a new CSS class that we’ll toggle between. We made ours “.white”
• In the JS tab go ahead and erase the following code. We’re going to replace it:
  $( 'body' ).addClass( 'black' );
• Let’s write an ”if/then/else” statement within the click function. This is exactly what it sounds like. It’s a statement that will set up some conditional rules for our button action results.

It looks like this (we will be putting new stuff in the curly braces and parentheses):

• Let’s start our “if” statement. We want to check to see if the body has the .black” class. To do that we’ll use the convenient jQuery bit: .hasClass.

Our code looks like this:

• Now let’s define what it should do if it does have that class. This is the “then” part of our statement. Anything in the {} can be read as “then.” We want to take the current class away and add a different one. We’ll use the .removeClass and .addClass jQuery functions to do that.

Our code looks like this:

• Now we have one last thing to do. If we leave it like this then it will only toggle once. We need to set up an “else” statement give it something to do when if isn’t true and keep it bouncing between black and white on every click. This is like saying “otherwise” in a sentence. In this case, we know that if something doesn’t have the .black class it will have to have the .white class. We need to make our else statement turn it .black class.

Our final code looks like this:

• The way this would read if it was a sentence would be something like this: When button is clicked, check to see if the body has the black class applied to it, if it does, then remove that class and add white, otherwise, remove the white class and add black.
• Go back to the preview mode and see if it toggles back and forth!

Step 8: Clean it up and hang the sun (and moon)

Alright, now we have all the knowledge and code we need to turn night into day and back again! However, we need to step back a bit. What we’ve made up to this point was a prototype, it has the basics but it doesn’t really look that good. We’ll need to change some elements to get to where it needs to be. We’ll begin by getting rid of that default button we’ve created and making our own, much nicer-looking, button using a plain-old <div>.

• It helped us out a lot so far, but let’s delete the <button> tag in the HTML. We will make our own buttons using <div>. This will give us a little more control and freedom in styling it. Don’t worry, all the same JS functions we used on the <button> we can use on the <div>.
• Let’s also delete the .pagecontent class in the CSS tab and its corresponding <div>. Be sure to delete the corresponding closing tag!
• In the CSS tab make a new ID for our “button.” Since it will turn into both the Sun and Moon let’s call it something neutral like #orb. Pick a height and width for it. Make sure they are the same number to keep it round. We made ours 300px.
• To make a <div> into circle add the border-radius property and turn it up to 100%. Neat trick, huh? It still technically has corners and will settle and position as a box but visually it looks like a circle, which is perfect for our purposes.
• We also want to position our #orb smack dab in the center and add a bit of padding to the inside in anticipation of some later steps. If you want to see what it looks like, add a temporary background-color.

Our code looks like this:

• Let’s also make a new CSS ID for the sky and set it to take up all our background. Naming it #sky and making separate from thebody will make it a little bit easier to keep track of the logic in JS tab when we get to that point.

Our code looks like this now:

• Set up a <div> for the #orb and #sky in the body

Our HTML looks like this:

Step 9: Make Styles To Switch

Now let’s make the CSS classes that will turn our #orb into the .sun and .moon and our #sky into .day and .night.

• Let’s do the #orb classes first. Make two new classes name one .sun and one .moon.
• Give them background-color and border properties that fit their names.

Our code looks like this:

• Now let’s do the same for the #sky. Add a .night and .day class that will change the #sky from dark to light.

Our code looks like this:

• Let’s go into the HTML and apply our classes to their relevant <div>. Let’s start with the daytime class and make that our initial view when the page loads.

Our code looks like this:

Step 10: “Hover” craft.

Not all interactive elements need to be done in Javascript. CSS can also style links and button with properties like “hover” (what it looks like when you mouse over an object), “active” ( what it looks like when you press or click down on an object) and “visited” (what it looks like when a object or link has been clicked). Let’s add a hover to our .sun and .moon classes to show that they are clickable.

• Let’s do the .sun: hover first. Add a new line in your CSS. For a selector, write the name of the class we want to add the the hover. Then add the text : hover {}.
• Between the braces add a thicker border with the same color as the .sun class.

Our code looks like this:

• Save and go to your preview. See what happens when you mouse over the Sun? Does the border get thicker?
• Now add a hover to the .moon class using the same method.

Step 11: Sun/Moon Toggle

Now let’s get back into that Javascript. It should be straight-forward since will be reusing the code we already wrote. We just need to change some names!

• Let’s first target that .click action to our newly made #orb. This will turn it into a button.
• Replace the ‘button’ text inside the $() with ‘#orb’. Because we’re targeting a CSS ID we need to add that little # symbol between the quotes.
• Next change the the object that the our new button will toggle. We’re going to have it toggle itself. Replace body with '#orb'.
• Lastly, let’s replace the classes we’re toggling from .white and .black to our new .sun and .moon. Don’t include the period when identifying the class but make sure it’s in quotes.

Our code looks like this:

• Save your code and check the preview. You should see the Sun become the Moon when you click it.

Step 12: Day/Night Toggle

Now let’s do the same thing to the night sky.

• Immediately below the ‘#orb’ if/then/else statement, add a new if/then/else statement. Go ahead and copy and paste the one you just made.
• Change the targets to be ‘#sky’ and the classes to be ‘day’ and ‘night’.
• Make sure that the ‘day’ replaces ‘sun’ and ‘night’ replaces ‘moon’ so the classes are synced.

Our code looks like this:

• Save the code and test it out.

Step 13: Put a man in the moon

Now we’ve got a pretty good sun and moon going and can switch between night and day with a click but something doesn’t feel right. Let’s make our moon a little bit more “moon-like” and with a few more circles for the lunar mare, or moonspots, that make up the what some people call the Man in the Moon.

We will be making them the same way we made our original #orb. But instead of toggling between two styles we will simply add and remove one. The catch is that we will be doing it to three different objects.

• Let’s start by making our moonspots CSS IDs. We will be making three moonspots. Other than height and width, they will all have the same properties. Make the three 40px, 80px, and 180px in diameter.
• We will be setting them inside our <div id= "orb"> so put a little margin on them and float: right so that don’t run over or butt into each other.

Our first moonspot looks like this. You can use this to make the others:

• Now let’s make a class that will make them visible when the moon is up. All we need to do is add a background-color. We’ve made ours match our moon’s border color.

Our class looks like this:

• And of course let’s place them inside our <div id= "orb"> in the HTML.

Our HTML looks like this:

• Lastly, as part of that .click event that we’ve set to swap all those other classes, let’s add a series of new if/then/else sets that will add and remove the visible class at the appropriate times. You’ll need to add one for each of our moonspot <divs>.

Our Javascript looks like this:

That’s it! You’re done. How did it turn out? How does it look? How does it feel to have so much power?