Weather app

Small patch for the Weather App based on reviewer feedback. Three fixes.

First, the language toggle now actually translates the full UI. Before,
switching to English left several strings in Spanish: the forecast
heading, the day labels in both the cards and the canvas chart, the
“highs / lows” legend, and most embarrassingly, the weather description
itself (“algo de nubes” instead of “scattered clouds”). The issue was
that the forecast code was hardcoded in Spanish. Now it queries the
OpenWeatherMap API with the correct lang parameter, and re-translates
the forecast cards, the canvas labels, and the legend when the language
changes.

Second, the units toggle (Celsius / Fahrenheit) was already working but
now also converts wind speed from km/h to mph when Fahrenheit is
selected, which makes sense for imperial users.

Third, the welcome state is in place. First-time visitors now see a
pulsing sun icon and a short prompt instead of a blank page with just a
search bar.

Thanks to everyone who tested and left feedback. Three reviewers asked
for multi-language support and one asked for unit conversion, so those
were the top requested features.

Beta 4, the final version of the Weather App, is up. Three new things:

1. Geolocation: there’s a “My location” button next to the search bar
   that uses the browser’s geolocation API to get your coordinates, then
   queries OpenWeatherMap by lat/lon instead of city name. Useful when you
   don’t know the exact city name or just want your local weather fast.

2. Favorites: each result has a star icon next to the city name. Click
   it to add the city to your favorites, which show up as chips below the
   search bar. Click a chip to search that city again, click the × to
   remove it. Favorites are stored in localStorage so they survive reloads.

3. PWA: added a manifest and a service worker, so the app is now
   installable on desktop and mobile. Once installed it opens in its own
   window without the browser chrome, and the service worker caches the
   main files so it works offline too.

Also changed the font from system-ui to Space Grotesk. The default
sans-serif felt a bit generic, Space Grotesk gives it more character,
especially on the big temperature numbers.

This is the last beta for this project. Calling Weather App done.

Beta 3 of the Weather App is up. Now after the current weather you get a
5-day forecast with the day name, weather icon and max/min temperature
for each day!!!(kinda usefull i know), plus a small chart below showing the max (red) and min
(blue) temperatures across the week. The chart is drawn on a canvas
with vanilla JS, no Chart.js or any library, just moveto/lineTo/arc.

The tricky part was the forecast API. It returns a data point every 3
hours, so I had to filter and group them by day, taking the actual max
and min of all the 3-hour readings inside each day. Otherwise the “max”
was just the temperature at a random hour, not the real daily high.

I also had to redefine my existing mostrarClima function to also trigger
the forecast fetch - I kept the old function in a variable and called it
inside the new one, so the GIF background logic I had before still
runs. Took me a while to figure that pattern out.

Next version will probably be the last: geolocation + favorites +
installable PWA. But i don`t really know if geolocation is a good idea

Update:Hit a nasty bug in this version: every search returned “city not found”
even for Madrid, (which definitely works). Turns out the pattern I used to
extend mostrarClima (saving the old function and redefining it) caused an
infinite recursion because of JavaScript hoisting -function declarations
get hoisted to the top, so when I saved “the old function” I was actually
saving the new one, which then called itself forever. Changed function mostrarClima() to mostrarClima = function() (function expression instead
of declaration) and it fixed it. Took me way too long to figure out.

Beta 2 of the Weather App is up. The UI got a real redesign: the
background is now a GIF that matches the weather condition based on the info that OpenWeathermap gave me: a sunny sky
for clear weather, falling rain for rainy cities, snow for cold ones,
lightning for storms, etc. Cards use glassmorphism (frosted glass) so the
GIF shows through while the text stays readable, with a dark overlay to
keep contrast.

Originally I called the Giphy API on every search and got a random GIF,
but the results were inconsistent, for example, once I searched London and got a
dancing water drop instead of actual rain. So I picked one fixed GIF per
weather type by hand and hardcoded them. Now it feels like you’re
actually looking at the sky of that city, same view every time.

Next version will add a 5-day forecast below the current weather.

First version of my Weather App is up. You type a city name, hit Search,
and it pulls temperature, humidity, wind, feels-like and a short
description from OpenWeatherMap. UI is intentionally plain cuz I wanted to
make sure the API actually works before making it pretty.

Fought my editor’s autocomplete again: it kept rewriting value to
ariaValueMax, which silently broke the search button. Same bug as in my
last project, should really disable that suggestion. Also took me a while
to get the .then / .catch / .finally chain right, especially handling 404
when the city doesn’t exist without crashing the page.

Next version will be a proper redesign. Right now it works but it’s ugly.