Build A Clock With JavaScript

because what what time is it how am I supposed to know why don't you use the amazing JavaScript clock app I just created to figure out yourself that's a great idea I mean look at this amazing JavaScript clock app that's definitely not photoshopped in place I can't wait to learn how to make this on the right hand side we can see the final version of our actual clock which is just a typical analog clock and on the Left we have an empty index.html file which contains a link for both our stylesheet as well as a script tag for our JavaScript and now inside of this body tag the first thing we need to do is we need to define the div that is going to contain our clock so we're just going to create a div we're going to give it a class of clock and inside of here this div we're going to put all of our different hands as well as all the different numbers for our clock so the first thing that we're going to do is we're going to define the hands we can just do that by creating a div with the class here of hand all of our hands are going to share this hand class and then we also wanted to give it a class for which hand it is in our case this one will be to our hand we can copy that down do the same thing for a minute hand as well as for our second hand and this takes care of all three of the hands of our clock now the next thing we need to do is we need to create divs for all of our different numbers for example we want them to have a class of number as well as another class of number one all the way down to number 12 and inside of here we need to put one and there's actually a really easy way to do this using Emmet so within it we can say what HTML element we want in our case div then if we want classes we just put dots so we want a dot number on all of these and we also want a dot number but we want this to be incremented so if we put a dollar sign right here this is going to replace it with a number and we just say times 12 because we want there to be 12 different numbers in here one through 12 then inside of these curly brackets whatever we put in here is going to go in between the two tags so in our case all we want to do is again put a number which we're going to increment 12 times now if we hit enter on this you'll see that it already generates here all of these different divs for us so we don't have to manually type them out let's delete the one we manually typed and that's all the HTML we need for this entire application we can just save that and we can open this up using live server so let's go over here right click this open with live server and you'll see when this opens up that it's really basic and pretty much completely useless right now in order to make this actually more useful let's go into our Styles dot CSS which for now all I've done is I've changed everything to be using border box and I've changed the font family to be Goff and rounded or sans-serif as a fallback you can use whatever font you want for this application but I highly recommend using border box for box sizing because it makes sizing things so much easier now to get started let's first apply the background that we want to our body so we can just apply background here and I actually just copied this straight over essentially all this is as a linear gradient going to the right with a light blue color on the left and a light green color on the right hand side you can use whatever colors that you want for this but when we save that you can see we get the same gradient that we have over here then the next thing that we want to work on is the actual clock itself so let's select that clock class that we just created the first thing we want to do is we want to set our width and height in our case we're going to use 300 pixels as our width and height because we need this to be a square and we're also going to give it a background color this background color I'm going to use rgba because I want it to be partially transparent so I'm going to use entirely white but with an 80% transparency and essentially what that's going to do is that's going to make this blue and green colors shine through a little bit which is just going to make it look a little bit cleaner if for example we had no pace to be here of one you can see that it's much harsher but with the 80% it's much more blended in with the background next we want to make this a circle so we can do that by using order radius 50% which is going to round all of our corners to make a perfect circle lastly what we want to do is we want to add a border to this so we can just say a border we'll say 2 pixels solid black and this is just going to stand it out from the background and make it look more like a traditional analog clock now the next thing we want to do is work on positioning our numbers in the correct positions on our clock so let's go down here we're going to select our clock number and this is going to select every single one of our different numbers so we need to do all of our shared styles here and the first thing that we want to do is we want to position these absolutely which means if we want to make them relative to the clock we need to make the clock a position of relative now inside of here for our numbers we're gonna do a nice little trick to make rotating these around the clock really easy we're gonna set the width to 100% and height to 100% and if we save that you see everything gets moved in there's hop left and now to visualize what we've just done I'm going to apply a background color to this element so we're going to use a background color of red because it's really easy to see and as you can see we have a giant red square but takes up the entire space of our clock so to get our numbers positioned at the very top for example number 12 all we need to do is set the text aligned here to be centered once we do that you'll see that our twelve moves into the correct position inside the clock and we remove this background color but how do we get all the rest of our elements positioned around the clock and to do that we're going to use transform because with transform we can use what's called the rotate property so we can rotate for example 30 degrees and this is going to be where the one position goes and again to visualize how this is working let's add that background color back in so we can just set a background color of red and you can see it's just rotated that entire rectangle so it's essentially acting like the top of the clock is up here and it's going to do that no matter what we do so for example 60 degrees is going to rotate it a little bit farther and so on all the way around so what we need to do is we need to have a different value for rotate here for every one of our numbers and to make that happen we're going to use a variable we're just going to set this variable to be called rotation and by default we want this rotation value to be set to zero so we're just gonna set that to zero here by default remove this background color and again everything moves back to the top but now we can come in here we can select our individual numbers so we'll say number one for example if we want this to have a rotation of 30 degrees so we can just type in 30 degrees here and if we say that you see one has moved over now let's copy this down a bunch of times because we need to do 60 degrees 90 degrees 120 150 180 and so on all these are going to be 30 degrees apart from each other 210 240 copy it down a couple more times they up to 70 300 and lastly 330 we don't need to vary about 360 because that's what our 12 is already defaulted to now we can change all these 1 2 3 4 5 6 7 8 9 10 and 11 and if we save that boom all of our numbers are correctly positioned and that's because of this rotate value we're just using this rotation variable to set the rotate of our giant red rectangle as we saw earlier now that we have all that done what's actually working adding in the hands which are going to be much easier than the numbers let's go back to the original example so we can look at exactly how we want these hands to look let's go down here we can select our hand by just saying clock dot hand this will select every single one of our hands and again we want to position these absolutely so we can just say position absolute and inside of here we want these to be positioned so that they're centered essentially right here at the bottom of them we want to be in the dead center so we can just come in here we can set the bottom to be 50% and this is going to put them dead in the bottom and we can also make the left here 50% and if we save that go back to here you'll see nothing happens so we need to actually give them a little bit of a dimension we're gonna give them a width here for example let's say 10 pixels and we're also going to give it a height and in our case we're just gonna give it a right here of 40% and lastly we need a background color so that we can see it so back on color of black and if you say that we see we get our hand and when we say that you see that we get our hand but it's a little bit offset from our 12 if we make our height here 50% it'll be really easy to see that it's offset and not dead centered inside the 12 to fix that we again just want to use our transform translate this time and we want to translate negative 50% on the X so we'll use translate X and if we save it you'll see that it's now dead centered in the 12 and essentially this translate X negative 50% just translate to the object by 50% of its width backwards so that's exactly what we needed also instead of here we want to use that same rotation trick so we're just going to say rotate and we're going to use a variable called rotation and this we're going to actually set in the JavaScript for how we want our hands to rotate but by default we just want this to be 0 so that they actually show up on our screen and if we say that again it's showing up just like we want it to be to see how the rotation looks let's change our rotation here to 30 because that's how it'll be set in the JavaScript and to make sure that works down here we need to make sure we use calc and we want to multiply it by 1 degree just to convert that one value over here of 32 degrees and if we save that you'll see that that definitely look great it's rotating around the center and not around the bottom so we need to set a property which is called transform origin if I can spell properly transform origin and this transform origin allows you to say where you want the transform to be applied to in our case we want it to come from the bottom if we say that you see that it is now just moved itself so that the transform is down here and it's rotated 30 degrees and if we change this to for example 90 it'll be at 90 degrees and so on which is perfect so let's set that back to zero and work on styling how we want our hand to look let's go back here and as you can see our hands have a slight white border around the end and they're slightly curved at the end so let's come in here and do that we can just set here a border which is going to be one pixel solid white and we also want to set a border radius but we only want this on the top left so we'll say border top left will just make this ten pixels and we're gonna do the same thing on the top right and that's just because we don't want to curve the bottom of it we only want to curve the top now if you save that usually we get that knife is curved and at the top and the white border around it which may be hard to see lastly with that out of the way we want to make sure that these always draw on top of our numbers so we're going to come in here we're gonna set our Z index we're just going to make it 10 so that it'll always be on top of our numbers and now as you can see our hand is on top of the 12 and not behind it we want to make sure that the height and width are to find her hand and not for all of the hands so let's remove those from here and go in and actually select our individual hands so we have our clock hand dot second and this clock hand that second is going to here have a width of five pixels it's going to have a height of 45% and we also want to change the background color for this which is just going to be red you say that we get a nice little second hand here and it's looking a little large so let's actually change this down to three pixels and it looks much better now we can copy this and did the exact same thing for our other hands we're going to have our minute hand and our hour hand and these are both going to be black instead of red so I'll just change this to be a black color copy that down and now we need to change the heights and the widths our minute hand we're going to want this to be seven pixels and 40% tall and down here for our hand we're going to make this ten pixels and 35% tall we say that you see that we get all of our different hands being shown up here they look a little bit weird because they're being drawn on top of each other but once we jump into the JavaScript that'll no longer be a problem because most of the time they won't all be lined up directly on top of each other the last thing we have left to do is if we go back to our previous example we have this nice round black circle in the center and our entire clock is centered in our screen so we need to do that now let's work on the black circle first we can come in here we can just use a pseudo element so we're gonna say a clock after and this is just going to add a new content to the dom we just say content set it to an empty string and this is going to add a new element that we can style and this new element we want to again position absolutely so we can say position absolute we want the background color here to be black because if we want it to be same color as the rest of our hands and we also want it to show above them so we're going to set the z-index here to 11 from there we can go and work on setting the width and the height so in our case we're going to have a width of 15 pixels height of 15 pixels and we're also going to want to Center it so we'll say top 50% we're gonna do left 50% and also that same transform trick where we're going to translate negative 50% in both directions which will just give us something that is nice and centered 100% as opposed to be slightly offset whoops make sure that's that correct place and if we save that you see we already get our black square where we want it but as you already know we want this to be a circle not a square so we can just use border radius and we can set that to 50% and now we get a nice black circle right in the center now we can finally move on to centering everything and we can use the body for this so instead of here we wanted to set the display to flex we want to justify our content in the center whoops Center and we want to align our items in the center as well now if you say that you see it's only been aligned in the horizontal axis and we still want to align in the vertical axis so what we need to do here is we need to set a min height and this is just going to be 100 view heights and if we save that we now see it centered but we have this scroll bar which we do not want so we can just come in here and set the overflow to hidden save that and that's going to remove the scroll bar because it's going to prevent the page from being scrollable and now our clock right here is exactly the same as our clock over here so for our numbers are a little bit as you can see they're much smaller over here so let's change our font size for our numbers we can go down to our number come in here and change the font size and we'll just make this 1.5 REM now if we say that our numbers have gotten quite a bit bigger and easier to read now all we have left to do is actually move on to the JavaScript to make our hands move around as they do over here so let's jump into the JavaScript the first thing we need to do is we need to use set interval because we want to call a certain function every second we're just going to call this set o'clock and every 1000 milliseconds we're going to call this function so let's define that function called set o'clock and this function is just going to get a current date and we can do that by just same Const current date and if you just call the new date constructor for date that is going to give you a current date which is the exact current time that you run it on from here we can get the seconds from that so we can say that our seconds ratio is going to be equal to our current date get seconds and then since there's 60 seconds in a minute we just want to divide that by 60 so that we know how far to rotate our seconds hand let's copy this down a few times because we need to do the same thing for our minutes and we need to do the same thing for our hours so we can just say get minutes and we can say here get hours but since we don't want our minute and our hands to jump by entire hours and entire minutes at a time we want them to slowly and gradually go through we need to use the seconds ratio and we want to add that in so we can say seconds ratio plus the get minutes and essentially this seconds ratio is a percentage of a minute it's going to be like 0.5 if for example we're at 30 seconds 0.75 if we're at 45 seconds and so on and it's going to allow our minutes hand to more gradually move around the clock we can do the exact same thing with the hours we want to add the minutes to it so we're going to say our minutes ratio is going to be added to our get hours and this hours is going to be divided by 12 and not 60 because there's 12 hours on the clock and not 60 now what we want to do is we actually want to set the values for our rotation of our different hands in order to select these values let's add some data attributes to them so here's our hour hand we can just say data our hand I'm gonna do is same thing for a minute and second let's just copy that down we have our minute hand and lastly our second hand now we can actually select these so we can say Const our hand is going to equal to document query selector and we just want to select that data attribute so we'll say data our hand copy that down because we want to also get a minute hand and of course the second hand and we need to change these to minute hand and second hand now we have all of our different elements that we need to use in order to set them so let's create a function that's going to do that setting for us we can just call this function set rotation oops set rotation and this is going to take the element that we want to rotate as well as the rotation that we want to use and this is just going to be a rotation ratio now instead of here we can take that element we can get the style of that element and we can call this set property method and this set property method is going to take what property we want to set this is in the CSS so we want to set our rotation variable and we want to set it to our rotation ratio times 360 so I search 360 degrees inside of our complete rotation now we can call that function will say set rotation let's do it first with the second hand and we want to use this second ratio copy that down we're going to use the minutes ratio and the hour ratio and we want to use the minute hand and of course the hour hand now if we save that you'll see that over here our clock is starting to move but you will notice that it starts out at the top and then jumps to the actual position of the real time after a second and we're going to get around that we can just call set clock as soon as our page loads and then as you can see when we refresh it'll immediately put the hands in the correct position for us and now our clock right here is working exactly the same as our clock over here you can see they're even perfectly synced up which is a great sign and now if you want to improve your JavaScript skills even more make sure to check out my other projects linked over here and subscribe to the channel for more projects just like this thank you all very much for watching this video and have a good day

Channel: Web Dev Simplified

Views: 150,229

Rating: 4.9435816 out of 5

Keywords: webdevsimplified, javascript tutorial, javascript clock, javascript clock tutorial, javascript clock analog, javascript analog clock, javascript analog clock tutorial, analog clock tutorial, analog clock code, analog clock program, code analog clock, code clock, clock program, clock code, clock program tutorial, clock code tutorial, javascript project, javascript project tutorial, javascript beginner project, javascript beginner project tutorial, css clock, css analog clock

Id: Ki0XXrlKlHY

Length: 17min 43sec (1063 seconds)

Published: Tue May 07 2019