Retired Techie
Getting older, not necessarily wiser!
Analog/Digital Clock – JavaScript – Part 5
Published on November 20, 2021 at 9:44 am by LEWIntroduction
We have reached the point in our project where it is finally time to start coding. There are going to be three separate files we will be working on;
- index.html – this is the file we will load into our browser)
- default.css – this will determine the overall appearance of our web page.
- Default.js – this will handle the dynamic clock changes on our web page
I should note here that I am assuming some basic knowledge of HTML 5, CSS 4, and Java Script ES6. If not, the W 3 School has some excellent tutorials and examples.
This is going to be multiple posts long. Up first is the HTML, then we will get to CSS and finally the JS.
Default HTML Document
The first thing we need is a basic html framework which we can build on. So to keep it simple I have included the basic framework below.
<!doctype html> <!-- Project: Name and Description Here Author: Your Name here Version: 0.0.0 Date: Today's Date --> <html lang="en"> <head> <title>Project name Here</title> <!-- Meta Data Definitions --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Client Side Analog-Digital Web clock"> <meta name="author" content="Your Name"> <meta name="keywords" content="HTML, CSS, JavaScript"> </head> <body> </body> </html>
This is probably a little more than you need for this project, but you can save it as a starting point for other projects. Please not the use of comments within the code. These are the entrees between the “<!–” and the “–>” tags. Note that <!doctype html> is not a comment. Also note the usage of meta data in the header. I don’t recommend it, but if you are going for absolute minimal, you can do away with the comments and the meta data.
HTML Page Structure
Our web page HTML template is going to basically be several levels of nested <div></div> (abbreviated from here forward simply as div) tags. By itself it will not look like much until we add CSS styles.
First we create a display div in between the body tags of the html document. This is mainly because of inconsistencies across browser types. Within this div we will add one div for the analog clock and another div for the digital clock.
<body>
<div class=”displaybox”>
<div class=”analogclock”>
</div>
<div class=”digitalclock”>
</div>
</div>
</body>
Analog Clock Face Numbers
Next, we will add divs to the analogclock div. These will contain the numbers for the clock face. This will look a little strange as it will be a div within a div, which I will explain more fully when we talk about CSS. The basic purpose is to rotate the outer div to the correct position, then rotate the inner div back so the numbers are all vertical. We will also need a clock nut in the center to hide the ends of the hands.
<div class="dig dig1"><div>1</div></div> <div class="dig dig2"><div>2</div></div> <div class="dig dig3"><div>3</div></div> etc… <div class="centernut"></div>
Analog Clock Hands
The hands will also be divs, which need to sit within their own parent div. Something we will go into more detail in CSS. Since these elements are to be manipulated by the JS, they need to have a unique ID instead of class.
<div id="clockhands"> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> </div>
Digital Clock Time and Date
This one is simple. We just need two divs, one for the time and one for the date.
<div id="digitaltime"></div>
<div id="digitaldate"></div>
Conclusion
That is it, we have created our basic html structure for our analog and digital clock web page. Next we will need to make it look good with some CSS. So that is the project for the next post.
Below is a link to the html page I created for this project, for reference purposes.
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