https://github.com/hashimthepassionate/weather-app
This repository contains a simple Weather App built with HTML, CSS, and JavaScript. Users can enter a city name to fetch and display current weather details from the OpenWeatherMap API. Ideal for beginners learning API interaction and dynamic UI updates.
https://github.com/hashimthepassionate/weather-app
async await css fetch-api flex html5 javascript json position try-catch weather-app weather-data weatherapi weatherapp weatherinformation
Last synced: 2 months ago
JSON representation
This repository contains a simple Weather App built with HTML, CSS, and JavaScript. Users can enter a city name to fetch and display current weather details from the OpenWeatherMap API. Ideal for beginners learning API interaction and dynamic UI updates.
- Host: GitHub
- URL: https://github.com/hashimthepassionate/weather-app
- Owner: HashimThePassionate
- Created: 2024-05-23T06:17:24.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-23T07:01:44.000Z (about 2 years ago)
- Last Synced: 2024-05-23T07:33:15.676Z (about 2 years ago)
- Topics: async, await, css, fetch-api, flex, html5, javascript, json, position, try-catch, weather-app, weather-data, weatherapi, weatherapp, weatherinformation
- Language: CSS
- Homepage:
- Size: 4.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 🌦️ Weather App
Welcome to the **Weather App**! This elegantly designed weather application provides you with real-time weather information for any city 🌍. Simply enter a location, and the app will display the current weather conditions, including temperature, humidity, and wind speed 💨.
**🌦️ Try the Weather App here: [Weather App](https://hashimthepassionate.github.io/weather-app/)**
## 📋 Table of Contents
- [🌦️ Weather App](#️-weather-app)
- [📋 Table of Contents](#-table-of-contents)
- [✨ Features](#-features)
- [💻 Tech Stack](#-tech-stack)
- [🚀 Installation and Setup](#-installation-and-setup)
- [🛠️ Usage](#️-usage)
- [📸 Screenshots](#-screenshots)
- [Home Page](#home-page)
- [Weather Information](#weather-information)
- [🌐 API Used](#-api-used)
- [🤝 Contributing](#-contributing)
- [📜 License](#-license)
## ✨ Features
- 🌡️ **Temperature Display**: Shows the current temperature in Celsius.
- 🌥️ **Weather Description**: Provides a descriptive summary of the weather (e.g., sunny, cloudy).
- 💦 **Humidity Percentage**: Displays the current humidity level.
- 💨 **Wind Speed**: Shows the wind speed in km/h.
- 🔎 **User-Friendly Search**: Easy-to-use search functionality for entering locations.
- 🎨 **Beautiful UI**: Designed with custom icons and smooth animations for an enhanced user experience.
## 💻 Tech Stack
This app uses the following technologies:
- **HTML5**: Structure of the web page 📄
- **CSS3**: Styling to create an attractive and responsive layout 🎨
- **JavaScript (ES6)**: Data fetching and adding interactivity ✨
- **OpenWeatherMap API**: Provides real-time weather information 🌐
## 🚀 Installation and Setup
To set up and run the Weather App on your local machine, follow these steps:
1. **Clone the Repository** 📂:
```bash
git clone https://github.com/HashimThePassionate/weather-app.git
```
2. **Navigate to the Project Directory** 🚪:
```bash
cd weather-app
```
3. **Open `index.html` in Your Browser** 🌐:
```
open index.html
```
You should now see the Weather App interface, ready to provide weather details 🗺️.
## 🛠️ Usage
1. **Enter Your City**: Input your desired location in the text box labeled "Enter your location" 🌆.
2. **Search for Weather Information**: Click on the search button 🔍 to retrieve the weather details.
3. The app will display:
- 🌡️ **Temperature**: Current temperature in Celsius.
- 🌥️ **Weather Description**: For example, "broken clouds" or "rain".
- 💦 **Humidity**: Humidity percentage.
- 💨 **Wind Speed**: Wind speed in km/h.
If an invalid location is entered, an alert will prompt you to enter a valid city name 🚨.
## 📸 Screenshots
### Home Page
### Weather Information
## 🌐 API Used
The **OpenWeatherMap API** is used to fetch real-time weather data based on the entered city name 🗺️. The API provides data such as temperature, humidity, wind speed, and a brief weather description.
To use the app, you need an API key from [OpenWeatherMap](https://openweathermap.org/api). Once you have your key, replace the `APIKey` variable in `index.js` 🔑.
## 🤝 Contributing
We welcome all contributions to make this project even better! ✨ Here's how you can get involved:
1. **Fork the Repository** 🍴
2. **Create a New Branch** for Your Feature or Bug Fix 🌿:
```bash
git checkout -b feature-branch
```
3. **Make Changes and Commit** 📝:
```bash
git commit -m "Add a new amazing feature"
```
4. **Push to Your Branch** 🚀:
```bash
git push origin feature-branch
```
5. **Open a Pull Request** 📬
We appreciate all improvements, from fixing a typo to suggesting an entirely new feature! 😊
## 📜 License
This project is licensed under the [**MIT License**](./LICENSE) 📄. You are free to use, modify, and distribute this software as per the terms of the license.