Launch Countdown Timer using HTML, SCSS, Javascript

Community feedback

• 

  Suleman•750

  @legion40216Posted about 3 years ago

  its awesome... how did u manage to filp it...

  0

  ---

  

  Omid Heidarzadeh•105

  @Omid-HeidarzadehPosted about 3 years ago

  @ legion40216, Thank you for your comment. I used two fixed elements (at the top and bottom of each widget), each of which contains half of the number, and used another pair for the flipping function. I named them "top-back", "top-front", "bottom-back" and "bottom-front" so that the rear parts are fixed and the front parts rotate 90 degrees. Rotating the front and updating the rear at a given time is key. Also, the rotation should be as follows: Rotate "top-front" which at first completely covers "top-back" to reach and stop in the middle of the widget, and then rotate "bottom-front" which is in the middle, and Is waiting for the "top-front" to complete its rotation, then it will rotate to cover "bottom-back". The Rear parts will be updated when they are covered by the front parts. I hope that I could convey the idea. I think checking my repository and reading my explanation and CSS codes in there can be useful too.

  1

  

  Suleman•750

  @legion40216Posted about 3 years ago

  @Omid-Heidarzadeh ah thank you so much for the detailed reply and i have looked at the explanation on github as well, its a great help and is well explained too.. if it were possible to create a small prototype of the flip animation... would help alot... i believe u also used java script to tune the flip animation aswell...

  Marked as helpful

  1

  

  Omid Heidarzadeh•105

  @Omid-HeidarzadehPosted about 3 years ago

  @legion40216, you're welcome. Yes, I've used javascript to calculate the remaining time and change counter values at specific timings. I have created a small prototype as you suggested. I hope it helps.

  1

  

  Suleman•750

  @legion40216Posted about 3 years ago

  @Omid-Heidarzadeh bro i managed to pull it of, have a look https://legion40216.github.io/birthday_Countdown/practicejs.html but i am guessing the animation is not very good. i tried alot to understand the concept u gave and came up with this. Any suggestion on improvement will be great Guru :)

  1

  

  Omid Heidarzadeh•105

  @Omid-HeidarzadehPosted about 3 years ago

  @ legion40216 nicely done bro. It seems that your solution just needs a little time tweaking to work flawlessly. I think it would be easier to think of counter components as books whose pages will be flipping top to bottom. now we can name pages like this: Page "A" which is showing the bottom part of the current number. Page B which currently rotated 90 degrees and therefore is not visible at first and will show the bottom part of the next number. Page C which is showing the top part of the current number and will be the first page that starts the flipping operation and will only rotate to 90 degrees. The last page is D which is hidden and contains the top part of the next number. Now, the flipping operation goes like this: Page C starts its 90-degree rotation from the top and after 0.5s will reach its target position which is the same position as page B and will wait for the next 0.5s at that point. Page B starts its 90-degree rotation exactly when page C finishes its turn. Page B will show the bottom part of the next number and will cover the bottom part of the previous number (page A). Just before finishing the rotation of page B (~100ms sooner) values of page A and page C will get updated to the same value as pages B & D. When the operation reaches its end, pages B & C will get to their first position immediately but it's not visually noticeable cause they have the same value as two other pages. Pages B & D will not be visible at this point, so they will get updated to the next number. This way all elements will get updated when they are not visible and it will ensure a smooth animation. Besides that, I would recommend you to keep these common programming principles in mind: 1- keep your HTML, CSS, JS, and assets separated as much as possible and try to keep your workflow organized and well structured. 2- always put a refactoring step in your coding procedure and try to make your code more concise and more readable. 3- keep functions concise and put several related lines of code into a separate function. 4- DRY principle = Don't Repeat Yourself. An example would be the way you handled padding one-digit numbers with starting zero. 5- use HTML tags according to their pre-defined responsibilities. For example, the h1 tag should be used for the main heading of the page and it should not be used more than once on each page. so if you need big and bold text that is not a heading you should use CSS to achieve the same visual result. After all, I'm still a learner and see a long path in front of me to become a guru ;) but thank you for your kindness.

  1