JavaScript Project: Countdown Timer
Learn how to create a programmable counter that counts down and then triggers an event using JavaScript. I recommend watching the whole tutorial first in its entirety, one time. Don't do any typing yet, just try to absorb the topic presented in the big picture. Then, on your second run-through, go through the tutorial and do the typing and challenges. In this way, you have a better picture of where you are headed since you already surveyed it once -no surprises. I hope you find this tutorial helpful in learning JavaScript and programming in general. Timestamp: 00:01:07 Text Editor and Web Browser Requirements 00:01:30 Creating Project Files 00:04:59 Importing Google Fonts 00:05:51 Importing Fontawesome Icons 00:06:06 How to Use Fontawesome Icons 00:09:30 Overview of the Timer User Interface 00:13:44 HTML Markup 00:14:35 CSS selectors used in this project -copy them here 00:14:46 Overview of each CSS selector functions 00:16:24 CSS styling (coding) 00:28:07 JavaScript: Overview and Approaches 00:31:00 Sample calculation of deltaT (Dimensional Analysis) 00:33:33 JavaScript Date Objects 00:34:52 JavaScript coding -Date Objects 00:40:01 deltaT calculation -CHALLENGE 00:42:35 Implementing deltaT calculation in our JS code 00:46:02 deltaT implementation -CHALLENGE 00:47:51 Using the JS setInterval method to call our function multiple times 00:48:59 Using the JS clearInterval method to stop our timer 00:51:20 Creating our event -message 00:51:48 Configuring the future time 00:52:10 Creating our event -Fontawesome Icon 00:52:52 Displaying a Fontawesome icon -CHALLENGE 00:54:00 How can we make our elements blink? 00:58:30 Implementing animation in our CSS files -@keyframes 01:01:48 Complete HTML File 01:01:52 Complete CSS File 01:02:22 Complete JS File 01:02:40 Calculation alternative -Remainder Operator 01:03:31 Final Thoughts -Ending
Download
0 formatsNo download links available.