Weather App — Real-Time City Forecasts

A responsive and user-friendly weather application built with HTML, CSS, and JavaScript, using the OpenWeatherMap API.
Search for any city and view current temperature, humidity, conditions, and icons — with the option to switch between Fahrenheit and Celsius.

---

Features

• Fetches live weather data via OpenWeatherMap API
• Supports Fahrenheit (°F) and Celsius (°C)
• Displays temperature, humidity, and weather description
• Shows official OpenWeatherMap icons
• Clean, responsive UI with CSS gradients and modern styling
• Fast and lightweight — no frameworks required

---

Tech Stack

• HTML5 — structure
• CSS3 — responsive styling with gradients and hover effects
• Vanilla JavaScript (ES6) — API fetch, DOM manipulation, and error handling
• OpenWeatherMap API — real-time weather data source

---

Live Demo

Try it now: https://conorgregson.github.io/weather-app/

---

Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-username/weather-app.git
   cd weather-app

2. Get an OpenWeatherMap API key:

   • Sign up at https://openweathermap.org/api
   • Copy your API key.

3. Insert your API key inside weather_appIndex.js:

   const apiKey = "YOUR_API_KEY_HERE";

4. Run locally:
   Open weather_appIndex.html in your browser.

---

How to Use

1. Enter a city name (e.g., “London”, “Tokyo”, “Boston”).
2. Choose your preferred temperature unit (°F or °C).
3. Click Get Weather.
4. The app displays:
   • City and country
   • Temperature
   • Humidity
   • Description (e.g., "light rain")
   • Weather icon

If an invalid city is entered, a friendly error message appears.

---

Code Overview

1. getWeatherData(city, units)

Fetches live data from OpenWeatherMap’s REST API:

const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=${units}`;

2. displayWeatherInfo(data, units)

Extracts values using object destructuring and dynamically creates DOM elements to show weather info.

3. displayError(message)

Handles any errors (e.g., invalid city or API issues) and updates the UI with a styled error message.

---

UI Design

The interface is defined in weather_appStyle.css:

• Clean layout with flexbox
• Gradient card backgrounds
• Custom dropdown styling for the unit selector
• Responsive behavior for smaller screens

Example:

.card {
  background: linear-gradient(180deg, hsl(210, 100%, 75%), hsl(40, 100%, 75%));
  padding: 50px;
  border-radius: 10px;
}

---

File Structure

weather-app/
├── weather_appIndex.html      # HTML markup
├── weather_appStyle.css       # Styling
├── weather_appIndex.js        # Functionality + API logic
└── assets/                    # (Optional) screenshots or icons

---

Future Improvements

• Add 5-day forecast and temperature graphs
• Include search history and favorites
• Implement geolocation to detect user’s city
• Add dark/light themes
• Cache results for faster reloads

---

Notes

• The OpenWeatherMap API key is required for live data.
• Make sure you’re not exceeding free-tier API rate limits.

---

Author

Made by Conor Gregson

• GitHub
• LinkedIn

---

License

This project is open-source and available under the MIT License. See the LICENSE file for details.