/weather-app-vanilla-javascript

The Weather App is a simple web application that allows users to search for weather information of a specific city. It fetches weather data from the OpenWeatherMap API based on the user's input and displays the relevant weather details on the user interface.

Primary LanguageCSS

Weather App README 🌦️

The Weather App is a simple web application that allows users to search for weather information of a specific city. It fetches weather data from the OpenWeatherMap API based on the user's input and displays the relevant weather details on the user interface.

Features ⭐

  • Search Functionality: Users can enter the name of a city in the search input field and click the search button to retrieve weather information for that city.
  • Weather Display: Once a valid city name is entered and the search button is clicked, the app displays the current weather information for the specified city. This includes the city name, temperature, humidity, and wind speed. The app also displays an appropriate weather icon and adjusts the background color based on the weather condition.
  • Error Handling: If the entered city name is not found in the OpenWeatherMap API, an error message is displayed to inform the user of the invalid input.

app2

Technologies Used 🛠️

  • HTML: Provides the structure of the web page.
  • CSS: Defines the styling and layout of the web page.
  • JavaScript: Implements the functionality of fetching weather data and updating the user interface.
  • OpenWeatherMap API: Provides weather data based on the city name.

How to Use 🚀

  1. Open the index.html file in a web browser.
  2. In the search input field, enter the name of the city for which you want to check the weather.
  3. Click the search button (🔍 icon) next to the input field.
  4. If the city name is valid and weather data is available, the app will display the current weather information, including temperature, humidity, wind speed, and an appropriate weather icon.
  5. If the entered city name is not found, an error message will be displayed.

app1

Installation 💻

Since the Weather App is a client-side web application, there is no installation required. Simply download the provided files (index.html, styles.css, app.js, and the images folder) and open the index.html file in a web browser to use the app.

Credits 💡

License 📄

This Weather App is provided under the MIT License.

Feel free to customize and enhance the Weather App as needed for your use case! 🌈

2DO 🛠️

  • Add animated icons for all weathers.
  • Make use of the rest of data provided by OpenWeatherMap Api.
  • Have fun!