Assemble a CSS Clock

PR0 Challenge 7.2 [80pts]

Adapted from CSS Animation at cssanimation.rocks


Learn the basics of Cascading Style Sheets (CSS) the fundamental framework for styling web pages by assembling a basic, animated clock!

Whereas HTML tags are used for navigation and to give a web page structure, web developers and designers use CSS to give a website it’s look and feel.

Imagine HTML to be the concrete, wood, metal and glass used to construct the foundation, frame, walls floors and windows of a building. Now imagine CSS is to be the paint, wallpaper, decorations, and furniture that make a house a home!


STEP 1: Create a Clock Thimble

Start by creating a clean-slate Thimble Project. Make sure to:

Visit thimble.mozilla.org
Log in to Webmaker (top-right corner)
Click the "Start a new project from scratch" button;
Title your project "Your Name's CSS Clock":   click at the top-left by the  

Once your project is setup, save the clock face Scalable Vector Graphic (SVG) shown below to your computer and then upload it to your thimble project.

Click on the blue button below to view the clock face SVG page, then go to the File menu and select File > Save Page As... to save the file.
View Simple Clock Face SVG File

You should now have the basic files in your Thimble project that we'll need to create a simple web page that displays the clock face:

  1. index.html
  2. style.css
  3. ios_clock.svg

STEP 2: Setup index.html File

First thing's first, we'll start by setting up the index.html page to display the clock. Click on the filename on the left hand side of Thimble to view it. The default index.html file should look like this:

1 	<!DOCTYPE html>
2	<html>
3	<head>
4  		<meta charset="utf-8">
5  		<meta name="viewport" content="width=device-width, initial-scale=1">
6  		<title>Made with Thimble</title>
7  		<link rel="stylesheet" href="style.css">
8 	</head>
9	<body>
10	
11		<h1>Welcome to Thimble</h1>
12		
13 		<p>Make something <strong>amazing</strong> with the web!</p>
14		
15 	</body>
16	</html>

The code in lines 2-8 defines the <head></head> section of the HTML and is used to set the page title, but also load important files that will be used by the page. For example, line 7 loads the style.css file:

7  		<link rel="stylesheet" href="style.css">

We're going to make some small changes to the index.html file HTML code first.

Delete the code in lines 11-13 and replace them with the following code:
10	
11		<article class="clock">
12		</article>
13		

The <article> tags will contain our clock. The class="clock" tells the article to use the clock CSS class to define the look and feel. So, our next step is to set that CSS code up.

STEP 3: Setup style.css File

Let's setup the style.css file so that it can define the clock style class that we used in index.html. Click on the filename to view it. The default style.css file should look like this:

1 	body {
2 		font-family: "Open Sans", sans-serif;
3	}

This CSS code defines the default fonts that are used in the <body> of the index.html page (or any page that uses this CSS file). We can leave this, but we're going to add lines that help define what we want for our clock.

Add/edit the following lines of code in the style.css file:
1 	body {
2 		font-family: "Open Sans", sans-serif;
3 		background-color: grey;
4 	}
5
6	.clock {
7 		background: white url(ios_clock.svg) no-repeat center;
8 		background-size: 90%;
9 		border-radius: 50%/50%;
10 		width: 480px;
11 		height: 480px;
12 		position: relative;
13 	}

You'll notice that we added a line to the body to change the color of the page background to grey with background-color. We also added a number of lines to define .clock. The . in front of clock is very important; this is how you specify a class in CSS.

The CSS code in clock has a number of different lines that each control a different aspect of the <article> in the index.html page. The background lines load the ios_clock.svg file and adjust the color and layout. What do the other lines do?

Try adjusting the various CSS attribute values to discover how these attributes control the look of the clock face. Google the different CSS attributes to get a full description of them.

STEP 4: Add Clock Hands

So far the HTML & CSS has been fairly basic. We've really only created a canvas of sorts with the <article> tag and then gave it some shape and used the SVG as a background. Now we're going to use the CSS to shape and position the hands of the clock.

Let's start with the hour hand. We'll add the hand to the face by adding a division to the <article> using the <div> tag.

Insert these lines of code between the <article> tags in your index.html file:
  <article class="clock">

      <div class="hours"></div>

  </article>

You shouldn't have seen anything happen yet. Just like with the <article> in Step 3, the <div> has been assigned a class so that <div class="hours"></div>. However, the .hours class has not been defined. We need to add it to the style.css code.

Add the following lines to the end of your style.css file:
.clock .hours {
  background: black;
  height: 20%;
  left: 48.75%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
  transform: rotateZ(45deg);
  z-index: 1;
}

Once you have added the code above, you should see an hour hand appear, pointing at roughly 1:30 on the clock face.

Once again, go ahead and play with all of the attributes to see how they can affect the look and position of the hour hand!

Now let's wrap this up by adding the .minutes and .seconds classes to the style.css file so that we can add those hands as well. I'll give you the CSS, but can you figure out what the HTML should be in index.html?

Copy and paste the following code into your style.css file:
.clock .minutes {
  background: blue;
  height: 30%;
  left: 49%;
  position: absolute;
  top: 20%;
  transform-origin: 50% 100%;
  width: 2%;
  transform: rotateZ(90deg);
  z-index: 2;
}

.clock .seconds {
  background: red;
  height: 45%;
  left: 49.5%;
  position: absolute;
  top: 14%;
  transform-origin: 50% 80%;
  width: 1%;
  transform: rotateZ(180deg);
  z-index: 3;
}

Can you figure out what goes into the index.html file to add the minute and second hands?

When you are successful, you should have a clock that looks like this:

STEP 5: Share Your Work

Publish your clock to make it visible on the web, then post your clock link on Edmodo, turn in the assignment and share your clock link with your friends and family.

Can you teach someone else to make a clock?