🌍 Country & Weather Explorer

Discover the World with Real-Time Information

Features • Demo • Installation • Usage • API References • Contributing

---

📋 Table of Contents

• About
• Features
• Technologies Used
• Installation
• Usage
• API References
• Screenshots
• Project Structure
• Contributing
• License
• Contact

---

🎯 About

Country & Weather Explorer is a modern, interactive web application that combines country information and real-time weather data in one seamless experience. Built with vanilla JavaScript, this project demonstrates clean code practices, responsive design, and API integration.

🌟 Why This Project?

• 🔍 Comprehensive Information: Get detailed country statistics and current weather conditions
• 🎨 Dynamic Backgrounds: Weather-based background themes that change with conditions
• 📱 Fully Responsive: Perfect experience on desktop, tablet, and mobile devices
• 🌓 Dark Mode Support: Toggle between light and dark themes
• ⚡ Fast & Lightweight: No heavy frameworks, pure vanilla JavaScript

---

✨ Features

🗺️ Country Explorer

• 🏴 Country Information: Search for any country and get detailed data
• 📊 Comprehensive Stats:
  • Population statistics
  • Capital city information
  • Regional data
  • Currency details
  • Official languages
  • Time zones
• 🛡️ Visual Elements: National flags and coat of arms
• 🗺️ Interactive Maps: See country locations on embedded maps

🌤️ Weather Explorer

• ⛅ Real-Time Weather: Current weather conditions for any location
• 🌡️ Detailed Metrics:
  • Temperature (actual & feels like)
  • Humidity levels
  • Wind speed & direction
  • Atmospheric pressure
  • UV index
  • Visibility
  • Cloud cover
• 🌬️ Air Quality: Real-time air quality information
• 🎨 Dynamic Backgrounds: Background changes based on weather conditions:
  • ☀️ Sunny/Clear
  • ☁️ Cloudy
  • 🌧️ Rainy
  • ❄️ Snowy
  • ⛈️ Thunderstorm
  • 🌫️ Foggy/Misty

🎨 UI/UX Features

• 🌓 Theme Toggle: Switch between light and dark modes
• 📱 Responsive Design: Optimized for all screen sizes
• 🎭 Smooth Animations: Elegant transitions and effects
• 🔍 Smart Search: Search by country name or city
• 📐 Modern Layout: Clean, card-based interface
• 🎯 Intuitive Navigation: Easy-to-use navigation menu

---

🛠️ Technologies Used

Technology	Purpose
	Structure & Markup
	Styling & Animations
	Functionality & Logic
	Typography
	Beautiful Alerts

---

📦 Installation

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Basic understanding of HTML/CSS/JavaScript (for development)
• API keys (see API References)

Quick Start

1. Clone the repository

   git clone https://github.com/yourusername/country-weather-explorer.git

2. Navigate to the project directory

   cd country-weather-explorer

3. Set up API keys

   • Open js/app.js
   • Add your API keys:

     const WEATHER_API_KEY = 'your_weather_api_key';
     const COUNTRY_API_KEY = 'your_country_api_key'; // if required

4. Open the application

   • Open index.html in your web browser
   • Or use a local server:

     # Using Python
     python -m http.server 8000
     
     # Using Node.js
     npx http-server

5. Start Exploring! 🚀

---

🚀 Usage

Country Search

1. Navigate to the Country Explorer section
2. Enter a country name in the search box
3. Click the Search button or press Enter
4. View detailed country information including:
   • Flag and coat of arms
   • Population and capital
   • Languages and currency
   • Interactive map

Weather Search

1. Go to the Weather Explorer section
2. Enter a city or country name
3. Click Search Weather
4. Get real-time weather data:
   • Current temperature
   • Weather conditions
   • Humidity, wind, pressure
   • Air quality index
5. Watch the background change to match the weather! 🌈

Theme Toggle

• Click the 🌙/☀️ icon in the navigation bar
• Switch between dark and light themes
• Preference is saved automatically

---

🔌 API References

This project uses the following APIs:

1. REST Countries API

• Purpose: Country information
• Documentation: restcountries.com
• Endpoint: https://restcountries.com/v3.1/
• Free: ✅ Yes
• Authentication: ❌ Not required

2. Weather API (WeatherAPI.com or OpenWeatherMap)

• Purpose: Real-time weather data
• Documentation: weatherapi.com
• Free Tier: ✅ Available
• Authentication: ✅ API Key required
• Sign up: Get Free API Key

3. Map Integration (Optional)

• Purpose: Interactive maps
• Options:
  • Google Maps API
  • Leaflet.js with OpenStreetMap
  • Mapbox

---

📸 Screenshots

Hero Section

Country Explorer

Weather Dashboard

Dark Mode

---

📁 Project Structure

wether-app/
│
├── index.html              # Landing page
├── home.html              # Main application page
├── README.MD              # Project documentation
│
├── css/
│   └── styles.css         # Main stylesheet
│
├── js/
│   └── app.js             # Application logic
│
└── assets/                # Images and icons (if any)
    ├── images/
    └── icons/

---

🎨 Color Scheme

The project uses dynamic weather-based color schemes:

Weather	Colors
☀️ Sunny	#667eea → #764ba2
☁️ Cloudy	#bdc3c7 → #2c3e50
🌧️ Rainy	#4b6cb7 → #182848
❄️ Snowy	#e6dada → #274046
⛈️ Thunder	#2c3e50 → #000000
🌫️ Foggy	#757f9a → #d7dde8

---

🤝 Contributing

Contributions are what make the open-source community amazing! Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

💡 Ideas for Contribution

• Add 7-day weather forecast
• Implement geolocation for automatic weather detection
• Add more weather animations
• Create country comparison feature
• Add historical weather data
• Implement unit tests
• Add accessibility improvements
• Create mobile app version

---

📝 License

Distributed under the MIT License. See LICENSE file for more information.

---

👨‍💻 Author

WasuVa Creation

---

🙏 Acknowledgments

• REST Countries API for country data
• WeatherAPI.com for weather information
• Google Fonts for Inter font family
• SweetAlert2 for beautiful alerts
• All open-source contributors

---

📊 Project Stats

---

⭐ Star this repository if you found it helpful!

Made with ❤️ by WasuVa Creation

© 2025 Country & Weather Explorer. All Rights Reserved.