Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hoangsonww/the-event-horizon-app

🎆 A dynamic countdown timer designed to anticipate significant life events. From predefined occasions like New Year's Eve to personalized dates like birthdays, EventHorizon offers an intuitive interface, changing backgrounds, chatbot, and inspiring quotes.
https://github.com/hoangsonww/the-event-horizon-app

countdown countdown-application countdown-clock countdown-timer countdown-timers css django docker eslint html javascript machine-learning microfrontend microservices nginx python react shell tailwindcss vue

Last synced: 2 days ago
JSON representation

🎆 A dynamic countdown timer designed to anticipate significant life events. From predefined occasions like New Year's Eve to personalized dates like birthdays, EventHorizon offers an intuitive interface, changing backgrounds, chatbot, and inspiring quotes.

Awesome Lists containing this project

README

        

# The EventHorizon App

### User Interface:


The EventHorizon App Interface

### Overview:
The EventHorizon App is a countdown timer application designed to help users anticipate and count down to significant events in their lives. Whether it's a predefined event like New Year's Eve or a custom event, such as a birthday or an anniversary, this app has you covered.

### Features:

1. **Predefined Events:** Comes with a set of predefined events like New Year, Lunar New Year, and more.
2. **Custom Events:** Users can set their own events with a name and date.
3. **Automatic Event Update:** For some predefined events, once the date has passed, it automatically updates to the next year.
4. **Local Storage:** Remember the last event viewed, so when a user opens the app again, it displays the previously viewed event.
5. **Dynamic Backgrounds:** Alternates between different background images, providing a fresh look each time you open the app.
6. **Responsive Text Color:** Depending on the background, the text color adjusts for better readability.
7. **Inspiring Quotes:** Displays a random inspiring quote above the event title each time the app is loaded.
8. **About Page:** Provides more information about the app and its developer, with quick links to the developer's GitHub, LinkedIn, and Gmail.
9. **Mobile Friendly:** Optimized for mobile devices, so you can use it on the go.
10. **Editable Custom Events:** Users can edit the name and date of their custom events.

### How to Use:

1. **Selecting an Event:** Use the dropdown to select a predefined event or create a new custom event by entering its name and date.
2. **Deleting Custom Events:** Added an event by mistake? No worries, you can easily delete it from the custom events list.
3. **Check the Countdown:** Once an event is set or selected, the app will display a countdown timer, counting down days, hours, minutes, and seconds to the event.
4. **Know More:** Click on the 'About' button at the bottom to learn more about the app and the developer.
5. **Edit Custom Events:** Click on the 'Edit' button at the bottom to edit the name and date of your custom events.

### Technologies Used:

1. **HTML5:** For the structure and layout of the app.
2. **CSS3:** For the styling and design of the app.
3. **JavaScript:** For the functionality and interactivity of the app.
4. **Vue.js:** For the dynamic rendering of the app and the reactivity of the data.
5. **Local Storage:** To store the last event viewed and the custom events added by the user.
6. **Unsplash API:** To fetch random background images for the app.
7. **Quotes API:** To fetch random inspiring quotes for the app.
8. **GitHub Pages:** To host the app and make it accessible to everyone.
9. **Babel:** To transpile the JavaScript code for compatibility with older browsers.
10. **ESLint:** To maintain a consistent code style and quality.
11. **Prettier:** To format the code for better readability and maintainability.
12. **Docker:** To containerize the app for easy deployment and scaling.

### Setup:

1. **Clone the Repository:** Use `git clone https://github.com/hoangsonww/EventHorizon.git` to clone the repository.
2. **Open in Browser:** Navigate to the project directory and open the `index.html` in your favorite browser.
3. **Contribute:** Feel free to fork the repo and make your own changes. Pull requests are welcome!
4. **Report Issues:** If you find any bugs or issues, please report them [here](
5. **Contact:** For feedback, collaboration, or inquiries, reach out through [GitHub](https://github.com/hoangsonww), [LinkedIn](https://www.linkedin.com/in/hoangsonw/), or [Gmail](mailto:[email protected]).

### Credits:

Developed by Son Nguyen Hoang in 2023-2024. For feedback, collaboration, or inquiries, reach out through [GitHub](https://github.com/hoangsonww), [LinkedIn](https://www.linkedin.com/in/hoangsonw/), or [Gmail](mailto:[email protected]).

---

Stay inspired and keep looking forward to the horizon of events in your life! 🌅🕰️