Skip to content

This is a very cool countdown timer which is on open source, free to use and contribute. This HTML, CSS, and JavaScript based timer is ease to use on any device having browser.

Notifications You must be signed in to change notification settings

ForLoopCodes/web-timer-v1.1.4

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Timer v1.1.4

This is a very cool countdown timer which is on open source, free to use and contribute.

This HTML, CSS, and JavaScript based timer is ease to use on any device having browser.

Learn how to use this timer:

1. The numbers on the display show how much time is set in the timer. (Default: 20 minutes.)

image

2. Use the up-arrow button on top-left to increase time by 1 hour.

image

3. Use the up-arrow button on top-center to increase time by 15 minutes.

image

4. Use the up-arrow button on top-right to increase time by 1 minute.

image

5. Use the down-arrow button on bottom-left to decrease time by 1 hour.

image

6. Use the down-arrow button on bottom-center to decrease time by 15 minutes.

image

7. Use the down-arrow button on bottom-right to decrease time by 1 minute.

image

8. Use the Play/Pause buttons to play/pause timer.

image

image

9. Use the Reset button to reset the timer.

image

10. Use the Theme change button to change the theme (dark/light) of timer. (Default: Light mode.)

image

image

image

11. Use the Full Screen button to enable/diable full screen mode. (Default: Disabled.)

image

12. As soon as you start a timer, The buttons will fade away and a whole new system of controls will be visible.

image

13. You can also change the number or minutes and hours using the input fields, shown on clicking on the time.

image

14. Now you can also use shortcut keys to use the controls.

  • S Start/Stop.
  • R Reset.
  • D Toggle dark/light mode.
  • F Enable/Disable full screen.
  • Add 15 minutes to timer.
  • Subtract 15 minutes from timer.

Contact:

I am continuously updating this app and very excited to add many features to this.

  • If you see any bugs or have any recommendations on this application, kindly contact me on my email, [email protected].

Update log:

Version 1.0: (discontinued)

v1.0.0

  1. This is first release.
  2. Main fuctions of timer made.
    • Use the buttons to increase or decrease 1 hour, 15 minutes, or 1 minute.
    • Use the play / pause button to play / pause the timer.
    • Reset the timer by refreshing the tab.
  3. Remember! It includes some bugs.

v1.0.1

  1. Some bugs fixed!
  2. Feature added:
    • Now reset the timer using a button. No need to refresh.
  3. Code is not completely perfect, may include bugs.

v1.0.2

  1. Feature added:
    • Clicking the button will show the another buttons according to the need. i.e, when the play button is clicked, the pause and reset buttons will be visible and vice versa.
  2. Remember, bugs!

v1.0.3

  1. MAJOR FEATURE UPDATE:
    • Now you can use the text input fields to set the time.
  2. Remember, bugs!

v1.0.4

  1. Feature update:
    • Every element is now fitted to its position according to its need, all buttons and input fields.
  2. Almost all bugs removed!
  3. End of this version. New version coming soon! MAJOR FEATURES CHANGE IN NEXT UPDATE.

Version 1.1: (present)

v1.1.0

  1. MAJOR FEATURE UPDATE:
    • New fonts added.
    • Icons in buttons.
    • Timer alignment changed to center.
    • Transitions on functions.
    • Blue color brand theme in borders.
  2. Bugs in text fields will be killed in next update.

v1.1.1

  1. MAJOR FEATURE UPDATE:
    • Now includes an arc which shows the time left.
    • Input fields position updated.
    • Minor style changes.
    • Dark mode and light mode swithching added.
  2. No more bugs left.

v1.1.2

  1. MAJOR FEATURE UPDATE:
    • Dark mode and light mode swithching added.
    • Now use shortcut keys to use timer without mouse!
      1. S Start/Stop.
      2. R Reset.
      3. D Toggle dark/light mode.
      4. F Enable full screen.
      5. Esc Disable full screen.
    • Minor style changes.
  2. Known bugs removed.

v1.1.3

  1. Feature update:
    • Now you can use the F shortcut key to both enable and disable full screen. (as recommended by @Vinesh27.)
    • Full screen button added. It will be visible when timer is started.
    • Very minor style changes.
  2. Javascript code refractored into camel case by @Vinesh27.

v1.1.4 (present)

  1. Feature update:
    • New shortcut keys added!
      1. Add 15 minutes to timer.
      2. Subtract 15 minutes from timer.
  2. Bug removed: Buttons had a black outline while using shortcut keys. (as reported by @Vinesh27.)

Future update goals log:

  1. Recommendations in the know:
  2. Bugs in the know: