Labels

Website Programming: How to Make a Digital Clock Pure HTML, JavaScript, and CSS

    




      Bandung, Indonesia, October 11, 2020 15:25PM - The social and cultural influence of the clock can be traced back to the Middle Ages. Christian monasteries created an environment of order and familiarity to battle the outside threat caused by the fall of the Roman Empire. They would use the ringing of the bell as a call for prayer, a means, and a symbol for structuring human behavior.

    Let's think about your daily schedule, you probably wake up every day at a certain time (either with the help of an alarm clock), you go to school or work or do something urgently (with a car or bus that "saves" you time necessary to arrive upon your destination), use technology that helps you manage your time better, you go to sleep at an hour that is culturally determined as "too late," or "too early." It is hard to imagine life without a clock; you would not be able to do activity in the same way you do due to the complexity of your everyday life and being dependant on measurements of time.

    In this lesson, I'm going to teach you how to make a digital clock for your website using HTML, javascript, and CSS. So what is this digital clock? a clock that displays the time in numerical digits rather than by hands on a dial, I had placed a picture in this article as you can see that the digital clock I've made is a clock that displays time in numerical digits. That's all for the chit-chat and let's make the clock.

   

HTML


For the first section of HTML, you have to use <head> to put contain's information on the website. Basically, <head> is the place where you put a responsive coding circle like <meta name... charset... content...> (in case if someone opens your website through the smartphone of any device which has different size with desktop, with the responsive coding circle, your website being able to react quickly to automatically adjust for different screen sizes. The other function of <head> is to put a link (external or internal) like a link to the CSS file.


For the body, I put 2 sections. The first is the basics of the clock ( it's hour, minutes, and seconds ) and for the unit of time, I put labels using div#id (with this labeling we can put creative display into the clock like color and reflection.

JavaScript

The second is JavaScript, so I didn't put JavaScript as an external link instead of internal. Why? Simply put, JavaScript has a simple function and it only took a few rows compared to CSS which need more than 50 rows. Back to the topic, as you can see that in javascript we play with the label, first of all, we have to take the data from the body(document.getElementedById) and we have to take our time form the computer ( for example get.Hours() ) and then we put the clock back to the HTML.

CSS ( style.css )



 
To adjust the page's display, we use * as an element to adjust all the pages like margin, padding, and font. So, What is * in CSS? * means the universal, do you know that there are 2 worlds in the programming language. The first is the global/universe where you put a simple coding and the coding applies to all functions. The second is local, local is the place where you put coding ( function, display, etc) to a specific target or labeling.



To put it simply, CSS is the place where you put the display into your website. Your creative ideas are your result


That's all for the lesson
Thank you for reading my blog and see you in the next article 
Labels:

Comments

Post a Comment