Create a Date Time Widget with HTML, CSS & JavaScript

how's it going guys my name is dom and today we're going to be creating a date time widget using html css and of course javascript it's going to look something like this as we can see we have two parts we have the time part and then we have the date so this right here is going to represent the current time and as your minutes or your days go by it's going to update automatically without the user doing anything now something like this does seem relatively straightforward and simple but we're actually going to be using quite a few different technologies such as string formatting the date object itself set interval we're going to be covering js doc briefly and as well as including fonts from google fonts to get custom fonts and as per usual all of the source code is going to be linked down below if you would like to download and follow along while you watch today's video okay so when it comes to the code for this date time widget we can see here i've got this empty index html with nothing inside the body i've also linked up a css file as well as a javascript file right here inside the head and we can see they currently sit within a directory called css for the css file then of course js for the javascript file now if you're going to follow the same setup as this right here it's very important you guys also include the defer attribute on your javascript tag this way the script is only going to execute once the document has been loaded and you don't run into errors regarding you know unable to find uh elements and things like that so once you have the same setup as this we can now begin in the html before moving on to the css and then lastly the javascript to of course build this date time widget so for the html it's going to be relatively straightforward we're going to have this main parent div with a class of date time and this right here is going to contain elements for both the time and the date so in the example that i showed you earlier the time is going to be at the top and the date on the bottom so we can follow the same structure in the html so we'll say here a new div with a class of time and a second one here with a class of dates and this is all we need when it comes to the html structure for this date time widget now i'm also going to include some dummy data inside both of these elements here just so we can actually see something when we get to the css to of course style these up so for the time i'll just say 10 37 a.m and for the date i'll just say something like june 9. uh oops my mistake thursday uh june 9 2022. so i'll save this here go back in the browser and we can see we end up with something like this so of course we can now use css to convert this right here into this right here all right let's go back inside vs code and head into the css file so when it comes to the css we can begin by setting a dark background on the body so we'll just say here triple two this of course isn't directly related to the daytime widget but it's going to look a bit nicer on the eyes and we can drop down now and begin targeting the date time widget itself so this is where the majority of the css is going to be held so for this one here we can set a base font size of 16 pixels so we have this 16 pixel base font size and both the dates and the time are going to receive font sizes relative to this here i'm going to show you more on this later on but for now we can set this base font size let's give this a padding of 24 pixels a text color of white okay a background of a lighter gray than the body so we'll just use triple four here i'll save this scope back in the browser and we end up with something like this okay back inside vs code now we can also apply a box shadow on this container here we'll say 0 0 10 pixels then rgba and give this a 25 opaque black background sorry box shadow let's also give this a border radius of 4 pixels alongside a border right of 10 pixels then using the decode green color we'll say 0 0 9 5 7 8 and give this a style of solid i'll save this go back in the browser and we end up with something like this we have that box shadow the border radius and of course that green bar on the right side for the border let's head back inside vs code now and finish off the css for this container we're going to be giving this a width of 400 pixels here as well as a font family of sans serif we're going to be changing the font family once we're done with the css and load in a custom font from google fonts to make it look a little bit nicer but for now we'll just say sans serif i'll save this go back in the browser and we end up with this right here as we can see if i go back to the example it's the same width but the font size is so much larger in the example so we can now update the font sizes to of course reflect what they should be back inside vs code let's now target the time so when it comes to the time part we can begin by setting a font size of 3 am now because the time element is a child of the of the date time okay this em just means three multiplied by the current font size and because we set the base in the parent it's basically just look 3 times 16 which gives us something like let's just figure it out real quick 16 times 3 okay 48 all right under pressure it's hard to do math guys so i apologize but this just means 48 pixels three times 16. okay we can also give this a color of zero zero nine five seven eight and i'll just scroll up here and pick the light green just like that we'll save this go back and we get this right here head back into css once again we can target the date this time and we give this a margin top of 12 pixels this right here is simply just half of what we set for the padding now you may wish to use css variables here and the calc function to of you know make this a little bit more dynamic and reusable but i'll just hard code 12 as half of 24 here and a font size of 1.75 em or 1.75 times 16. i'll save this go back in the browser and we end up with this right here so we are now done with the css mostly aside from the font change so when it comes to loading custom fonts on your website or your application it's very straightforward using google fonts so if i go inside this tab right here i'll leave a link to this below as well google fonts lets you choose from a bunch of open source fonts which you can use on your website so i want to sorry i want to choose the font called intel here i used this inside the uh you know example so i'll just scroll down here and there it is right there you can also search by category by language front properties so on but i'll just search for this one here go down here now and click on the font all right and now i can then choose my styles so when it comes to uh my my widget here i'm gonna use the font weight of medium 500 okay the regular four hydrant is the standard font weights you know when you have something like this but 500 is a little bit thicker and i like how it looks more so i'll choose medium 500 then on the right side here you can view your selected fonts it says enter medium 500 i can now just simply copy the links here which is provided to me then go back in the html and just paste this at the top inside my head and now i'm free to use the interfont within my webpage so let's go back in css and change the font family here to be enter and then send serve now we'll notice that essentially because i've only loaded up the 500 font weight this right here is going to be 500 by default so it might be better to explicitly tell chrome to use a font weight of 500 so let's get back inside here now and just say look font wait and make it 500. i'll save this we should see no changes as we can see here there's no changes so we're fine with that and we have this nice font loaded on the web page you may also wish to use like a digital font if you would like to but i'm going to stick to this nice intel font okay great so the html and the css is done we can now move on to the javascript before jumping into the javascript though i do want to remove the placeholder time and date that way we're going to know that the values are going to come directly from javascript so if i go back in the browser now it's going to be empty cool let's head inside the main.js file here first step is going to be to get a reference to both the time and date html elements so we'll say const time element equal to document.queryselector and select the first element with a class of time there's only one in the html so of course it's going to be this div right here and the same goes for the date so date element selecting the class of date great so now we can define basically two functions which are going to format the time and also the date all right so let's write a new function here called format time now this function is going to take through a date object so we'll say date here just like that so it's going to take this date so remember a date object in javascript represents a point in time it's called a date but it actually contains time information as well so let's just add some js doc here as well this is a this is um it's an optional step right but it's going to let us provide the data type here that means vs code can then know that this right here is a date so we'll get things like date dot and we get this you know autocomplete for all of these different methods we can call so mourn this shortly okay actually let's talk about that right now so when we want to format the time basically we want to return from this function here right we want to say for example 10 57 pm we want this result from this function so we're going to take this date and swap out these values with the actual values from the date okay cool let's hop up here and we're going to say const hours 12 equal to then we can say date dot get hours mod 12 or 12. so this right here is going to grab the current hours from this date object now this hours here is going to be a number between 0 and 23. it's in 24 hour time okay then sorry then it's going to say mod by 12 which means look get the remainder of the division of 12 and this right here is going to basically convert your 13 into a 1. so you can say 13 1 pm or 15 3 pm and so on if the result of this is 0 it means it's either midnight or midday so we say or 12 because 0 or 12 is going to give you 12. so we're simply choosing 12 over 0 here now i want to just stop here and sort of run this code because i feel like i'm talking too much and not actually explaining this properly so let's just simply return hours 12 whatever this is from this function temporarily okay then i'll go back in the browser now i'm going to say here format time so calling that function and passing a new instance of the date so when i say new date this just means make a new date object of the current date time i'll press enter and we get 11. it is currently 11 pm so i get 11 there okay if i was to say newdates.gethours which we did inside that function it gets 23 and we're taking that 23 mod 12 give us 11 so we get 11 pm that's all this is doing it's basically converting your 24 hour time into 12 hour time cool let's make a second part here we need the minutes as well so we'll say here minutes equal to date dot get minutes and it's going to be as simple as that because minutes right here it's going to give you a number between 0 and 59 for the current or whatever the date object contains for the minutes part okay then down here we can use javascript template strings so the back ticks near the one on your keyboard and we'll say here using dollar sign and curly braces we'll say hours 12 colon then simply minutes okay i'll save this go back in the browser i'll run the format time again and this time i get 11 18. it's currently 11 18 pm all right great so the problem with this is if the current time was between sorry if the minutes is between 0 and 9 then it's only going to be a single digit so you might see something like 11 colon 9 instead of 09. so we need to pad and add those zeros to these numbers if they don't already exist so we'll say here for both of these hours and minutes dot to string so converting it to a string allows us to then use a method called pad start and we'll say let's pad the start for two characters and replace them with zeros this just means look it's gonna guarantee that this number is gonna be at least two characters in length okay and any remaining stuff is converted to a zero giving us from obviously uh nine into o nine just like that for both the hours and the minutes okay save this back in the browser and now we can see we get 1120 the same result but like i said it's going to be different if one of these was you know a single digit now how do we get the am or pm it's very straightforward okay let's go back inside here make a new constant chord a.m or sorry is am this would uh this right here is going to be a true or false if it's true then it's am if it sounds it's not am or it's pm right so we'll say here if date dot get hours is less than 11 or sorry less than 12 then you're in am once again this get hours is going to be between 0 and 23 so if you are 12 or under you're in am so it's going to return true then simply at the end of this string here we can add a space once again using curly braces we can say if it is currently am okay dollar sign we can say am otherwise we can say pm just like that so is am am otherwise pm save this back in the browser and we get this right here 11 21 pm perfect so we have the uh we have the time part out of the way this right here was the most complex part uh probably of today's video so that is all done we can now move on to the exact same thing this time for the date section we'll say function format date it's going to accept a date here and once again we can copy the same js doc from above here to give us those type hints just like that all right then we'll say down here because when it comes to this one here we need to display the month as well as the day of the week so unfortunately the date object has something like get day this right here is going to return you the day of the week between 0 and 6. so indexed at 0. the same goes for get month it's going to give you the month between 0 and 11 so that right there makes it convenient for you to use an array and then convert the numerics into a string so i'm going to copy and paste what i had earlier because it'll take a while to write out but basically i'll paste this in here you guys are also free to of course download this code and copy it yourself but i'm making two constants here one for days one for months it's going to be simply an array of every single weekday and then every single month so then we can say days at index 0 is going to be sunday and the same thing for the month so we can use this in combination with those getters on the date object like this to then simply grab out the string version of those days or months okay and this right here is going to be pretty straightforward we can simply return using template strings once again and we'll say here dollar sign curly braces days at index dates dot get day just like that okay so convert your day into a string version then we'll say so for example thursday comma then we'll say uh what's it going to be month so thursday june something right we'll say month looks like this and we'll say date dot get month okay and we can say space and now we can present or we can insert the actual uh date itself so between 0 and 31 or 1 and 31 we'll say here curly braces date dot get date so get date it's going to return you that numerical between 1 and 31 day of the month then say space again and this time get the full year so we'll say date dot get full year giving us the you know 2022 as an example let's now save this hold on one sec let's make this months instead let's now save this go back in the browser call this time the format date press enter and we get thursday june 9 2022 just like that okay so we have both the format date and the format time functions done we can now make use of them down here inside a set interval so set interval is going to run your function which you pass inside here every set amount of milliseconds so we'll say here as an example 200 so every 200 milliseconds or one-fifth of a second it's going to run this function this function is going to simply create a date object for the current time and then populate these elements with the corresponding date times we'll say here const now equal to a new instance of dates then drop down here and just say time elements dot text content equal to format time then pass in the date and do the exact same thing this time for the dates elements text content format date with a capital d and passing the date let's now save this go back in the browser oops my mistake guys let's call this one actually now there we go okay let's go back in the browser and we can see we get 11 25 pm on thursday june 9 2022 and we are done with the date time widget okay i encourage you guys to uh you know maybe you can even look at adding seconds to this or milliseconds because you know this will update this this updates every one fifth of a second so once the minute goes to 26 it should update here but i encourage you guys to add seconds to this i also encourage you guys to look into the different methods you got here like get hours get minutes and so on and you can sort of see what they return okay let's go back inside here now we can see now it's converted to 1126 automatically due to that set interval that is all for today's video guys hope you enjoyed this one if you did make sure to drop a like and subscribe to the channel and i'll see you in the next video

Channel: dcode

Views: 20,008

Keywords: html css javascript display date time, how to display the current date with javascript, how to display the current time with javascript, how to display the date in javascript, how to display the time in javascript, how to format date object in javascript, how to use dates in javascript, javascript dates tutorial, how to display day of the week with javascript, how to format time with javascript, how to format dates with javascript, javascript widget tutorial

Id: _L6vpV_3SaE

Length: 21min 32sec (1292 seconds)

Published: Thu Jun 09 2022