Labels

Website Programming: How to Make a CountDown Website

 



      Bandung, Indonesia, October 13, 2020, 16:18PM - This lesson is about making a website which can countdown until the new year, many people are so excited about the new year, why not? There will be fireworks, festivals, New Year's Holiday, etc. Now, is the time we're work from home, we have much time and I thought we can learn something when we have free time. As you can see that I've made new year's count down with HTML, JavaScript, and CSS also I put a few effects like border and background color's changer (to make it different with the border), for me this is worth it for you guys to try it. 

    The day of the year is a number between 1 and 366. 1st January is day 1 and December 31 is day 366, what we have to do is a calculation (subtraction). In this lesson, we have to use JavaScript as the main stage of the website and the others (HTML and CSS) are the supporter of the basic of the website and the display in a modern way.


HTML



In HTML, we'll start from <head>, in HTML <head> is the first section in coding that contains information about the website page's property, you can link to an external file. Does this website responsive? Sadly not, and it's your job to make it responsive. In my blog, I share a few articles which are responsive also there are many explanations of why is it responsive.



This is the body of HTML where you put content on the website's page, you can put text, pictures, videos, and a bunch of creative stuff inside. From the codes, I can say that I put "NA NA NA NA" NA can be a variable that represents time, we only need 2 words to put as a time like 00:00:00:00 and every represent have their own label (div.class). From this labeling and represent I. will connect them to CSS and JavaScript for the display and the function.

JavaScript ( internal )


This is JavaScript which I put in the HTML as internal. How do you put the variable to the JavaScript? c. For example, a client browser in one timezone, getTime() will be the same as a client browser in any other timezone.

CSS ( style.css )


In CSS, I put the external link @import as the link for the font. CSS doesn't provide all types of fonts, only a few of them, even Robot as the international font on the website. I didn't use * as the universal code instead I used the body as local code. Simply put, this lesson has low-level coding, where you only use HTML as the basic structure for the numeric, JavaScript for the function, and CSS for the display.
Also, i import the background in the CSS not in the HTML, simply because I want the picture to be part of the time in the container.


To make the clock looks shooting we have to set the size and the margin for the text. Even the color has important roles in this lesson, with many research to know what kind of colors that many people like, how can I attract them or make them stay on my page. 


Finale, we set the countdown into days, hours, minutes, and seconds.



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

Comments

Post a Comment