A simple weather application that allows users to fetch real-time weather data by entering their city name. This app displays the temperature, weather description, and additional details like feels-like temperature, humidity, and wind speed.
- 🌍 Get weather details by city name
- 🌡️ Displays temperature, weather condition, and weather icon
- 💨 Displays additional details: "Feels like", "Humidity", and "Wind speed"
- Responsive design
- HTML5: Semantic markup for the structure of the app
- CSS3: Styling the app and making it responsive
- JavaScript (ES6): Fetching weather data and updating the DOM
- OpenWeatherMap API: Fetching real-time weather data
-
Clone the repository:
git clone https://github.com/your-username/weather-app-js.git cd weather-app-js
-
Create a
config.js
file in the root directory and add your OpenWeatherMap API key:const config = { apiKey: 'YOUR_API_KEY_HERE', // Add your API key here };
-
Open
index.html
in your browser.
- Enter your city name in the input field.
- Click on the "Get weather" button to fetch weather details.
- The app will display the current temperature, description, and additional weather information.
This project uses the OpenWeatherMap API to fetch weather data. You need an API key to use this app, which you can obtain from the OpenWeatherMap website.
https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}&units=metric
├── index.html # Main HTML file
├── style.css # Styling for the Weather App
├── script.js # JavaScript file for fetching weather data and DOM manipulation
├── config.js # API Key configuration file
└── bg-1.avif # Background image for the app
- Add support for multiple cities.
- Display forecast for the next 5 days.
- Show error messages for invalid city names.
This project is open-source and available under the MIT License.
Feel free to contribute to the project by submitting a pull request or creating an issue.