-Weather-Application-Using-HTML-CSS-JavaScript-and-API

A simple weather application that shows real-time weather data for any city using HTML, CSS, JavaScript, and the OpenWeatherMap API. It displays temperature, weather conditions, humidity, and wind speed, with error handling for invalid city names.

🌦 Weather Application Using HTML, CSS, JavaScript, and API

📄 Description

This is a simple weather application that displays real-time weather data for any city. Built using HTML, CSS, JavaScript, and the OpenWeatherMap API, the app shows temperature, weather conditions, humidity, and wind speed. It also includes error handling to display a message and icon if an invalid city is entered.

---

🛠 Technologies Used

• HTML – For the webpage structure
• CSS – For styling the user interface
• JavaScript – For handling API requests, DOM manipulation, and event listeners
• OpenWeatherMap API – For real-time weather data
• Font Awesome – For icons and UI elements

---

🚀 How to Set Up and Use the App Locally

Follow these steps to run the project on your computer:

1. Clone the Repository:

git clone https://github.com/MonkeyDxLuffy/Weather-Application-Using-HTML-CSS-JavaScript-and-API.git cd Weather-Application-Using-HTML-CSS-JavaScript-and-API

Go to OpenWeatherMap API and create a free account. Generate an API key from your dashboard. Replace the existing API key in the code with your own key:

Set Up Your API Key: Go to OpenWeatherMap API and create a free account.

Generate an API key from your dashboard. Replace the existing API key in the code with your own key: const api_key = "YOUR_API_KEY_HERE";

Add Font Awesome (Optional):

To use Font Awesome icons, include this link in your index.html file inside the tag:

Run the Project: Open the index.html file in your browser.

Enter a city name in the search box and click the "Search" button to view the weather details.

🔧 How to Customize the App: You can make small tweaks to customize the app:

Change the Background or Styles: Edit the style.css file to change colors, fonts, and layout.

Update Weather Icons: Replace the images in the /assets folder with your own icons.

API Request Changes: Modify the API request URL to add more data, like 7-day forecasts or additional weather parameters.

📚 Resources: OpenWeatherMap API – Real-time weather data Font Awesome – Free icons and UI elements