Cloudie

• 

  Cloudie- Your reliable weather partner anytime, anywhere.

Inspiration-

We wanted to create a weather app that isn’t just functional but also engaging. The idea was to combine accessibility, interactivity, and creativity—making weather updates fun, accurate, and easy to use.

What it does-

Cloudie provides real-time weather updates with temperature, humidity, wind speed, and conditions. It >supports voice input , location detection , text-to-speech , and dynamic animations (rain, >snow, thunder) that match the live weather.

How we built it-

Frontend: HTML, CSS, JavaScript API: Integrated the wttr.in API for live data Features: Voice recognition, geolocation, text-to-speech, dark mode, responsive UI, and animated >weather effects

Challenges we ran into-

Handling inconsistent API responses and error states Optimizing heavy animations (like snowflakes) for smooth performance Ensuring cross-browser compatibility for voice and geolocation features Designing a clean, responsive UI that works on both mobile and desktop

Accomplishments that we're proud of-

Built a weather app that is both functional and visually interactive Successfully integrated voice input, geolocation, and text-to-speech Designed animated weather effects that bring the app to life Made it lightweight, hackathon-ready, and accessible for all users

What we learned-

API integration and data handling in real time Importance of accessibility (ARIA roles, voice input, screen-reader support) UI/UX principles for creating engaging yet simple designs Performance optimization for animations and mobile-first development

What's next for Cloudie-

Adding 7-day weather forecasts with charts/graphs Push notifications for weather alerts and warnings Offline caching for previously fetched weather data Expanding language support for voice and speech features

Built With

• and-floating-clouds-platform:-runs-entirely-in-the-browser-(lightweight
• aria-accessibility-roles-animations:-pure-css-animations-for-rain
• css
• dark-mode-toggle
• javascript-api:-wttr.in-weather-api-for-real-time-weather-data-web-apis:-geolocation-api-(?-detect-user?s-location)-web-speech-api-(?-speech-to-text-&-?-text-to-speech)-design-&-ui:-custom-responsive-css
• languages:-html
• snow
• thunder