Retired Techie

Getting older, not necessarily wiser!

Analog/Digital Clock – JavaScript – Part 4

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

Introduction

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.

• current_hour      Integer  variable

• current_minute    Integer  variable

• current_second    Integer  variable

• current_year      Integer  variable

• current_month     Integer  variable

• current_day       Integer  variable

• month_name        String   constant

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.

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

• Analog Clock
  • Clock Face
    • Clock Numbers 1 to 12
    • Clock Hands Hour, Minute, Second
• Digital Clock
  • Time Display
  • Date 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.

• Rotating the hands correctly is going to require some math
• We may need to do some sort of adjustment at 12 o’clock
• We need to account for AM and PM on the digital time.
• Need to add leading zeros to the digital time

My psuedo code, after variable definition looks like this.

• Start Loop
  • Get time
  • Move Analog Hands
    • Calculate Hand Position
    • Account for 0/12 position
    • Rotate Hands
  • Update Digital Numbers
    • Determine AM/PM
    • Add leading Zeros
    • Display date and time
• End Loop

Conclusion

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

Copyright © 2021-2024 Retired Techie All rights reserved.