This is a simple weather application that provides a 5-day weather forecast for a city. Users can search for a city by entering its name and view the current weather along with daily predictions. The app uses the OpenWeatherMap API to fetch weather data, and it is built with HTML, CSS, and JavaScript.
- City Search: Enter a city name to get the current weather and a 5-day forecast.
- Current Weather: Displays temperature, weather condition, and an icon representing the current weather.
- Daily Forecast: Shows the minimum and maximum temperatures for the next 5 days.
- Responsive Design: The app is designed to be responsive and works on various screen sizes.
- HTML5
- CSS3
- JavaScript (ES6)
- jQuery
- OpenWeatherMap API
To run this project locally, you need a basic understanding of HTML, CSS, and JavaScript. Additionally, ensure you have an API key from OpenWeatherMap.
-
Clone the repository:
git clone https://github.com/SokratisChaimanas/WeatherForecastApp.git cd WeatherForecastApp -
Configure API Key:
- Open the
script.jsfile. - Replace the
apiKeyvariable with your OpenWeatherMap API key. - Example:
const apiKey = 'your_api_key_here';
- Open the
-
Run the application:
- Open the
index.htmlfile in your web browser.
- Open the
- Search for a city: Type the city name into the input field and press "Enter" or click the "Submit" button to view the weather data.
- View weather details: The app will display the current temperature, weather condition, and a 5-day forecast for the selected city.
simple-weather-app/
│
├── index.html # The main HTML file
├── style.css # The CSS file for styling
├── script.js # The JavaScript file containing the app logic
└── README.md # Project documentation