The First Project – Clock

Well we come to the first project for the JavaScript, CSS, and HTML course. I will be going over my trials and issues I ran into creating my project. I used my favorite text editor Visual Studio Code for this project. This handy little tool gave me all I needed for a comfortable development experience. This is also very easy but more irritating to do in Notepad or Notepad++.

  1. Setting up the Date() and time functions and variables.

This was the easy part of the project. There’s a built in function to JavaScript to get the time and date on a computers system. called Date(). Setting this up is very easy all you have to do is set a variable to hold a new date object.

So I set the variable time to hold my new Date() object. Getting the time and date information is just as easy. Use the time.get method to get the specific information you need. Set those to variables you can easily remember for later. NOTE: the year variable has the method getFullYear(); this is important because then we get the year 2019. If we used the getYear(); function we would get the last 3 digits of the year plus 100 so the result would be 119. This would be used to find the last two or three digits of the year like here: 01/01/19.

Now JavaScript pulls the information in military time as a standard, so we need to format it to run correctly with a 12 hour clock. here you can use just a simple if statement.

If you are confused by this line of code don’t be alarmed its just a very simple if statement just compressed into 1 line of code.

It is structured like this: (Is hour more than 12?), and the question mark is the sign we use to show the computer that this is a IF statement (If the answer is YES the left side of the colon is True, and if it is FALSE the right side of the colon is True.) We then add the hour to it.

So, in short this if statement finds if hour is less than 12, then finds out if it needs to make _12Hours = 0 or do nothing then add hour to _12Hours to make it a 12 hour time calculation.

Or do this

Now we must format the time to make a number look like this: 06 instead of 6, and we just use another if statement. So that your time is formatted to look like this 06:03:09 instead of the wonky 6:3:9.

So now we have the time and date formatted in the right way.

2. Get PM or AM And Set Up the Time Variables As A String.

It is easy to get the Pm or Am just do a simple if statement to see if the hour variable less than 12 or not.

Setting up the string that will show the time on screen is just as easy.

Now our time looks like this when printed to the screen: 06:22:32 PM.

We can then populate a container with our time string by retrieving this child text node then setting its nodeValue property.

3. Setting up the HTML of the webpage.

Here we are just setting up a super simple HTML webpage named Clock with an external CSS style sheet called “Div-style.css.

Now we are going to unload the functions of our JS file into the body of the webpage.

The clockDraw() function is for later.

So we import updateClock(); function we set it to update with setInterval(); every second.

Now we import the JavaScript script file which I called “Clock.JS” and link it to the HTML using <script> and the src function.

Now we set up the DIVs of the webpage to hold the content for us. Think of a DIV as a piece of paper that you pin to the wall, and the wall is your webpage.

I used id in the Div to name it so we don’t lose track of which one does what. The content tag holds everything as a foundation. The Numbers DIV holds the time and the Clock Face id holds the animated clock we will make in a few minutes. In the Clock Face DIV I set up a canvas to hold the information for my clock that I’m about to animate. We use Non-breaking space or &nbsp so that this DIV isn’t affected by word wrap. Its just a habit for me to do this every-time I make a <canvas> or <span>.

REMEMBER CLOSE YOUR TAGS WITH A SLASH </body>, </head>,</html>

4. Creating and Animating a Clock Face.

First we are going to name a function in out JavaScript file called clockDraw();

  1. Make a Canvas
  2. Get the context (ctx) of the canvas you can name this whatever you like.
  3. Now we get the radius of the canvas we just made and use that as the radius of our circle for the clock face
  4. Now we draw the clock every second so it can update with setInterval();.

Now we draw the clock.

  1. Make the drawClock(); function.
  2. And populate it with functions we will use to draw the clock.

And now we are going to set up those functions

Very simply we are drawing the Circle of the clock and making it a gradient gray. Then we fill it with a white circle to make a white colored background on the clock.

This is simply making numbers using a loop 1 – 12 and putting them in the right place. every 30 degrees on the circle of the clock.

Now to draw the hands of the clock

Simply updating the lines that we will draw on the program. by a determined angle every hour, minute, and second.

Now to set up the drawing of the Lines that act as hands.

Finally we are drawing lines and finding the position, length and width of them from the drawTime() function above.

And that’s the end of the animated clock. Easy right? Now we just add the clockDraw() function to the HTML and we have it done.

You can now edit the CSS to your hearts content. Here is mine just so you have a reference of what I have done to mine

Here is the finalized project a simple and easy clock made in HTML using CSS and JavaScript.

Check out my GitHub for the files to this project. Play with them to your hearts content. Improve them if you want! One of the best ways to improve is to fix someone else’s projects and play with them.

Direct Link: GitHub for this project!

References that helped with this project:
StackOverflow – Sooo helpful for some of the code
W3Schools – Very helpful for the HTML and JavaScript for the project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

Mikes CS Progress Blog

From Start to Finish

Create your website at WordPress.com
Get started
%d bloggers like this: