Build a Digital Clock with JavaScript - Beginner HTML, CSS & JS Tutorial

hey guys how you going my name is dom and in today's video we're going to be using html css and javascript to create a digital clock okay so this is more of an exercise for new web developers who just want to see how we can use different parts of html css and javascript to create something tangible so we're going to be using things like javascript classes as well as the native date object to bring out current time information okay so hope you guys enjoy okay so the first step here is going to be to open up a new directory within your text editor of choice i'm using visual studio code i recommend you also use vs code because it comes with plenty of handy features which we're going to be taking advantage of in today's video so once you have vs code open let's make a new file right here called index.html and this one is going to be the main entry point for the application or the website using vs code we can enter in a single exclamation mark and press enter and it's going to give us an html5 template we can now go inside here and we can insert a title for example we can just say digital clock okay so now we can create both the css and the javascript files for the uh you know clock so let's go inside here and make a new file called main.css and this one is going to contain all of these styles and the second one here called main.js this one of course containing all of the javascript so now going back inside the index.html let's include both the css so we can say inside the head here we can say link for css going to dot forward slash and then main dot css let's do the exact same thing down here for the javascript we can say script source going to dot forward slash main.js okay so now we have both the css and the javascript loaded we can now preview our changes so using vs code head inside the extensions tab and do a search for live server you want to install this one right here and basically it'll just launch a development server for you to preview your changes as you develop the application and it's also going to automatically reload when you make changes to the files themselves so once you have this extension installed go back inside here and press f1 then say live server open with live server pressing enter is going to open up the application right here inside the browser so now we can see of course it is working and we can also just press f12 here to open up the developer tools which may come in handy so now we have all of the html and the css and the javascript linked up we can begin work on actually creating the clock itself so we're going to be doing first off the html before moving on to the css and the javascript so when it comes to the html we're going to need to have a main container for the actual clock itself so let's make a new div right here and give this a class of clock so like i said this will be the main container it will contain the dark background and it also have a rectangular shape okay so now going inside here we can create two span tags for both the actual hours and minutes display as well as the am or pm display so we can make a new span and right here and give this a class of clock dash time inside here we can just say for example something like 12 45 just to see what the css changes are going to look like when we get to those but of course these values right here are going to be updated through javascript when we get to that stage so anyway let's just copy this line and make this class now am pm and of course right here we can just say for example pm inside here for of course 12 45 pm so now saving this right here is going to give us something like this in the browser as we can see fairly straightforward so now let's move on to the css in order to of course style up this text right here so inside the main css we can see you know we can actually have first up here we can we can target the main clock container so we can say clock right here so we can say dot clock to target the class and we can say here for example a background of something like dark gray so uh hash and then triple three four dark gray saving this right here we can see that the actual container takes up the whole width of the actual page so in order to change that we can set a width to be something like 200 px while we're here we can also set some padding so we can say padding and make this 10 pixels and we can save this and now we get something like this and lastly we can set just a text align of center to of course center that text and we can also set a border radius of 10px to give us rounded borders so now saving this is going to give us something like this and we can see we have the main structure done for the container so now moving on to styling up the actual text itself we can target both the the class of clock dash time and also the class of clock dash am and then pm and for these two we're going to set a font family of something like sans serif we're going to be changing this right here to be a custom font towards the end of the tutorial but for now a sans serif is perfectly fine we can set a font size of something like 30px and also a text color of just a light gray being triple three right there saving this is going to give us something like this in the browser so the reason why i've split up both the clock time and the clock am pm is because i want the am pm to be smaller than the clock time so we want to make this 12 45 a lot larger compared to the am pm so to achieve that let's go back inside the css and we're going to quite simply here target the clock dash time and just say font size and make this something like 48 px so now saving this is going to give us something like this so that is basically all we need to do for both the html and the css we can now move on to the javascript so when it comes to the javascript it's going to work by essentially passing through our div right here with the class of clock we're going to be passing through our container into a javascript class now the reason for using a javascript class is because we want to be able to centralize all of the logic when it comes to our clock okay so if you haven't used javascript classes before it may seem confusing but trust me it really isn't too bad if you want i've got a whole video dedicated to javascript classes if you want to watch that one before continuing but up to you moving on to this right here the first step inside the javascript is going to be to create a new class with a name of digital clock okay so like i said we're going to be passing through here our div our main container div so let's make a new constructor inside here and pass through here an element parameter okay so now we can simply say this.element is equal to elements and this ensures that the object which we create from the class has a reference to our main container right here that way we can do things like update the values inside the time okay so now let's save this right here and let's actually see what's happening so let's make a new constant right down here and this one is going to get a reference to our clock element okay so we can say clock element right here equal to document.query selector and we can pass through here a class of dot clock okay so basically this is going to select the first element with a class of clock in our case i've only got this one right here so now if i save this and go inside the the console how we can then log out the clock element and we can see right here we grab the actual element itself so now let's make a new object using this class and pass through the element itself so now let's make a new constant right here called clock object equal to a new digital clock and then we're going to pass through the clock element right there so now if i console.log from up here this dot element and then save this we can see automatically upon creation of the class it's logged out the it's logged out the element right here inside the console and we can see now of course the object has a has a reference to the element itself so now let's move on to actually applying some time logic okay so we're going to need a method on this class which is going to give us the current information about the current time so we can call this method right here gets time parts okay so this one like i said is going to return us information about the current time we want the hour the minutes and the am or pm so this right here is going to make a new constant chord now equal to a new date so this right here this now contains information about the current time such as all of those things hour minute etc so that being said let's return a new object from this method right here containing three properties the first one is going to be hour this is going to be equal to now dot get hours so essentially get hours right here is going to give us it's going to give us the current hours value between 0 and 23. so for example if it was 11 pm at night it would give us 23. so because we want 24-hour time we need to apply mod and then 12 on top of that so now if it was for example 23 we say 23 mod 12 will give us 11. for example if i go inside the console and i say 23 mod 12 we get 11 right here if i was to say for example 8 o'clock if i say 20 mod 12 we get 8. if i was to do something like for example 9 a.m 9 mod 12 is still 9 so am is going to work perfectly fine the problem is if i was to do 12 pm so 12 mod 12 we get zero so if this right here gives us zero we actually want 12 so with that being said we can just say or 12. so basically here we're we're just saying grab this value if it's 0 or falsie then or and go to 12 giving us 12. so now we can move on and we can say minutes is going to quite simply just be now dot gets minutes so get minutes and that will give us between 0 and 59 for the current minute and lastly we can just say is am this right here is going to be a true false boolean value it's going to be quite simply now dot get hours is less than 12. so basically if the current time is less than 12 then of course we are in the am therefore it's going to be true so now if i was to console.log right down here clock objects dot get time parts we can see in the console we get all this information right here we get 9 as the hour then 37 as the minute and then am pm is going to be false so that's working perfectly fine so now let's make a new method inside here which is going to take this this method's value so this object and then put it inside the html so that being said let's go up here make a new method called update and this right here is going to firstly grab our time part so we're going to say const parts equal to this dot get time parts and then let's make a new constant for minutes formatted okay so the reason why we need to format the minutes is because in the case where the minute value is less than 10 so basically between 0 and 9 a single digit value if we put that inside the html it's going to give us something like this so it's going to give us for example 12 8 so we actually want this to be 1208 we need to add that extra zero before the actual value so that being said minutes formatted is going to be parts dot minutes okay then dot 2 string then we can say dot pad start we can say pad start 2 and then 0. so this right here is going to ensure that our value is two total characters and for the remaining characters fill it up or pad it out with a zero so in this case if i was to say for example something like two then pad start past passing 2 and then o for example we get 0 2. same works for 8 for example if i say 8 we get 0 8. so that is what that right there is doing so now we can make another constant called time formatted and this will simply just be the hour colon the minute so we can say right here using the backticks using javascript template strings we can pass through here using dollar sign and curly braces we can pass through parts and then hour to grab the hour and then we can say colon then we can just simply do once again minutes formatted and pass that through right there to give our colon then the minutes value falls to console.log time formatted and then if i call the clock object dot update save this we get right here 9 13 9. perfect okay so now let's make one last constant called am pm this one is going to quite simply just be equal to parts dot is am then we do am otherwise we do pm so basically if the current time is in the am then we want am otherwise we want pm right there so that being said let's now quite simply say this dot element dot query selector let's select the uh the clock dash time element right here so basically we're starting from the container of course this one right here and we're selecting the next element with the class of clock dash time of course this one right here so um we're done that then we say dot text content is equal to time formatted basically grabbing this value and putting it inside our clock time span let's do the exact same thing for the clock am pm this time of course being am pm as our variable so now our constant so now saving this right here we can see we get 9 41 pm upon calling our update right here so it's working perfectly fine so far so now it's going to be as simple as just making this run automatically so and also every second okay so let's make a new method right up here called start and this one is going to ensure that our clock starts and actually works as the time progresses so for the start method we're going to say sets interval and inside here we're going to simply run a function so this function is going to be this dot update so basically we're going to run the update method right here every 500 milliseconds so basically every half second we're going to check the time and of course update the value this ensures that the time is quite fast and doesn't lag behind you could do something like one for example that will be that will be quite fast so something like i think 500 should be sensible so now saving this right here and going inside sorry on the on the bottom here if i call clock object dot start it is now going to automatically every half second check the time and then update it as it goes along as you may have seen right there upon refreshing there is a slight delay the reason for that is because this is set to 500 so it only starts after half a second so therefore if we just call the uh this dot update uh as soon as this method gets called we should now see automatically straight away it's gonna uh you know obviously show the time so let's save this once again you can see it's working perfectly fine right there so now it's going to be as simple as just of course once again calling this star method and then going back inside the index.html let's remove our our 12 45 pm dummy text and we can finish this project off by just including a custom font so head to fonts.google.com and you can do a search here for any font you want for example i'm using the font which is called concert one so once you choose your font right here you're then prompted with a bunch of different styles so for example in my case this font only has one style so i'm going to select this style right there and then i'm going to go to the embed tab and i'm going to simply copy and paste this link right here and put it inside my head and then upon saving this it's actually got usage instructions so we can copy this font family css rule and then paste it inside our clock time and clock am pm selector so copy this and just paste it right there now we should see our custom font working and it's working right there perfectly fine so that is how to create a digital clock using pure html css and javascript thanks for watching and i'll see in the next one

Channel: dcode

Views: 20,150

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, website, web development, project, mini project, html, html5, css, css3, javascript, js, class, classes, es6, date object, momentjs, time, date time, format, 12 hour, 24 hour, display, selectors, elements, element, dom, document object model, queryselector, methods, functions

Id: JXHgDS8rIkM

Length: 18min 53sec (1133 seconds)

Published: Wed Oct 21 2020