Projekt: Weather App

Jan 18, 2026

Leden 2026

Po projektu ToDo List, kde jsem data ukládal jen k sobě do prohlížeče, přišel skok do reálného světa – API. Úkolem bylo vytvořit aplikaci na předpověď počasí, která si tahá živá data z externího serveru (Visual Crossing).

Hlavním cílem nebylo ani tak počasí samotné, jako spíš pochopení toho, jak JavaScript komunikuje se světem a jak funguje asynchronní kód.

Sbohem .then(), vítej async/await

Největší “aha moment” tohoto týdne byl přechod od Promises (Slibů) k moderní syntaxi.

Začal jsem s klasickým řetězením .then(), což sice fungovalo, ale kód byl plný závorek a špatně se četl. Pak jsem objevil async a await. Je to jen “syntaktický cukr”, ale kód najednou vypadá čistě a čte se shora dolů, i když na pozadí čeká na odpověď serveru.

Takhle vypadá srdce mé aplikace:

const getWeather = async () => {
	try {
		const response = await fetch(url);

		// Fetch nehodí chybu při 404, musíme to hlídat ručně
		if (!response.ok) {
			throw new Error(`Chyba načítání: ${response.status}`);
		}

		const data = await response.json();

		// Úprava DOMu až ve chvíli, kdy máme data
		weatherContent.textContent = `V městě ${data.address} je právě ${data.currentConditions.temp}°C`;
	} catch (error) {
		// Záchranná síť pro výpadky netu nebo špatné klíče
		console.error(error);
	}
};

Co mě potrápilo

• API Klíče a bezpečnost: První lekce bezpečnosti. Dozvěděl jsem se, že API klíče nepatří do veřejného repozitáře na GitHubu. Vyřešil jsem to přesunem klíče do config.js, který jsem přidal do .gitignore, a importuji ho jako ES modul.
• Chybové stavy: Zjistil jsem, že když server nenajde město (chyba 404), fetch to nepovažuje za chybu. Musel jsem se naučit ručně vyhazovat throw new Error, aby se spustil catch blok.
• CSS a design: Chtěl jsem, aby aplikace vypadala moderně, tak jsem zvolil tmavý režim s neonovým tlačítkem a dynamickou změnou obrázků podle toho, jestli mrzne nebo je teplo.

GitHub: projekt weather app