In previous video, we have discussed what that object is, how to work with date object methods, and
I'm going to use it in practice.
I want to build a simple digital clock project.
Before we actually start, let's take a look on the final version of this project.
So here we have the weekday name, then the digital clock, which displays the current time and is working
dynamically without refreshing or reloading the page.
And also time is represented in 24 hour format.
The project is not designed using Cassus because I think that at this point it's not really important.
We're going to create clock from scratch and therefore I'm not going to waste time on styling it and
writing Sisco's.
You can feel free and design it if you wish on your own.
All right.
First, I'm going to create a new folder on desktop and call it digital clock.
Then open 18 brackets.
And create a new file in the HTML, then create another file for JavaScript, call it script.
The next that we are going to do is to create a basic structure in HTML document, for that I will use
the special extension Amet, which is a great package for Code Aditya's.
It allows us to write some codes in a short way.
So in order to get the basic structure of documents, I need to write just the exclamation mark.
Then press the top.
And here we go.
If you don't use much package, you can just post a video for a while and write it manually, or you
can just download and use source files of this lecture.
All right, let's change the title of the page and write a digital clock, then link cryptologist file
to indicate that HTML.
You already know how to do that open script tax.
And then in source attribute indicate the name of the files cryptologist.
And the last thing that we have to do in HTML file is to create empty-headed elements with ID Killock.
Which then will be used to display digital clock on the page.
OK, everything is ready for start.
Let's run this file.
Then turn off live preview mode and also Open Castle up.
All right, the first thing that we are going to do is to create a main function in which we will put
all the stuff to build the clock.
So write function and call it digital clock.
The next step is to get the current state and time using date object, so create variable dates and
assign to it date object.
In order to explain well and test the code that we are writing better, let's call this function.
And then display the current dates in council, right, cancel that club date.
All right, the next we need to get the current time, so I'm going to use get date object methods,
which you already know from the previous video, in order to get current hour, we have to write variable
hours equal to.
Dates don't get our.
Let's display it in council change dating to our.
So here we have the current hour, the next that's got the current minutes and you'll get minutes,
method creates new variable minutes and assign to it dates that get minutes.
Then again, change hours into minutes in Castle Rock and roll out the page so it works and in the same
way get the current seconds creating a new variable seconds.
And essentially, it did not get seconds method.
Change minutes into seconds.
So if you take a look on the final project, you will see that before the clock, we have here the weekday
name, so therefore we need to use another get method which allows us to get the day of the week, create
new variable and call a day that assign to it dates that get date method.
And then in constant dialogue, change seconds into de.
You see that we have three in Castle, which, as you remember, is the index number of the current
day of week, our clock will consist of hours, minutes and seconds, and we need all of them always
to be expressed with two digits.
So let's start from our change your day into hours.
You see that here we have two digits, no, but after midnight, we will have only one digit and that
would be a problem.
So we need to fix it.
And for that, I'm going to use if statements which will check the number of digits.
So if the length of the characters is less than two, then we need to manually write zero before the
digit.
In order to count the number of characters, we need to use a length property which generally works
with strings, but not with no values.
Let's demonstrate it briefly in council right a equals 15 and use a length property.
Right, a total length.
You see that it gives us undefined.
But if we write a equals of 15 as the string and then use length property, we will get two, which
means that string consists of two characters.
All right.
It means that we need two course hours, minutes and seconds into a string values.
In order to do that, we can use a simple way just plus to the empty strings.
Because of the type coercion, those numbers will be coerced into swing values, and after that, we
are able to use land property.
So creative statements and check if the number of digits is less than two as the condition.
Right.
Our thought length is less than two.
If this condition is true, then we need to write hours equals zero plus again hours.
Let's do the same four minutes and seconds.
Create each statement and write the condition minutes.
That length is less than two.
Then again, inside racists, right minutes equals to.
Zero plus minutes.
And that creates another if statement for seconds, right?
Second thought length is less than two and inside the price is right, seconds equals zero plus.
Seconds.
All right, let's see.
As a result, what we have already got creates variable clock and display the current time in digital
format assigned to this variable hours.
Plus place your column that plus minutes, then again, column.
And finally plus seconds.
Run it in council, right, constant the clock, clock, reload, and you see that we have current time
and digital clock format.
OK, perfect.
The next step is to define the relevant weekday name.
We know that Cattai method gives us the zero based index numbers of the current days in order to get
the weekday name instead of the index number.
It's perfect to use a right, which also uses zero based in its numbers for its items.
So creates a right and call it weekdays.
Then insert here weekday names kind of short way.
From Sunday to Saturday.
In order to get the current day name, we need to use weekdays with a variable date which will be passed
inside square brackets as an index number.
So we have to write weekdays and that in square brackets, the variable date.
Let's reload and see that we have current weekday name as Wednesday.
I hope that everything is clear for you.
If not, you can post a video and think about it.
I'm sure that you will find out everything because you already have enough knowledge regarding JavaScript
basics.
All right, let's move on.
It's time to display our clock on the page.
And I'm going to use a method which actually is a part of document object.
Model is the model for manipulating on Web page.
Some of you may already know what Dom is.
The only purpose of using this method is just to display the clock on the page so you don't have to
worry if you see this matter for the first time because you will learn about it in the comic sections.
In order to display the clock on the page, we need to access on having elements using it, attribute
and display the clock as the content of it.
So write documents that get elements by ID.
Inside parentheses, insert the ID clock.
Then write in HTML.
And assign to it variable clock rollout and see that we have our digital clock with weekday name on
the page, but we have here a little problem, it doesn't work dynamically yet.
You need to refresh the page each time to get the current time that's fixed.
That used one of the JavaScript built in methods, which is called set interval.
The interval method calls a function at specified intervals which are counted in milliseconds.
So we need to write set interval outside the main function.
It uses two parameters.
First, one is functioning, but we need to write it without parentheses.
And the second one is the interval in milliseconds, so right here, 3000 thousand milliseconds means
that the function will be called in every second.
That's reload the page and you see that our digital clock is working dynamically without refreshing
Avrich time.
All right.
Congratulations.
You have just built your first project, digital clock application, using JavaScript.
I know that it's a very simple one, but for the basic level, it's really perfect.