Retired Techie
Getting older, not necessarily wiser!
Analog/Digital Clock – JavaScript – Part 1
Published on November 16, 2021 at 7:43 am by LEWIntroduction
In this series of posts I am going to be doing some programming. I will walk through the process I use for creating code. For this project we will be creating an Analog and Digital Clock display for a web browser that uses HTML, CSS, and Java Script.
HTML/CSS/Java Script based Digital and Analog clocks are neither new or unique. You can do a simple search and find hundreds of examples and tutorials. So this bit of coding is nothing new or special. My intent is to cover the process I use for programming projects.
Formulating a Plan
Once I have an idea, my first step is to formulate a plan of attack. Some might technically say the first step is formulating the idea. However that is not what I have experienced. Usually someone has an idea they want (when doing things for other people), or the idea gets into my head, and I cannot get it out until I run with it (when doing things for myself, which I do a lot more of now that I am retired).
My typical plan of attack, once I have an idea of what I want to do is as follows.
- Research. A lot easier than it used to be back when I was doing FORTRAN. I can’t over emphasis the importance of initial research and documentation. You know what you want to do, so now you need to determine how to make it happen.
- Model. Once you research various ways to accomplish your idea, you will be able to better refine your idea. At this point we want to make a model of some sort. We will also want to start using some form of version control
- Pseudo Code. Translate your model into some form of pseudo code. At this point you want to work out the data flow and logic, not the exact coding steps.
- Code. Now it is time to start writing the actual code.
- Test and Modify. Now we start the testing process. During this process we will want to cover as many variable conditions the user might run into as possible.
- Finalize and Document. Once you get everything working you will probably want to clean up your code and make it easier to follow when you come back to it years later.
Development and Coding Environment
Let discuss tools. There are a lot of Integrated Development Environments (IDE) out there. This project does not really require a IDE, so I am keeping it very simple.
Don’t get me wrong. IDE’s are great for more complicated projects. Just be aware that some IDE’s are rather specific in scope. There are several commercial and open source IDE’s that would work for this project, but they tend to be a bit of overkill. For this project I used a good text editor, and multiple browsers.
You could technically get away with a really simple text editor, and one browser. But some more advanced text editors have really nice features that can speed the process along. And as anyone who has ever written anything for the web knows, all web browsers do not display all things the same. So you will want to test this project across a range of browsers.
What I used
Most of my preliminary work was done in Debian Linux, because that is what is on my main computer and that is what I use most often. I did some of my final work in Windows 10, because I have a game machine to do it on, and that is what most others will be using.
For a text editor, I used Kate, although Notepad ++ on Windows will also work quite well.
For test browsers I used Firefox, Chrome, Internet Explorer, Safari, and Microsoft Edge.
Conclusion
This has been a short introduction to my coding process. In the next several posts, I will go through the individual steps in more detail.
As I mentioned, this is more about the process than the actual code itself. But I will be using examples from my Analog/Digital Clock program to highlight some points. I will provide the entire code for this project in the last post in this series.
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