Skip to content

Is a simple date counter that can be implemented as a widget to any webpage, for a countdown to a specific date of the end of a sale, or a big event such as a webpage for a wedding. It is made with Vue.js, HTML5 and CSS

License

Notifications You must be signed in to change notification settings

KaelSM/timercountdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Timer Flip Cards Animated Date Count Down

timerflip

This is a web application that displays a countdown timer for a specific event and celebrates the event with confetti when the timer reaches zero. The application is built using JavaScript and the confetti.js library to handle the countdown timer and confetti functionality.

To-do:

  • Countdown flipping cards
  • Work with selected date and not restart when re-loaded
  • Once is done, stop the time and send a notification
  • customize an input with button to set a date (or dropdown with calendar)
  • add backend to connect the applications
  • home page to as well put a subject line and title notification to act with the subject and title as well as the main page
  • register the email to a db
  • email notification to user once timer is done
  • once timer is done and the notification is closed, prompt the user for a new date
  • perform tests
  • ensure functions as expected

open to any solution about fixing any bug or issue as well as suggestions on what to add next

Installation

  • Clone the repository to your local machine.

  • Install the required dependencies by running pip install -r requirements.txt.

  • Run this in your terminal to activate:

    source venv/bin/activate
  • Run the application by executing:

    python manager.py

    in your terminal.

  • Open your web browser and navigate to http://localhost:5000.

Usage

  • Open the home.html file in your web browser.
  • Enter the name of the event you want to countdown to in the input field.
  • Select the date and time of the event using the date and time picker.
  • Click the "Submit" button to start the countdown timer.
  • The countdown timer will display the remaining time until the event in days, hours, minutes, and seconds.
  • When the countdown timer reaches zero, confetti will rain down on the screen to celebrate the event.

Customization

You can customize the appearance of the countdown timer and confetti by modifying the CSS styles in style.css and the JavaScript code in countdown.js.

Contributing

If you would like to contribute to this project, please fork the repository and submit a pull request with your changes.

Credits

This project was insipired by this tutorial in youtube by Web Dev SImplified, added functionality so it didnt only work with minutes and seconds, but with an actual date and kept the time even if the page is refreshed.

-video Link

-Confetti library is used from here

License

MIT

About

Is a simple date counter that can be implemented as a widget to any webpage, for a countdown to a specific date of the end of a sale, or a big event such as a webpage for a wedding. It is made with Vue.js, HTML5 and CSS

Resources

License

Stars

Watchers

Forks