🌦️ Weather Information Web Application

Live Demo: vishsig.github.io/Weather-App

---

🖋️ Overview

The Weather Information Web Application by Vishsig is a dynamic and intuitive web solution that provides real-time weather updates for any city worldwide. Built with a robust tech stack—JavaScript, HTML, and CSS—this app offers instant weather data, a smooth interface, and reliable performance.

---

💡 Features

• Real-time weather data powered by the OpenWeather API
• Search by city with instant feedback
• Modern, responsive UI for desktop and mobile
• Display of:
  • Current temperature
  • Humidity percentage
  • Wind speed (km/h)
  • Weather condition icon
• Error handling for invalid city inputs

---

🛠️ Technologies

Technology	Purpose
JavaScript	Async API calls, DOM manipulation
HTML5	App structure and layout
CSS3	Responsive styling and UI design
Dockerfile	Containerization configuration (advanced optional)
Jenkinsfile	CI/CD process integration (advanced optional)

Languages (by repository data):

• CSS: 39.3%
• JavaScript: 28.8%
• HTML: 25.9%
• Dockerfile: 6.0%

---

⚡ Quick Start

1. Try the Demo

Visit: vishsig.github.io/Weather-App

2. Local Installation

# Clone the repository
git clone https://github.com/Vishsig/Weather-App.git
cd Weather-App

# Open index.html in your browser to run locally.

You can also use a simple HTTP server (like Python http.server or VSCode Live Server) for development.

---

🚀 Usage Guide

1. Enter city name in the input field.
2. Click Search to fetch and display weather data.

Example Output:

• Temperature: 29°C
• Humidity: 71%
• Wind Speed: 5 km/h
• Status: Clouds (icon shown)

---

🔗 API Integration

• Source: OpenWeather API
• Requests: Made asynchronously with async/await in JavaScript for:
  • Current weather
  • Error handling
  • Dynamic icon loading

Code snippet:

async function getData(inputValue) {
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?units=metric&q=${inputValue}&appid=YOUR_API_KEY`);
  return response.json();
}

(Replace YOUR_API_KEY with your OpenWeather API key for local development.)

---

🧑‍💻 Project Structure

Weather-App/
├── images/         # Weather icons
├── index.html      # Main web page
├── script.js       # All JavaScript logic
├── style.css       # App styling
├── Dockerfile      # Containerization (advanced usage)
├── Jenkinsfile     # CI/CD configuration (optional)

---

✨ Design & Font Recommendations

• Font Choices:
  Use a clean, highly readable professional font such as Open Sans, Roboto, or Lato.
  • For headings: Montserrat, Poppins for a modern look
  • For body text: Open Sans, Roboto, or Lato
• Colors:
  • Soft blues and whites for background and content contrast
  • Weather icons: Vector icons with gentle gradients
• Layout:
  • Ensure responsive design for mobile and desktop
  • Card-style weather box for readability
  • Error messages in muted yet visible colors

Example CSS for professional fonts:

body {
  font-family: 'Open Sans', 'Roboto', 'Lato', Arial, sans-serif;
}
h1, h2, h3 {
  font-family: 'Montserrat', 'Poppins', 'Roboto Slab', sans-serif;
}

---

🏆 Highlights

• Asynchronous JavaScript for user-friendly experience
• Dynamic icon updates based on API response
• Clean UI designed for all screen sizes
• No dependencies required (pure HTML/CSS/JS for easy deployment)

---

🤝 Contributions & Support

• Repository: GitHub - Vishsig/Weather-App
• Issues: Submit an issue for bugs or feature requests
• Forks & Stars: Help the project grow by starring or forking the repo

---

📜 License

Distributed under the MIT License. See LICENSE for more information (if available).

---

📧 Contact

Questions, feedback or suggestions?

• Open a GitHub issue
• Contact via GitHub profile: Vishsig