Coder
<project> steps(13)

Night and Day

What's CODER?
Download Complete Project 4k | .zip file

Description

Ever wish you could control the universe? Well now you can pretend with this project. Change day into night and back again with the click of a mouse and learn a whole new programming language along the way.

A great project for: Sunbathers, night owls, and anyone that is looking to make big changes with the push of a button.

Medium

Skills Needed: Basic HTML, Basic CSS.

Skills Learned: Introduction to Javascript, Introduction to jQuery, Basic Interaction, CSS Circles, Buttons

Submitted By: Coder Team

Are you ready to start clicking?

A big part of making cool web things is interacting with them. However, if you’re starting from scratch or haven’t made anything with CSS and HTML it might be better to start with some earlier projects and pick up the fundamentals of basic coding before we go any further.

Step 1: Let’s make a simple button


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

Our code looks like this:

<div class="pagecontent"> <button>click me</button> </div>

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.

Our code looks like this:

.black { background-color: black; }

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:

$(document).ready(function() { //This code will run after your page loads });

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:

<script src="/static/common/js/jquery.min.js"></script>

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!

Our first line like this:

$('button').click(function(){ });

All our code looks like this right now:

$( document ).ready( function() { $( 'button' ).click( function() { $( 'body' ).addClass( '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.

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

$(document).ready( function() { $('button').click(function(){ if (thisThingIsTrue) { doThisThing } else { doThisOtherThing } }); });

Our code looks like this:

$(document).ready( function() { $('button').click(function(){ if($('body').hasClass('black')) { doThisThing } else { doThisOtherThing } }); });

Our code looks like this:

$(document).ready( function() { $('button').click(function(){ if($('body').hasClass('black')) { $('body').removeClass('black').addClass('white'); } else { doThisOtherThing } }); });

Our final code looks like this:

$(document).ready(function() { $('button').click(function(){ if ($('body').hasClass('black')) { $('body').removeClass('black').addClass('white'); } else { $('body').removeClass('white').addClass('black'); } }); });

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

Our code looks like this:

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

Our code looks like this now:

#sky { height: 100%; width: 100%; }

Our HTML looks like this:

<body> <div id= "orb"></div> <div id= "sky"></div> </body>

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.

Our code looks like this:

.sun { background-color: #ffdd00; border: 10px solid #f1c40f; } .moon { background-color: #bdc3c7; border: 10px solid #eaeff2; }

Our code looks like this:

.night { background-color: #2c3e50; } .day { background-color: #37d8e6; }

Our code looks like this:

<body> <div id= "orb" class= "sun"></div> <div id= "sky" class= "day"></div> </body>

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.

Our code looks like this:

.sun:hover { border: 20px solid #f1c40f; }

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!

Our code looks like this:

$('#orb').click( function() { if ($(this).hasClass('sun')) { $(this).removeClass('sun').addClass('moon'); } else { $(this).removeClass('moon').addClass('sun'); }

Step 12: Day/Night Toggle


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

Our code looks like this:

if ($('#sky').hasClass('day')) { $('#sky').removeClass('day').addClass('night'); } else { $('#sky').removeClass('night').addClass('day'); }

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.

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

#moonspot1 { height: 40px; width: 40px; border-radius: 100%; float:right; margin: 20px; }

Our class looks like this:

.visible { background-color: #eaeff2; }

Our HTML looks like this:

<div id= "orb" class= "sun"> <div id= "moonspot1"></div> <div id= "moonspot2"></div> <div id= "moonspot3"></div> </div>

Our Javascript looks like this:

if ($('#moonspot1').hasClass('visible')) { $('#moonspot1').removeClass('visible'); } else { $('#moonspot1').addClass('visible'); }

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

Bonus Rounds

Now that you can change day to night, let’s see what else we can put under the control of your clicks.

Coder Projects to Try Next

Having fun with Javascript? Try making a musical instrument or creating a digital clock with the projects below.

<project>

Music Boxes

Let’s turn it up. This project will transform your browser into a simple instrument that you can use to make music.

Open Project
Medium
<project>

Digital Clock

What time is it? You’ll finally be able to answer that question after you’ve built this simple clock.

Open Project
Medium