Retired Techie
Getting older, not necessarily wiser!
Analog/Digital Clock – JavaScript – Part 3
Published on November 18, 2021 at 7:08 am by LEWIntroduction
In this post we will refine the idea from the previous posts by creating a model of our program. At this point the model will be a simple starting point for this coding project. It should cover basic functions and not much else.
Once we have an idea of what the program should look like, we will expand our model with pseudo code, before beginning the actual coding process.
Building a Model
There is no right or wrong way to do this. And I can honestly say I have used different techniques on different projects. You may have to work your way though several different types of models, before you find one you like.
For this project I think I am going to use a flow chart to create a high level overview of this project. Working in a drawing program (LibreOffice Draw in this particular case), I came up with this simple flow chart.
Analysis
A simple model, yes? It does not have to be complex at this point. What it shows us is the basic program structure and what file types we will need.
Since this is going to be a browser clock it all starts with an HTML file. The best way to deal with variables in our HTML file is with Java Script. Technically we do not need a CSS file, but that would mean all display parameters would need to be specified inline. A CSS file makes it much easier.
Another decision we will have to make is if we want all items in one file or separate files. In the case of HTML, we can include both the Java Script and the CSS in the file itself or we can reference separate files from the HTML header. My preference is to use separate files.
Following “my” standard naming conventions these files will be index.html, default.js, and default.css. They will all be located in a single directory, as this simplifies writing paths.
Alternative Models
I chose to use this sort of visual representation. If I did not do it this way, I would probably use high level pseudo code. You can model your program any way you want. In fact I suggest you try different methods to find what works for you.
Conclusion
Modeling your project should not normally be a long or complicated process. The point is to flesh out your ideas into some sort of structure. Our intent is not to write the entire code base at this point.
Once you have your basic model, I suggest creating an archive folder for your project, and saving a copy of your model as version 1. Models, like everything else will change as you progress through a project.
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