CodemySite_Web development

course from Brad Traversy Github code Features: dynamic new year  with 1 second loader cal the difference between new year and current HTML the year is a dynamic new year display the countdown includes the days, minutes, hours, and seconds loader image shows when page loads CSS add the background overlay with ::after and all the other upper layer First, hide the countdown to show the loader For a responsive browser with media JS select elements DOM get current year with Date().getFullYear() newYearTime is current year +1 with date and time new year show in the year section every second the function runs once. calculate the difference between new year's time and the current time. calculate the days, hours, minutes, and seconds of difference seconds total=diff/1000 and the %60 is extra seconds minutes total=diff/1000/60 days total=diff/1000/60/60/24 hours total=diff/1000/60/60 and with ?...:... to make sure every time is two numbers After page loaded one second, the loading hide, and...

 About anolog clock, there are may ways do in Javascript.  The Math thorey is to calculate the degree depending on how many parts you want to divide. Because the circle is 360 degree. The basic is one minute equal to 60 seconds, one hour equal to 60 minutes.  First,  we need a clock on page,so there are several ways. 1.canvas Acording to W3C clock , it's clear that drawing a canvas is a good visial resolution. with getContext('2d'),and draw the clockface,number and time. The canvas drawing use the line ,stroke and fill a lot.  such as the drawFace(), the circle with radius Math,because the circle is 2PI*radius,and fill with color inside. 2.svg there is a way to use svg in Html. Like the code, the width and height can be set in html with svg. Demo more details here 3.html it's straight to set everything in the html.maybe it's not very decent code,but easy to understand for beginner. DEMO Github 24 hours display clock below layout every number and hand in html. A...