Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:2.8 hours
Snap 1
  • Overview
  • Transcript

5.3 Pulling the Current Time

Hello and welcome back to Animating with Snap SVG. Now that we've pulled in our clock SVG file, I want to start talking about how we can pull in the current time using JavaScript and different ways we can display the current time. So before we get started, let's go ahead and make another copy of the site15 folder, and let's rename that to site16, and then will drag site16 down to brackets and open that up. And then in our site16 folder we can take a look at index.html, where we've already loaded in the clock. And we're gonna start writing a lot of JavaScript so I actually wanna pull all of this out and put it in a separate file. So I'm gonna create a new file here, and I'm gonna call it main.js and then in our index.html file up in the head, we're gonna create another script reference. And we're gonna set the source of it equal to main.js. Then I'm gonna grab Grab all of our JavaScript here, and I'm gonna cut it. Get rid of this closing script tag here so that all we have in our body is that div with an id of clock. And then we'll jump into main J.S., let's save that first, and then jump into main J.S. and paste what we have. Now, if we were to test this now, let's go ahead and look at what that's gonna look like. So I'm gonna save that. We'll jump back into index.html. So if everything saved. I want to jump over to our browser and navigate to site 16/index.html. And you'll see that everything goes away. So what we need to do in our JavaScript, let's jump back into main.js, is we need to put all of this inside a window onLoad function. Because we want to wait until the window or the document has finished loading before we start running all of this code. So I'm just going to say window that on load set that equal to a function inside that function. We're going to run all of this code so I can highlight all of that code. Tab it over. And then close off that function at the So let's see if that works. Let's save our file. Jump back into our browser and refresh. And now we can see our clock. So the bulk of the work that we're gonna be doing in this lesson is gonna be in this main.js file, because I really just want to experiment with some ways that we can display the current time. So still inside this onload function here. But after we've loaded our clock. I'm just gonna skip a couple of lines make sure you're inside this closing curly bracket the bottom. And let's create a new variable to store our time in. And the way we get the current time is by creating a new date object, so we can create a variable here, let's call it date. And we're gonna set this equal to a new Date. So here we're creating a new instance of this date object and storing it in a variable called Date. Let's see what that looks like. Let's do a console log, actually let's do a window alert, that'll be easier. We'll do a window.alert, and we're going to display the current date. And again this date here is just this variable we created that's storing this new date in it. I just wanna see what this variable looks like. So let's save our file. Jump back into Chrome and refresh the page, and we get an alert. And this is that date object. So Saturday, September 26 at 22:53. So we're using military time here, it's 10 PM, almost 11 PM. And that's how the new date object works it gives you the current date as well as the current time. And then we can break that up even further. There's a few ways that we can pull in the specific time without having to have that whole string in there. So for example, if we wanted to view hours, minutes, and seconds. Let's create a variable for our hours here, and the way we're going to pull in the current hours is we're gonna point to the date variable that we created. And we're gonna call on getHours, not house, getHours. Open and close parentheses, semi-colon to end our statement. Then we're gonna create a variable for minutes. And will say date.get Minutes. Same thing, open and close parentheses at the end. And we can make this a little bit bigger to make it a little easier to read. And then we'll do the same thing for seconds. So var seconds. And we're obviously going to need all three of these values later on. So we'll do date.get. Seconds, open and close parenthesis, semi-colon to end our statement. Then for window alert, let's just string these three together. So we're gonna take our hours and we're gonna put colons in between these. So we'll say hours plus and then colons inside quotation marks plus minutes, plus a colon inside quotation marks, plus seconds. So we're basically just stringing these three numbers together that we stored in these three variables, and we're putting colons in between them. So let's see how that looks. We'll save our JavaScript file, jump back into our browser and refresh And there we go. So now we have 22.55.38. Well if we don't want military time here we're gonna have to change some things. So instead of 22 we want it to say ten. How can we do that? Well we're gonna need a little bit of math to make this work. So let's jump back into brackets, or whatever text editor you're using and we're gonna talk about the use of the modulus operator. Now if you're a programmer you probably know what this is, but if you're a designer and you've never used the modulus operator, it might be a little confusing. But if you think back to your elementary and junior high days when you were doing simple division. There were times when one number didn't divide evenly into another number. So let's say, for example, 10 divided by 3. 10 divided by 3 gives you 3 with a remainder of one. While using the modulus operator is a good way to get that remainder. So for example, if we were to do 10 modulus 3 here, again that would give you 3 with a remainder of 1, so this operation here would return that remainder, so it would just return 1. Well we're going to use this modulus operator to give us the current time on a 12 hour clock instead of a 24 hour clock. So we're going to go back over here to our hours, and we're going to say date.gethours, and then again, the modulus symbol is just this percent sign. So getHours, %, and then 12. So if you think about it, let's say it's 1,300 hours or 13 o'clock or one o'clock pm. The way this works is you would do date.getHours, which would be 13, modulus 12. So what's 13 divided by 12? It's 1 with a remainder of 1. And this calculation here is just gonna give us that remainder, so it will give us a reminder of 1. If we had, if it was 1400 hours, then date.get hours would return 14. If you do 14 divided by 12 it's 1 with a remainder of 2 so it's 2:00. So that should give us the hours that we need, so now that we've done that let's save our file. Jump back into Chrome and refresh the page. And now sure enough it says 10:58 instead of 20 to 58. So by using that modulus operator we can get the current time on a 12 hour clock, as opposed to a twenty four hour clock. So we've now created a lot of what we need in order to get our clock functioning like we need it to. The only problem is right now it's just pulling in our time once. Whenever the page first loads, it's gonna give us the time at that particular moment in time. Ten seconds later, our clock is already gonna be off. So we need some way to create a loop that's running once a second and constantly updating our clock. We also need to convert these numbers here into degrees of rotation. Instead of ten here, we need to know how much to rotate our hour hand around the clock. We need to know instead of 58, what is that look like in terms of degrees. How far are we gonna rotate the minute hand around our clock? So we'll get started with that in the next lesson. Thank you for watching, and I'll see then.

Back to the top