Posts

Showing posts with the label countdown

what I learned from 10 Javascript Projects from Florin Pop

Image
When you start to study Front-end development, you will learn HTML, CSS, Javascript and then the other frame for easy building such as React, Angular, VUE.  The Javascript knowledge is the basis for a front-end developer. Even when you connect with React for front-end or Node.js for back-end. So I am trying to practice Javascript with small projects to improve my skills. Actually, it's never outdated for these years, the basic knowledge contains in the projects usually. I choose the 10 Javascript projects in 10 hours of Florin Pop, and I can not believe I really spent a whole day doing it. For viewers who would like to get more details. here is his Github  code. And I also will show the code below for easy checking. 1.countdown timer See the Pen countdown timer by Yifang Di ( @diyifang ) on CodePen . 2.Quiz App See the Pen Quiz App by Yifang Di ( @diyifang ) on CodePen . 3. recipe app See the Pen Recipe App by Yifang Di ( @diyifang ) on CodePen . 4....

Custom Countdown with Javascript

Image
  Features: video background Date picker with Date() Calculate the time  setInterval() for update time Select only future date or today Local storage when refresh page CODE Github There are other type of countdown demo: First one is with jQurey and also fixed time setting.Second one is Javascript too, but type in the countdown time directly.   countdown clock with jQuery Countdown using JavaScript HTML video insert overlay is the white background with opacity input container is the default input section with a form.  After submit the input, the countdown shows up. When the time reach the 0, which means current time is equal to picked time. The info comes out. And it also can start the new countdown to the default section. CSS basic set up the font from Google fonts background video and overlay centered and covered. container is the while background section which will show three different div. And all the stuff centered. Inside the container, the form with two in...