Weather Forecast Website

Description:

This project is a weather forecast website that allows users to view the current weather conditions for a specific city. By entering the city name, the website displays an image related to the city as the background, along with the temperature, weather description, wind speed, and humidity. The project utilizes the OpenWeather API for weather data and Unsplash for fetching city images.

Website link - https://royaals.github.io/Weather-Forecast-website/

Demo

Tech Stack

The weather forecast website is built using the following technologies:

• HTML: Provides the structure and layout for the website.

• CSS: Styles the elements and enhances the visual appearance of the website.

• JavaScript: Handles API requests, data retrieval, and updates the website dynamically.

• OpenWeather API: Retrieves weather data for the specified city.

• Unsplash API: Fetches city images to set as the website's background.

Documentation

To use the weather forecast website, follow these steps:

1. Clone the repository: git clone https://github.com/royaals/Weather-Forecast-website.git

2. Navigate to the project directory: cd Weather-Forecast-website

3. Open the project files in a code editor of your choice.

4. Replace the API key in the JavaScript file (script.js) with your own OpenWeather API key. You can obtain an API key by signing up on the OpenWeather website.

5. Save the changes.

Acknowledgements

• HTML

• CSS

• JavaScript

• OpenWeatherMap API

• Unsplash API

Features

The weather forecast website offers the following features:

• Weather Search: Users can enter the name of a city in the search bar to retrieve the current weather information for that city.

• Dynamic Background: The website dynamically sets the background image based on the searched city, providing a visually immersive experience.

• Temperature Display: The temperature is displayed in Celsius, providing users with the current temperature of the city.

• Weather Description: The website displays a brief description of the weather conditions, such as "Cloudy" or "Sunny."

• Humidity Information: Users can view the humidity percentage to get an idea of the atmospheric moisture.

• Wind Speed: The wind speed is displayed in kilometers per hour, giving users an understanding of the current wind conditions.

Installation

To install the weather forecast website locally, follow these steps:

1. Clone the repository: git clone https://github.com/royaals/Weather-Forecast-website.git

2. Navigate to the project directory: cd Weather-Forecast-website