Countdown-Widget for Student Housing Move-In Day 🧳

Overview 📝

The Countdown Widget is a dynamic, customizable timer designed for the Fresno State Student Housing Move-In Day page. It aims to engage incoming residents by counting down to the move-in day, enhancing the anticipation and excitement. Built using HTML, JavaScript, and CSS, this widget integrates seamlessly with WordPress through the Elementor Widget Builder, offering a responsive design that adapts to various screen sizes.

Features 🌟

• Dynamic Event Date Calculation: Automatically adjusts the countdown each year to the specified move-in date.
• Countdown to Event: Displays days, hours, minutes, and seconds until the event.
• Event Reached Actions: Showcases custom emojis and messages when the countdown reaches the event date.
• Customizable Appearance: Allows for easy customization of headline, colors, and emojis through parameters.
• Responsive Design: Ensures the widget looks great on all devices.
• Error Handling: Implements error checking to ensure reliable operation.
• Scalability: Designed to be easily adapted for other events or websites.

Technologies 🛠️

• HTML: Provides the structure and content of the widget.
• CSS: Styles the widget to match the website's design.
• JavaScript: Implements the countdown timer and dynamic date calculation.
• Elementor Widget Builder: Integrates the widget into the WordPress website.

Setup and Customization 🖥️

1. Go to your WordPress Dashboard.
2. Navigate to the Elementor Widget Builder.
3. Add a new Widget.
4. Copy and paste the widget code into the Elementor Widget Builder.
5. Add the widget to your page.
6. Customize the widget parameters to match your event and website design.

Challenges and Solutions 🧩

The main challenge was ensuring the widget did not need yearly updates for annual events. This was overcome by implementing JavaScript logic to automatically adjust the event date each year, making the widget reusable for annual events without manual adjustments.

Learning Outcome 🧠

Through this project, I gained significant experience in JavaScript, developing a deeper understanding of dynamic web component creation, responsive design principles, and the nuances of solo project management from conception to deployment.

Future Iterations 🚀

Future updates aim to enhance widget customization and functionality, including more style options and interactive elements to engage users further.

Contribution 🤝

Feel free to fork this project or submit pull requests with improvements. Your contributions are highly appreciated!

Project Link 🔗

Countdown Widget on Github