Skip to content

A responsive weather application built using vanilla JavaScript and the Fetch API. Users can search for any city and see current weather information, such as temperature, humidity and weather icon. Powered by the OpenWeatherMap API.

Notifications You must be signed in to change notification settings

JakubStry/weather-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

15 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌀️ Weather App

A simple and clean weather application built with HTML, CSS and JavaScript that fetches real-time weather data from the OpenWeatherMap API.

Screenshot


πŸš€ Features

  • Search for weather by city name
  • Displays temperature (Β°C), humidity, description and weather emoji
  • Handles API errors gracefully
  • Responsive layout for mobile and desktop
  • Light UI with smooth styling

πŸ”‘ How to use

To make this app work, you must insert your own API key from OpenWeatherMap.

πŸ”§ Steps to get a key:

  1. Go to https://openweathermap.org/api
  2. Create a free account (takes 1 minute)
  3. Go to the API Keys section in your profile: https://home.openweathermap.org/api_keys
  4. Copy your API key
  5. It may take up to 15 minutes before the key becomes active

πŸ“„ Then:

Open config.js and replace the placeholder value with your own key:

// config.js
const API_KEY = 'your_openweathermap_api_key_here';

Make sure this file is present in your project directory.


⚠️ Important: Never share your real API key in public repositories!
Keep it private and do not commit config.js with your key.
This example includes a placeholder for learning purposes only.

πŸ§ͺ Tech Stack

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • Fetch API
  • OpenWeatherMap

πŸ“ File Structure

weather-app/
β”œβ”€β”€ index.html
β”œβ”€β”€ style.css
β”œβ”€β”€ index.js
β”œβ”€β”€ config.js        ← your API key goes here
└── README.md

πŸ™‹β€β™‚οΈ Author

Created by Jakub Strycharz

πŸ’‘ This project was inspired by the BroCode tutorial on YouTube.
I followed the core structure but added small improvements and extras for learning purposes.


πŸ“œ License

MIT – free to use, modify and distribute.

About

A responsive weather application built using vanilla JavaScript and the Fetch API. Users can search for any city and see current weather information, such as temperature, humidity and weather icon. Powered by the OpenWeatherMap API.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published