https://github.com/kalbarczykdev/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.
https://github.com/kalbarczykdev/weather-app-vanilla-javascript
beginner beginner-code beginner-friendly beginner-project css css-animations first-commit html javascript javascript-applications open-source openweathermap openweathermap-api vanilla-javascript weather-app
Last synced: 9 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/kalbarczykdev/weather-app-vanilla-javascript
- Owner: KalbarczykDev
- Created: 2023-08-30T15:37:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-12T07:51:26.000Z (almost 2 years ago)
- Last Synced: 2025-03-22T05:51:17.615Z (9 months ago)
- Topics: beginner, beginner-code, beginner-friendly, beginner-project, css, css-animations, first-commit, html, javascript, javascript-applications, open-source, openweathermap, openweathermap-api, vanilla-javascript, weather-app
- Language: CSS
- Homepage:
- Size: 94.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
## 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.
## 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 💡
- Weather data is provided by the [OpenWeatherMap API](https://openweathermap.org/).
## License 📄
This Weather App is provided under the [MIT License](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!