🌦️ WeatherMoods App A dynamic, themeable weather application that provides real-time data with a twist. Instead of just showing numbers, WeatherMoods interprets the temperature through the eyes of different personas: a Vampire, a Gardener, or a Surfer.

✨ Features Real-time Weather Data: Fetches live data from the OpenWeatherMap API including temperature, humidity, wind speed, and sun cycles.

Thematic Personas: Switch between three unique themes that change the UI and the "Feels Like" commentary:

🧛 Vampire Mode: High-contrast red tones with commentary on coffin-readiness and blood-slushies.

🧑🏻‍🌾 Gardener Mode: Earthy tones with advice on planting, weeding, and snail parties.

🏄‍♂️ Surfer Mode: Coastal vibes with warnings about wetsuit temperatures and "significant shrinkage."

Glassmorphism UI: A modern, sleek design using Tailwind CSS with frosted-glass effects and smooth transitions.

Responsive Design: Fully optimized for mobile, tablet, and desktop views.

Dynamic Wind Compass: Automatically converts degrees into cardinal directions (N, NE, E, etc.).

🚀 Technologies Used Frontend: HTML5, Tailwind CSS

Logic: JavaScript (ES6+ / Fetch API)

API: OpenWeatherMap API

Typography: Adobe Typekit (Area Normal)

🛠️ Installation & Setup Clone the repository:

Bash

git clone https://github.com/yourusername/weather-moods.git API Key: The application currently uses a built-in API key for OpenWeatherMap. For production or personal use, it is recommended to sign up for your own key and replace the apiKey variable in js/Script.js.

File Structure: Ensure your directory looks like this:

Plaintext

├── index.html ├── css/ │ └── style.css ├── js/ │ └── Script.js └── images/ ├── redMoon.jpg ├── clear.jpg └── waves2.jpg Launch: Simply open index.html in any modern web browser.

🕹️ Usage Search: Type a city name (e.g., "London" or "Genk") into the search bar and press Enter.

Toggle Themes: Click the Vampire, Gardener, or Surfer buttons at the top to instantly transform the UI and weather commentary.

Check Details: View humidity, wind direction, and specific sunrise/sunset times adjusted for your chosen theme.

🧠 Logic Highlights The app uses custom logic to map temperature ranges to "Moods":

JavaScript

// Example: Surfer Mood Logic if (temp < 0) return "Significant shrinkage warning. 🍤"; if (temp > 30) return "Sweating like a sinner in church. 🥵"; 📝 License Distributed under the MIT License. See LICENSE for more information.

🤝 Contributing Contributions are what make the open-source community such an amazing place to learn, inspire, and create.

Fork the Project

Create your Feature Branch (git checkout -b feature/AmazingFeature)

Commit your Changes (git commit -m 'Add some AmazingFeature')

Push to the Branch (git push origin feature/AmazingFeature)

Open a Pull Request