Skip to content

anoopcodehack/weather

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

3 Commits
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŒฆ๏ธ Weather App

A simple and responsive Weather Application built using HTML, CSS, JavaScript, and Tailwind CSS. It allows users to search for a city and get real-time weather information instantly.

๐Ÿš€ Features

๐ŸŒ Search weather by city name

โณ Loading indicator while fetching data

โŒ Error handling for invalid city names

๐ŸŽจ Modern UI with Tailwind CSS gradient background

๐Ÿ“ฑ Fully responsive design

๐Ÿ› ๏ธ Tech Stack

HTML5 โ€“ Structure

CSS3 โ€“ Styling

Tailwind CSS โ€“ UI & responsiveness

JavaScript (Vanilla JS) โ€“ Logic & API handling

๐Ÿ“‚ Project Structure WEATHER_SITE/ โ”‚ โ”œโ”€โ”€ weather/ โ”‚ โ”œโ”€โ”€ index.html # Main HTML file โ”‚ โ”œโ”€โ”€ script.js # JavaScript logic โ”œโ”€โ”€ style.css # Custom styles โ”œโ”€โ”€ README.md # Project documentation

โš™๏ธ How It Works

User enters a city name in the input field

Clicks Get Weather

JavaScript fetches weather data from an API

Weather details are displayed dynamically

Errors are shown if the city is not found

๐Ÿงช How to Run Locally

Clone the repository

git clone https://github.com/anoopcodehack/weather.git

Open index.html in your browser (No server required)

๐Ÿ“ธ Preview

Clean UI with gradient background, centered layout, and smooth interactions.

(You can add screenshots later if you want)

๐Ÿ“Œ Future Improvements

๐ŸŒก๏ธ Temperature unit toggle (ยฐC / ยฐF)

๐Ÿ“ Auto-detect user location

๐ŸŒค๏ธ Weather icons & animations

๐Ÿ•’ 5-day forecast

๐Ÿง  Learning Outcome

DOM manipulation using JavaScript

API fetching and error handling

Tailwind CSS utility-first styling

Building real-world mini projects

๐Ÿ‘จโ€๐Ÿ’ป Author

Anoop A GitHub: https://github.com/anoopcodehack

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors