☀️🌧️ From Cloudy Ideas to Clear Skies: How I Built My Weather App

The Idea

It all started on one of those mornings where you step outside thinking it’s sunny, only to get drenched five minutes later.
I thought:

“Wouldn’t it be nice to have a quick, simple tool that tells me the weather without all the extra noise?”

I wasn’t aiming for a huge app with maps and animations. Just something clean, minimal, and fast — and built with pure HTML, CSS, and JavaScript, no frameworks.

Planning the App

I pictured it like this:

A small search bar where I type a city name
A button to fetch the weather instantly
A neat display with the temperature, description, and a little icon

That’s it. No clutter, no ads, just the essentials.

Bringing It to Life

I started with a simple web page:

HTML gave me the structure — the input, the button, and a space to show results.
CSS made it look pleasant. I gave it a soft gradient background (because weather feels like gradients to me), covers the entire screen.
JavaScript was the magic wand 🪄. This is where I connected the app to OpenWeatherMap’s API, so it could pull live data for any city.

The first time I typed in “London” and saw the temperature appear instantly, I actually did a little happy dance. It felt like my page had come alive.

Little Things That Made It Special

I made sure users could press Enter instead of always clicking the button.
If someone typed a city that didn’t exist, it would show a friendly “City not found” message instead of breaking.
I tweaked the design so it looked good even on small mobile screens.

The Challenges

At first, my API key didn’t work, and I spent almost an hour wondering if my code was broken. Turns out, I had a typo.
The API returns temperatures in Kelvin. Who uses Kelvin for daily weather? I quickly converted it to Celsius.
On smaller devices, my layout looked squished, so I used responsive CSS to fix it.

What I Learned

This project reminded me that:

You don’t always need a big tech stack to build something useful.
APIs are super fun once you get the hang of them.
Small design touches (colours, spacing, icons) can make a huge difference in user experience.

Next Steps

I’d love to:

Show a 5-day forecast
Auto-detect the user’s location so they don’t even need to type
Change the background based on the weather (sunny = yellow, rainy = blue)

Final Thoughts

This little weather app might be simple, but it’s 100% mine — from concept to deployment. And the best part? Every time I check the weather now, I’m looking at something I built with my own hands.

You can try it here:
Live Demo: weather-app-pearl-tau-26.vercel.app
GitHub Repo: github.com/Raveena5597/weather-app

How I Built My Own Weather App