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!

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
• npm

npm comes installed with Node so most likely you don't need to install it separately.

• Clone the repository using

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 a possible initial contributions, you can also look through the open issues for ideas. 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 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
Or you can read instructions right here

1. Visit the application here rcountdown

2. Click the + icon here to add a countdown.

3. Click the "Title" field to add a description or leave the default

4. Click the date and time field to set your own date and time. By default it's set to your current date and time.

5. Optional step: Set deadline date and time for your event, recommend setting birthdays to midnight '00:00'

6. 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

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

• 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

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

---

Many more to come, stay tuned!

For more details, and live updates, checkout the dev process readme