https://github.com/rdjarbeng/countdown
Countdown timer with themes, dark and light mode, day-of-year counter. Website & PWA
https://github.com/rdjarbeng/countdown
countdown-timer css dark-mode javascript js open-source open-source-project progressive-web-app pwa toastify-js vite vite-plugin-pwa
Last synced: 8 months ago
JSON representation
Countdown timer with themes, dark and light mode, day-of-year counter. Website & PWA
- Host: GitHub
- URL: https://github.com/rdjarbeng/countdown
- Owner: RDjarbeng
- License: mit
- Created: 2021-12-21T23:03:38.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-06T08:35:55.000Z (about 1 year ago)
- Last Synced: 2025-04-12T08:15:30.053Z (11 months ago)
- Topics: countdown-timer, css, dark-mode, javascript, js, open-source, open-source-project, progressive-web-app, pwa, toastify-js, vite, vite-plugin-pwa
- Language: JavaScript
- Homepage: https://rcountdown.netlify.app/
- Size: 23.5 MB
- Stars: 3
- Watchers: 2
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# The Countdown app
Application that displays a countdown to a given date. It comes with a plethora of features such as custom date entries, theming etc.
Oh and not forgetting the beloved dark mode!
Just save the date and let the countdown begin!
[](https://app.netlify.com/sites/kubernetes-io-main-staging/deploys)
App deployed on netlify at https://rcountdown.netlify.app/
Built with:
Javascript, CSS, html
## Running the application in development on your device- For developers
### Prerequisites
To use this repository, you need the following installed locally:
- [node](https://nodejs.org/)
- [npm](https://www.npmjs.com/)
npm comes installed with Node so most likely you don't need to install it separately.
- Clone the repository using
```bash
git clone https://github.com/RDjarbeng/countdown.git
cd countdown
```
- Install dependencies, we used vite for bundling as a dev dependency
```
npm install
```
- View the application using vite by launching the dev server with
```
npm run dev
```
- Or alternatively use live server extension in vscode to view the application. NB: Vite is recommended because you might run into some minor issues with live server in vscode
### Building for production or deployment
Use
```
npm run build
```
This will create a build directory `/dist` with the bundled assets and pages as a Progressive Web App (PWA). You could open the index.html file generated with this build from your file explorer but a better option is to run:
```
npm run preview
```
This provides a link to the built website with the PWA ready to go, useful for testing the build. Before deploying
note that after building some assets such as css, js may have a hash/string of characters added to their name.
It's vite's way of keeping track of files,the application will be able to find those files referenced even with the strange names.
If you make changes that involve addition of new pages or routes you have to update the vite.config.js to ensure the new page is included in the bundling.
Sigh!😪. But on the bright side it takes care of the PWA configuration and allowing the users to updating the application with the new version.
## Code structure
There are 4 pages currently.
1. The homepage: with the large countdown: index.html
2. List page which shows the list of countdowns: countdown-list.html
3. Today page which shows the day counter: today.html
4. About page which shows information about the application version and contributors, about.html
The image below helps to get a high level overview of the code structure
Other utility functions that are used across the application and are not specific to a single page are shown here.
### Possible contributions
Here are possible initial contributions, you can also look through the open [issues](https://github.com/RDjarbeng/countdown/issues) for ideas as well as the tasks in [projects](https://github.com/users/RDjarbeng/projects/4). Or you can implement features that you think should be included. We would love to see what you add🌟.
- Add confetti effects when a countdown elapses. Current version 3 only plays sound
- Adding a history page so users can set a memory to remember and view how long it has been since then. This page will also allow that elapsed countdowns show the time since they elapsed
Also, view the [dev process](/docs/dev-process.md) for inspiration by looking at the history of the application and the current direction of the project.
## How to use
To get started using the application you can follow this [guide](https://scribehow.com/shared/Get_started_with_rcountdown__EyFbM6bFS5ql48-UeEyM2w)
Or you can read instructions right here
1. Visit the application here [rcountdown](https://rcountdown.netlify.app/)
3. Click the + icon here to add a countdown.
4. Click the "Title" field to add a description or leave the default
5. Click the date and time field to set your own date and time. By default it's set to your current date and time.
6. Optional step: Set deadline date and time for your event, recommend setting birthdays to midnight '00:00'
7. Optional step: Click the "Repeat every year" field if you want the countdown event to repeat annually, eg: birthdays
8. Click the submit button to save your countdown.
9. You should be redirected to the [countdown list page](https://rcountdown.netlify.app/html/countdown-list.html)
10. Click the drop down icon on a countdown to show more options.
11. Optional step: With these options you can edit, delete or set the current event to be displayed on the homepage. Click 'Set as main' to set the homepage clock to current event.
12. To go back to the homepage click this icon to show site navigation options as well as options to change the theme and background.
13. Click 'Home' to go to the homepage. Or alternatively you can click the application icon to go to the homepage.
14. If you selected 'set as main' on the countdown you created you should see your countdown event displayed by default on the home screen now even when you reload the page.
> Note: Your countdowns are saved on your device and are not stored online. Currently you cannot access them from a separate device.
## Countdown v0.1.0 (How it began)
Counts down to midnight with clickable features (dark mode)
## Countdown v0.2.1
Added contributor [Nathaniel Nyakotey](https://github.com/nyakotey)
* Changes by Nyakotey
* Added background image
* Changed fonts
* Simplified css
## Countdown v0.2.2
* Added Font Awesome icons
* Fixed light and dark mode styling
* Fixed light/dark mode toggle button layout
* Minor text edits
## Countdown v0.2.3
* Added auto light and dark mode
## Countdown v0.4.2
* Redesigned UI
* Added countdown to end of year
* Added day count
## Countdown v1.0.0
* Added authors page
* Added link with names at bottom of main page to authors page
## Countdown v1.1.0
* Implement offline functionality
* Add PWA functionality
## Countdown v1.2.0
* Used service workers to cache site static resources
* Site now works without internet connection
* Added PWA functionality for (android) users to install app
* UI updates to light and dark mode 👀
## Countdown v2.0.0
* Redesigned UI; sidebar navigation added, multiple themes and backgrounds to choose from
* User created countdowns is now possible; can edit, delete and set a countdown to display on homepage
* Added sharing of the day of year Count to Whatsapp platform
## Countdown v2.1.0
* Added black theme
* Enhanced app security and integrity by sanitizing form inputs
* Improved documentation with the addition of the [dev process](/docs/dev-process.md)
## Countdown v2.2.0
* Updated `authors` page to a functional `about` page
* Added in a special `today` page:
  Stay current, share the `dayCount` to Whatsapp and many more to come
* Provided dark mode styles for form popups, improved responsiveness and styling
## Countdown v2.3.0
* Added option to sort countdowns
* Removed due date status, added countdown status on the list item
## Countdown v2.4.0
* Animated deadline on homepage
* Added option to set repeatable countdowns
* Added ui cues for countdown status
* Display due date when countdown is elapsed
* fixed rogue italics, browser auto text selection and more
## Countdown v2.4.1
* fixed sidebar option text going under the icon
## Countdown v2.5.0
* Major code refactor, improved code readability and reusuability
* Added a bundling step, Vite, resulting in massive performance gains
* Many other significant updates, setting the stage for the next version
* Bug fixes
---
#### For further changes in future versions see the [release notes](https://github.com/RDjarbeng/countdown/releases)
For more details for developers, and live updates, checkout the [dev process](/docs/dev-process.md) readme