📝 Description
Currently, Weatherify displays standard weather conditions effectively, but in critical situations (like storms, heatwaves, or heavy rain), users need immediate and highly visible warnings. I propose adding a dynamic Weather Alerts Banner that appears just below the Navbar whenever severe weather conditions are detected for the searched city.
🎯 Expected Behavior
- A sleek, dismissible banner should gracefully slide down from the top (below the header) if there is an active weather alert for the current location.
- The banner's styling should reflect the severity (e.g., solid Red/Orange tones for severe warnings, Yellow for moderate advisories).
- It should display the alert type (e.g., "Heatwave Advisory") and a brief description.
- It must fully respect the global Light/Dark mode themes.
🛠️ Proposed Implementation Plan
To ensure UI development isn't blocked by API limitations or backend constraints, I will build this using a scalable frontend-first approach:
- Mock Data Architecture: Create a temporary
mock-alerts.json to simulate various alert payloads (Severe, Moderate, None) to test all edge cases.
- UI & Styling: Design the banner structure in
index.html (hidden by default) and style it in style.css using the project's existing glassmorphic and minimalist design system.
- Logic (
script.js): Write a resilient fetch wrapper to parse the mock data and trigger the banner state. Once the UI and logic are approved, swapping the mock fetch with the actual OpenWeatherMap One Call / Alerts endpoint will be seamless.
🙋♂️ Assign To Me
I have already conceptualized the design and logic for this. I would love to work on this issue for NSoC! Please assign it to me.
📝 Description
Currently, Weatherify displays standard weather conditions effectively, but in critical situations (like storms, heatwaves, or heavy rain), users need immediate and highly visible warnings. I propose adding a dynamic Weather Alerts Banner that appears just below the Navbar whenever severe weather conditions are detected for the searched city.
🎯 Expected Behavior
🛠️ Proposed Implementation Plan
To ensure UI development isn't blocked by API limitations or backend constraints, I will build this using a scalable frontend-first approach:
mock-alerts.jsonto simulate various alert payloads (Severe, Moderate, None) to test all edge cases.index.html(hidden by default) and style it instyle.cssusing the project's existing glassmorphic and minimalist design system.script.js): Write a resilient fetch wrapper to parse the mock data and trigger the banner state. Once the UI and logic are approved, swapping the mock fetch with the actual OpenWeatherMap One Call / Alerts endpoint will be seamless.🙋♂️ Assign To Me
I have already conceptualized the design and logic for this. I would love to work on this issue for NSoC! Please assign it to me.