fcfn/di_hackathon_1

Hackathon #1 for DI

Hi there 👋

I love tinkering with code.

di_hackathon_1's Issues

Implement Event Sharing Functionality

1. Create a share button in the top-right corner.
2. Implement JavaScript to generate a URL with event details as parameters.
3. Ensure the URL can reconstruct the event name and time locally in another browser.

Play a ticking sound each second

We could have an option (disabled by default) that would play a ticking sound when each second passes. Stick the setting somewhere as a checkbox.

Use a sound from freesound, preferably licensed as CC0. Make sure to put a small print attribution at the bottom of the page in case the license is not CC0.

Deploy Application

1. Deploy the application to a hosting platform.
2. Ensure the deployed application is accessible and functional.
3. Test the deployed application to confirm it works correctly.

Implement Browser Notifications

1. Implement browser notifications to alert the user a specified number of minutes before the event starts.
2. Provide an option in the settings to enable/disable notifications.
3. Test notifications to ensure they work correctly.

Have a separate time run in a web worker

With this we should be able to change the title of the page to show the time in the title as well as notify the user via browser notifications even when the tab is throttled.

Implement Animated Countdown Clock

1. Create JavaScript functions to calculate the time remaining until the event.
2. Use GSAP to animate the countdown clock smoothly.
3. Ensure the clock updates in real-time.
4. Display years, months, days, hours, minutes, and seconds until the event.

Fetch and Display Public Events

1. Use a public API to fetch a list of public holidays and other notable events based on the user’s location.
2. Display the events in a list for easy addition to the countdown.

Create Basic HTML Structure

1. Set up the basic HTML structure for the project.
2. Add placeholders for the event name, countdown clock, and buttons.
3. Include a link to the GSAP library.
4. Ensure the HTML is clean and well-organized.

Set Up GSAP for Animations

1. Include the GSAP library in the project.
2. Create basic animations to test the library integration.
3. Ensure GSAP is working correctly with the HTML elements.

Create URL Encryption and Decryption

1. Add an option to encrypt the URL with a password.
2. Implement JavaScript to prompt the user for a password to decrypt the URL.
3. Display an appropriate message if the password is invalid.

Refactor the code

It's an ugly embarrassing mess TBH. I would prefer to rewrite it in RustTypeScript with properly organized classes.

Style the Application with CSS

1. Apply CSS styles to improve the visual appearance of the application.
2. Ensure the design is responsive and looks good on various devices.
3. Use appropriate colors, fonts, and spacing for a clean UI.

Create Dark Theme Toggle

1. Create a button in the top-right corner for toggling the dark theme.
2. Implement JavaScript to switch between dark and light themes.
3. Ensure the dark theme button changes to a light theme button and vice versa.
4. Apply appropriate CSS styles for both themes.

Allow editing the title of the event without resetting it

The user should be able to click the title of the event to edit it (perhaps show a picture of a pencil on hover as is commonly done). This also makes it possible to transmit the event name out-of-band. @Danil4UA , you could try using this.

Design and Implement Settings Screen

1. Create a settings screen accessible from the main interface.
2. Provide options to enable/disable notifications, sound, and animations.
3. Ensure the settings are saved and applied correctly.

Add Confetti Animation for Event Start

1. Create a confetti animation to celebrate when the countdown reaches zero.
2. Use JavaScript to trigger the animation at the event start.
3. Provide an option in the settings to enable/disable the animation.

Play a sound when the timer has reached 0

Also add a checkbox that will enable the sound (off by default) somewhere on the page.

Use a sound from freesound, preferably licensed as CC0. Make sure to put a small print attribution at the bottom of the page in case the license is not CC0.

Setup Project Repository

1. Create a new repository on GitHub.
2. Clone the repository locally.
3. Set up the project structure with initial HTML, CSS, and JavaScript files.
4. Push the initial commit to GitHub.

Check whether the URL has a date in the past

There's a bug that will immediately stop the timer and play the confetti animation etc. if you load the page with a date that has passed. Especially annoying if notifications are enabled. Instead it should simply show all zeroes.

Implement Animations when the timer reaches 0

1. Add a sound effect to play when the countdown reaches zero.
2. Implement a confetti animation to celebrate the event start.
3. Provide options in the settings to turn sound and animation on or off.

Save the dark theme preference across reloads

If we toggled the dark mode, upon reloading the page, the user should still have the dark mode on. You can use localStorage for that.

Debug and Test Application

1. Test the entire application to ensure all features work correctly.
2. Identify and fix any bugs or issues.
3. Ensure compatibility across different browsers and devices.

Use the user's system theme by default

If the user's system has dark mode on, we should load the page in dark mode by default.

Test application before the deadline

Add README.md