JavaScript Analog Clock (Super Simple!!!)

okay so today we're going to be building this analog clock that's going to allow us to practice our knowledge of the JavaScript date object so if you're interested in that or if you're just new to JavaScript and wanting to practice your JavaScript skills this is the perfect video for you we're not going to be using canvas okay we're going to be using pure JavaScript HTML and CSS this is the final product we're going to have smooth movements from the hands okay so if you're down to do this let's go okay so let's do it first off I'm going to start off on my code editor of choice I'm using webstorm but if you're using anything else such as vs code that is fine in webstorm it is super easy though all I need to do is just start an empty project and then in the directory called webstorm projects that lives on my computer I'm just going to rename this to JavaScript analog clock just like that so I'm going to go ahead and create and this should open up a project for me so so here we go I just have one folder okay or One Directory called JavaScript analog clock so if you're using vs code or anything like that make sure to have the same okay just create a directory like this because we're going to stick files in here so wonderful let's go ahead and do that all I'm going to do is create an HTML file so I'm just going to call this index HTML make sure you to use the HTML extension so that you let your coder to know to treat this as an HTML file and hit enter okay so here we have some boiler plate code all I'm going to do is just change this to analog clock for the title so that it shows up in the browser so once again in webstorm I could just select the Brows I want to use so if I select here this will show up in my browser analog clock has changed as the title of this document and if you're not using webstor you could just simply copy the path copy the absolute part of the index HTML file and just whack it in like so it's the same thing so let's carry on I'm just going to inspect this page so you can see what is going on under the hood so with this we'll be able to see all the elements of course there's not much happening right now in between the two body tags so just keep that in mind okay that's all we have we're going to go ahead and add some stuff into here however first let's actually connect the other files we're going to need and the other files that we're going to need is a CSS file so I could just go ahead and select stylesheet and we're going to for the Styles uh I could just click on CSS or I can type CSS to let our file as know to treat this as a CSS file and let's do the same for the Javascript file so I'm going to appjs um you do need to add this in other code editors you don't need to add it in web stor so just keep that in mind I've gone ahead and typed it anyway just in case people aren't following along with the same code editor that I am great so we have our files this is looking good uh the next thing we're going to do is actually link them up so we can link up the stylesheet with a link tag so that's what it looks like we're going to use real stylesheet and here luckily for us all these files are in the same place so it's easy we just put the name of the file like so and then we close this as it's just one tag okay uh there's no opening and closing tag for a link tag and next we need to link up the appjs file right and we do so using the script tag we have to make sure to place it at the bottom of the body so any elements that I put in here okay have to be above the script tab because you read this first and then we read the script and we link this up using the source attribute so just like that and we've just stuck in the name of the file so there we go I mean that's really it in terms of the high terms of the structure of our project I'm just going to make that smaller now in here it's going to be so super simple we're just going to have one div like so and this div is essentially going to represent our clock so I'm going to style it like a clock using the class name and I'm just going to whack in the class name of clock and what does our clock hold well it's going to hold a few divs the first one being a div with the ID of second hand which you guessed it is going to represent our seconds hand we'll put in the minute's hand and the hour's hand too so we'll put in a div with the minute's hand and a div with the ID of our's hand and finally one more div this one might have taken you by surprise it's a div with the idea of Center and we're just going to use it to cover all the three hands okay so just smack bang in the center so that's really it okay that's all the code we're going to need for today in terms of HTML okay great so now let's style it up before we start adding any functionality to this so I'm just going to move this over here so we can pick things out and I can show you this a little bit easier so first off I'm going to pick out the whole body in fact the whole whole body of our document and what I'm going to do is actually initialize Flex box so I've just gone ahead and done that because we want to Center the clock so by initializing Flex boox I can then use justify content Center to Center everything from left to right and I can also use align item to Center everything from top to bottom but this will not work without a height okay so I'm going to go 100% viewport height okay so these won't work without that and this won't work without this okay that's just how Flex box works depending obviously on the element you are working with I'm just talking about the body tag specifically that this won't work without that because we haven't assigned a height to the body great the next thing we need to do is pick out the clock right so the div with the class name of clock uh and to pick out class names you use a DOT so there we go we've picked out the whole element this whole div by the class name of clock and the clock is going to be a circle so this is easy I'm going to go 300 pixels height width is also going to be 300 pixels and then the Border radius because of course we want to round this off it's going to be 15050 pixels which is half the width and the height so it's going to look like a circle but we don't have any colors yet right so we can't see anything that's why I'm going to add a border of Solid 5 pixels and then this lovely I'm just going to move this over yellow that I picked out so 252 2 255 55 great so if we look at this now refresh taada there we go we have a circle and if you see it is centered okay thanks to display Flex let's also add a background color to this because uh we want to make this a little bit more visible I guess the yellow circle so I'm going to go with a gray that I picked out 43 43 43 okay and there we go let's move on so we've got the body we've got the clock the next thing we're going to pick out is the Second Hand by the ID so to pick an I do use that and there we go so this is going to be just you know like a thin hand I guess so let's actually style up to look like something first uh let's also give it a width just of two pixels so it's very thin and a background color the background color is going to be uh this kind of neon blue that I picked out already so there we go and at the moment it just looks like this so pretty boring we want to actually position it right so how do we position stuff in CSS well I'm going to have to use the position attribute so I'm going to go ahead and give this the position of absolute however we need to give the position of absolute to the parent element which is the clock in order to position this child element according to it otherwise it will be positioned according to the document so make sure that is added there and now we can use attributes such as left I'm going to move this left 150 pixels which is half the width of the circle right so boom to according to the parent right so the parent is the clock I moved 150 pixels left from it however this is two pixels wide so if I want to make this exactly in the center I need to minus one pixels from this so 149 pixel would be more accurate and I can also use the bottom attribute to move it 149 pixels from the bottom so that is really now smack by in the middle this is 149 pixels left and 149 from the bottom of the parent element which is the circle this is looking great let's do the same for the others right so essentially same kind of logic what I can do however maybe let's also give this an opacity just cuz I think it'll look quite cool of 50% and great so now let's pick out the minut hand and this would just be a case of repetition and muscle memory for you so we're going to use the same logic right however this time the height of this let's go with 100 pixels uh let's make the width of this two pixels again the background color this time I'm going to make pink so RGB 2531 12227 I quite like that color um and then again we're going to position it right but we can't do so without adding a position of absolute and once again left we're going to move it 149 pixels from the left and from the bottom 149 pixels so we should be exactly on top of that one and it is right there we go you can see it we've just changed the opacity of the one behind but that the pink one is in front great so this is looking good and of course we need to now do the hour's hand so once again let's pick out the hour's hand just like that and let's give it a height so let's go ahead and give this a height of 80 pixels let's make this one a bit fatter right let's go with four pixels why not let's give it a background color let's go with RGB 20512 255 so it's kind of purple and now if we want to position it left we can do 149 but as it's four pixels let's take away one more pixel so 148 and bottom 14 8 pixels to okay and of course because we use these we also need to add a position of absolute so now taada it's there too so this is looking good one more thing I'm just going to add a little circle there so this one is super easy we're just going to pick out the element with the idea of Center let's give it a width of 10 pixels a height of 10 pixels that sounds good to me so what would the Border radius be well the Border radius will you guessed it be 5 pixels cuz it has to be half and then the background color I think let's just go with the same yellow that we picked up earlier so 252 25555 and of course let's position it so once we get position absolute left and this time we have to take away half of this so five from 150 so 145 pixels and bottom is going to be 145 pixels so there we go this is looking good we're going to also rotate these but of course we're going to be doing this in JavaScript because it's going to change dynamically based on the time so I think now is a good time to head on over to our Javascript file okay so we are done with this now we're done with this let's start picking out elements using JavaScript just like we did with CSS however this time we're going to do it differently right this time we're going to look in the whole document and use something called get element by ID and we're going to look for an element by its ID we're going to look for an element with the ID of second hand so we're going to pick that out and let's save this I'm going to save this as the second hand just like that great so there we have one uh let's do the same for the minutes hand I'm just going to change this to minute hand and of course then we have to look for an element by the idea minutes hand and let's also do so for the AR's hand and look for an element by the ID of AR's hand so once again just to show you what I mean I'm just going to get my console log out here which one do you want a console log out let's try the second hand right so once again what we're doing is looking in the document for an element with ID of second hand and we're saving it to this Con just so it's easier to work with in Java script so now if I refresh and look at the console log you will see we did we picked out a div with the IDE of second hand and if we hover over it it will even show you on the left it will show you exactly which element we have picked out great and of course I've done that for all three so wonderful we've picked them out in JavaScript the last thing we need to do is actually assign them a CSS property but in JavaScript and the property we're going to be assigning is uh rotate so transform rotate and we're going to rotate them based on the time so first maybe let's get the time to do this I'm going to write a function for this okay so the function I'm going to write is get time just like so and let's just call it down here just so we can see what's going on inside the function so if we want to get the time right now this very very second all I need to do is use the new date object from JavaScript so the date object and I'm just going to sign this to the cons now so we can see what's going on I'm just going to console log out now and let's refresh and Tada we get the time now as well as a bunch of other information like the date and even the time zone but this looks right to me this is great okay but we don't need all of this now the new dat of actually comes with a bunch of cool methods that are attached to it like get minutes for example so we could do it like that but I think a nicer way to do it as we've already saved this under the const is just grab the const and use get minutes or let's do get seconds first okay so we can do that to get the seconds I've just saved that under the const seconds so there we go uh let's do it to get the minutes because there's another one called get minutes that we can use and you guessed it there's also one for hours so con hours get hours so if I then conso log out the hours the minutes and the seconds and if we look in here well this is right it is 6 p.m. it is 58 minutes Post 6 p.m. and it is 27 seconds of the minute so this is looking good I'm happy with that so now how are we going to use this however we are going to use this by essentially using the time to figure out how many degrees we need to rotate each hand so let's do it let's first grab the second hand so that's all I'm going to do I've grabbed it and I can use style transform so I'm essentially manipulating the CSS from here which is quite cool and I could just go ahead and do rotate just to show you 90° will be rotated 90° just make sure that is spoke correct so Tada we rotated 90° you might be like great but we don't want to rotate from the center we want to rotate from here right so we can do this however in order to do this we do need to add another property I'm going to do this in the CSS file because this isn't going to change I need to actually add a transform origin so let's do it on the second hand transform origin origin 0 and then 100% so 0% 100% and we're going to do that to all of them just to make sure that the transform is happening on one side of the element so there we go now it's happening from here this is looking good we've just rotated the Second Hand by 90° great so this is good we proved it works however we want to change this number dynamically right so we can do that so I can go aad ahead and just put in a number here so what is that number well for the seconds we have 360° in a circle and we have 60 seconds on a clock so 360 / by 60 is six right so 6° between each second we are moving 6° in the clock so 6° 6° 6° you're adding it so 6 12 and so on so let's go ahead and Define the time interval up here I'm going to go ahead and just write six and now I could do seconds multiplied by time interval so just like that so now say there is 1 second pass it's one multip by 6 so on the first second we rotated at 6° on the second second so 2 multip by 6 is 12 so on the second second the hand is rotated 12° and so on so if we we look at this now you should see the second hand essentially moving each time we refresh okay however it'll be nice not to keep refreshing so in order to do that I'm just going to put this function on a set interval so set interval pass it through as a cback and then I'm just going to say that I want this to refresh every 100 milliseconds which is quite often okay it's literally going and refreshing all the time I'm doing this because I actually later on want to make the hand smooth hand movements a lot more smooth so not just update them every 1 second great so now if I look in here I don't have to refresh and that should update every second this is looking great let's move on to the minutes hand so once again let's get the minutes hand a new style transform and this time we're just going to pass through something else into here and then of course we need to put degrees at the end so in order to get minutes where there's 60 minutes in an hour okay so 360° divide by 60 is six so we can actually use the same time interval so minutes multiplied by time interval will be fine um however if we look in here here's the minute hand and at the moment say this is here right now and you want to move from minute 3 to 4 the movement will be very jerky okay it will move directly from 3 to 4 we don't really want that I mean you might want it but you know on a normal clock the movement was slow and gradual so you'll start at three and then slowly you'll get to the end position of four so I'm just going to show you what I mean okay as soon as this hand the second hand sits here you will see this minute hand suddenly leap from one position to another so any second now it's going to happen this is kind of what I don't want to do you might want this but I'm going to show you an alternative in which the movement is a lot more smooth so here we go here's the leap and Boop that leap just happen so if you want to make this smooth uh I'm going to add something else in here in fact I'm just going to get the seconds and divide the seconds by 10 so this essentially will give me an output of anywhere from 0 to 5.9 so the range between zero and the time interval So based on the seconds this hand will essentially slowly move from one position to the other so slowly move from say second three to Second four So eventually end up at the ending position okay so hopefully that makes sense you it'll be hard to see now but essentially this minute hand is slowly moving from one position to its ending position for the next Second Great so hopefully that makes sense I'm just going to make that a little bit small use for you so you can see all of them and finally the hours hand so once again I just set this up correctly so put degrees here so the hours well this is easy there's 360° in a circle there's 12 hours in the day so 360 divid by 12 is 30 the time is it's going to be 30 this time so Ian we could write another time here but I'm not going to I'm just going to do multiply by 30 so I mean you could change to seconds and minute time interal and then have a second one for hours interval just WR 30 here because I'm lazy but feel free to do whatever you wish and if I leave it like this that's fine but once again you're going to have the problem of say it's hour two uh and then suddenly goes to hour three goes and it jumps from two to three we don't want that we want it to gradually move from 2 to three uh just slowly and slowly until it gets to its final position so once again I'm going to do that I'm just going to grab the minutes and divide them by two in order for that to happen great and that's really it that is our analog clock I hope you like it I think it looks good I hope you enjoyed this tutorial please let me know what you think and if you found it useful uh yeah I'd love to create more for you

Channel: Code with Ania Kubów

Views: 4,941

Keywords:

Id: LNL1otheWeY

Length: 22min 16sec (1336 seconds)

Published: Wed May 08 2024