Skip to content

imshaa/Weather-webapp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Weather Web App

A simple and responsive weather web application that allows users to search for the current weather conditions and a 5-day forecast for a specified location. The app provides detailed information such as temperature, humidity, wind speed, visibility, and pressure, similar to Google Weather.

Features

  • Search for weather by location (city name).
  • Display current temperature, weather description, humidity, wind speed, visibility, and pressure.
  • Show a 5-day weather forecast.
  • Responsive design for mobile and desktop devices.
  • User-friendly interface with icons and clear layout.

Technologies Used

  • HTML
  • CSS
  • JavaScript
  • OpenWeatherMap API for fetching weather data
  • Font Awesome for icons

Installation

To run the weather web app locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/yourusername/weather-web-app.git
    cd weather-web-app
    

2.Open the HTML file:

Open index.html in your preferred web browser.

  1. API Key:

You will need an API key from OpenWeatherMap. Sign up at OpenWeatherMap to obtain a free API key. Replace the placeholder in the JavaScript code with your actual API key: const api_key = "YOUR_API_KEY";

Usage

Open the app in your web browser. Enter the name of the city you want to check the weather for in the search box. Click the search button (magnifying glass icon). The app will display the current weather conditions and a 5-day forecast for the specified location.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

OpenWeatherMap for providing weather data. Font Awesome for icons.

Notes:

  • Replace yourusername in the clone command with your actual GitHub username.
  • Update the screenshot.png placeholder with the actual path to a screenshot of your app if you have one.
  • Make sure to include a LICENSE file if you mention licensing in the README.
  • Feel free to customize any sections to better fit your project specifics or personal preferences.