A simple and interactive weather website built using HTML, CSS, and JavaScript. It fetches real-time weather data for any city using the OpenWeather API and displays charts of the weather forecast for the next seven days using Chart.js.
- City Weather Search: Enter the name of any city to get current weather details and a seven-day forecast.
- Interactive Charts: Visualize temperature, humidity, and other weather factors for the week using dynamic graphs powered by Chart.js.
- Automatic Location Detection: Automatically fetches and displays weather data for your current location on page load.
- Responsive Design: Optimized for all screen sizes, ensuring a seamless experience on both mobile and desktop devices.
- HTML: For structuring the web pages.
- CSS: For styling and creating a visually appealing interface.
- JavaScript: For implementing functionality and fetching weather data.
- Chart.js: To create interactive and responsive weather charts.
- OpenWeather API: To fetch real-time weather data.
-
Clone the repository:
git clone https://github.com/your-username/weather-website.git
-
Navigate to the project directory:
cd weather-website -
Open the
index.htmlfile in your browser:- Double-click the file in your file explorer.
- Or, run a local server using tools like VS Code Live Server for best performance.
- Search for a City: Enter the city name in the search bar to view current weather details and a forecast for the next seven days.
- Charts: Explore weather trends like temperature, humidity, wind speed, etc., displayed in visually appealing charts.
- Location Detection: If enabled, the app will fetch and display weather data for your current location automatically.
Click here to visit the live site
- OpenWeather API: https://openweathermap.org/api
- Used for fetching current and forecasted weather data.