Refactor: Migrate monolithic HTML UI to native Web Components

[Adithyakp86]

[Refactor]: Migrate Monolithic HTML UI to Native Web Components (Custom Elements)

📝 Description

This PR refactors the Weatherify user interface from a single, monolithic index.html file paired with global styles into a modern, component-driven architecture using native Web Components (Custom Elements) and Shadow DOM.

This modernization adheres to the project's "Vanilla JS" philosophy while heavily improving maintainability, encapsulating styles to prevent CSS leakage, and cleaning up DOM bloat.

🎯 Objectives Completed

• Component Driven UI: Broke down the monolithic UI into logical, reusable custom elements:
  • <weather-header>: Manages branding, language selection, theme toggling, and unit toggling.
  • <weather-search>: Encapsulates the search bar, history dropdowns, and location tracking.
  • <current-weather>: Handles the display of current weather conditions, including the main temperature card, sun track, and detailed metrics.
  • <forecast-list>: Manages the hourly and daily forecast lists/charts.
  • <weather-map>: Encapsulates the radar map view.
• Shadow DOM Encapsulation: Utilized Shadow DOM for each component to scope HTML and CSS, preventing style leakage and reducing reliance on global classes in style.css.
• Vanilla JS Event Architecture: Decoupled the central script.js application logic from direct DOM manipulation. Components now expose APIs (e.g., setWeatherData(), setLoading()) and dispatch custom events (e.g., search, theme-change, unit-change) for communication.
• Clean Document Structure: The index.html file has been transformed into a clean, semantic, declarative structure.

🏗️ Changes Made

• Added: public/components/weather-header.js
• Added: public/components/weather-search.js
• Added: public/components/current-weather.js
• Added: public/components/forecast-list.js
• Added: public/components/weather-map.js
• Modified: public/index.html (Replaced monolithic structure with custom tags)
• Modified: public/script.js (Updated core logic to use component APIs and custom events instead of direct querySelector DOM manipulation)
• Modified: public/style.css (Cleaned up and moved component-specific styles out of global scope where applicable)

🧪 Testing Performed

• Verified all components render correctly in the main layout.
• Tested interactions: Search functionality, theme toggle (Light/Dark), unit toggle (C/F/K), and language selection.
• Verified that styles are correctly scoped to their respective shadow roots and no layout breaks occurred during the migration.
• Confirmed the API integration still updates the UI correctly by passing data into the newly minted components.

📸 Before & After

Before (index.html excerpt):

<header class="weather-header">
  <!-- Hundreds of lines of nested <div> tags for search, settings, etc. -->
</header>
<main class="weather-main">
   <!-- More nested divs for current weather and forecasts -->
</main>

[vercel]

Someone is attempting to deploy a commit to the ashujsrfox's projects Team on Vercel.

A member of the Team first needs to authorize it.