Analog/Digital Clock – JavaScript – Part 4

Published on November 19, 2021 at 8:32 am by LEW


Using the model developed in the last post, and the research from earlier posts, we can start putting together the pseudo code. To do this we will step through the basic model and expand each step as needed.

Remember that at this point we are not interested in writing exact code. We want to get the overall structure created.

Defining Variables

Our first block is defining variables. There are two places this applies. First to the JS, and second to the HTML/CSS. Lets focus on the JS first.

Since we are making a clock, we will need various time keeping variables. For the analog display we will need hours, minutes, and seconds. For the digital part we can add years, months, and days. Lets give them some descriptive names that we will remember latter; current_hour, current_minute, current_second, current_year, current_month, current_day.

That was easy enough. However, research into the new Date() function told me that it returns numeric integer values for everything. I just decided I want to modify the final design to display months by name, not number. So this is a revision already. Need to make a note about what and why.

Fortunately this is early on and very easy to do. I just need a character array that when given the month number can return the month name. This will actually be a constant, not a variable. We will call it β€œmonth_name”.

There may be more variables or constants once we start coding but for now we have the main ones we need. So we create a JS variable section with the following pseudo entries.

Thinking about the HTML/CSS, we probably need to refine our model with a picture instead of pseudo code. You can try just writing it out, I did. It may work for you, but I decided I needed a picture instead. Again, whatever works best for you. This is what I came up with.

Pseudo Layout for clock

Looking at this, I see I will need the following container structure for the actual display.

From our previous research (you did do your research?) we know these are all going to be <div></div> elements, and they will all need either a ID name or a Class name. At this point lets keep things simple. I am going to name the top level containers analogclock and digitalclock. Going down a level, I am choosing the following names; clockface, digits 1 -12 (aka digit1 for example), hourhand, minutehand, and secondhand. For the digitalclock container I will add digitaltime and digitaldate.

Other Elements

The main control will come from the JS. The HTML/CSS is static for the most part. So we need to define some additional high level blocks for our pseudo code.

We are going to need an indefinite loop, and within that loop we need to set the date and time, move the clock hands, and update the digital time and date. There may be a few additional tasks to consider also.

My psuedo code, after variable definition looks like this.


In this post we have moved from a high level model to pseudo code. The next step is to start translating the pseudo code elements into actual code.

But for now we should review our written pseudo code, make sure it flows the way we want, and if necessary make any adjustments. If you do make adjustments, don’t forget to document and keep track of versioning.

Analog/Digital Clock – JavaScript – Part 1

Analog/Digital Clock – JavaScript – Part 2

Analog/Digital Clock – JavaScript – Part 3

Analog/Digital Clock – JavaScript – Part 4

Analog/Digital Clock – JavaScript – Part 5

Analog/Digital Clock – JavaScript – Part 6

Analog/Digital Clock – JavaScript – Part 7

Analog/Digital Clock – JavaScript – Part 8

Add New Comment

Your email address will not be published. Required fields are marked *