Retired Techie
Getting older, not necessarily wiser!
Analog/Digital Clock – JavaScript – Part 2
Published on November 17, 2021 at 7:31 am by LEWIntroduction
In this post we will discuss how to get started both setting up and researching your project. Having an idea, and translating it into a project can be a bit challenging if you have never done it before.
I have no problem jumping straight in with both feet. But at some point for any non trivial coding task, you will need to get organized. I speak from experience when I tell you it is much easier to get organized at the beginning, rather than halfway though a task.
Getting Your Thoughts in Order
Back in the day I would start off with a notebook and pencil. Back in college I used an engineering notebook, which was basically a notebook made of graph paper. Standard composition notebooks or journals also worked well. Even today I still use this method to write down thoughts and ideas when they come.
When you actually get around to starting a project document, I would suggest a computer word processor. Yes there are a variety of programs out there for various aspects of project development. I encourage you to try a variety of methods to find what works for you.
In this case the project is fairly simple, so I take free hand notes, then organize them into a more permanent project document.
Project Overview Notes
For this project I already know a few things. Since it will be a clock in a browser, I will need to use Hyper Text markup Language (HTML) and Cascading Style Sheets (CSS) to display the results. Since I want it to be client side, I will also need Java Script (JS) to make it all work.
Since this is a clock, I will also need to be able to get, manipulate, and display system time. So I will need to look up and read about the JS time functions.
The question to research is if I need drawings for the clock face and clock hands, or can they be programmed in some fashion. And how to get the clock hands to move. The digital part should be straight forward, when compared to the analog part.
Once we have an idea of the main processes we want to implement, the next step is to build an initial modle using pseudocode. Don’t get to hung up on this. It can be text notes, you may want to draw flow charts, use sticky note, or even mind map. What is important is to get something down on paper that you can understand, it does not matter how you do it.
Project Research Results
Getting the Time: JS has a function called new Date(), which looks like the best option to get and use system time. There are several associated object methods we will need also, like getHours() and getMinutes(). We will also need variables to contain these values.
Clock Face and Hands: While my initial thought was to use a drawing of a numbered clock face, a little research showed me that CSS has come a long way since I last did much in the way of web programming. Now you can round corners on elements, position them absolutely, and even rotate them. I am up for the challenge of creating a clock face and hands using just CSS.
Analog Movements: As long as I have been using JS, I have been able to manipulate web pages. My original thought was to display and rotate drawings of clock hands on the web page. But now I should be able to create the hand elements on the web page itself, and use JS to position them.
Conclusion
Having done our initial research, we have an idea of what we want to do, and how we might achieve it. The next step is to create a model, then represent our model with pseudo code, then finally write the actual code and test it.
In the next post we will create a high level model of what our code should do.
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
Add New Comment