demo.webm
- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🕸️ Usage
The Weather Dashboard is a simple weather application that allows users to check current weather conditions and a 5-day forecast by searching for any city. The app fetches real-time weather data from the OpenWeatherMap API and displays the information in a user-friendly manner.
- JavaScript
- HTML5
- CSS3
- OpenWeatherMap API
👉 Search for City Weather: Enter the name of any city to get the current weather conditions and a 5-day forecast.
👉 Dynamic Weather Updates: Fetches real-time data from the OpenWeatherMap API and displays it dynamically on the page.
👉 5-Day Forecast: Provides weather forecasts with temperature, weather conditions, and date for the next 5 days.
👉 Responsive Design: The layout is responsive and works well across different device sizes.
Follow these steps to set up the Weather Dashboard locally on your machine.
Prerequisites
Make sure you have the following:
- A modern web browser (Google Chrome, Firefox, etc.)
- API Key from OpenWeatherMap
Cloning the Repository
git clone https://github.com/YourUsername/Weather-Dashboard.git
cd Weather-DashboardGetting Your API Key
- Go to the OpenWeatherMap and sign up for an API key.
- Replace 'YOUR_API_KEY' in the script.js file with your actual API key.
- Running the Application
Open the index.html file in your browser. Enter a city name and press "Search" to display the weather data.
Search for a City: Type the name of the city in the search bar and press the "Search" button to view the weather details.
View Weather Information: The current weather, including temperature, location, and description, will be displayed.
Check the 5-Day Forecast: Scroll down to see the forecast for the next 5 days.
Project URL https://roadmap.sh/projects/weather-api-wrapper-service