Jednostránková webová aplikace, která kombinuje HTML, CSS a JavaScript a využívá NASA Open API (APOD & DONKI). Uživatelé mohou prohlížet „Photo of the Day“, sledovat geomagnetické bouře, přepínat mezi světlým a tmavým motivem, zadat a ověřit hesla ve formuláři a pohodlně se vracet na začátek stránky.
- Jednostránkový web se sekcemi:
- About – stručný popis stránky a použitých API
- Login – formulář se dvojím zadáním hesla a kontrolou shody
- Photos of the Day – 3 fotografie (Dnes, Včera, Náhodný den), při najetí myší se plynule zvětšují, při kliknutí se tevře v novém okně
- Geo-storms Info – informace o aktuálních geomagnetických bouřích
- Contacts – odkazy na GitHub, LinkedIn, Reddit
- Přepínání motivu (light/dark) jediným tlačítkem, změna třídy na
<body>a stylování přes CSS hierarchii - Responzivní hlavička s burger menu (min. 3 odkazy) pro mobilní i desktopové zobrazení
- Formulář pro zadání hesel s validací pomocí
addEventListener - Back to Top tlačítko, které se objeví po scrollu dolů a vrací uživatele na začátek stránky
- Responzivní design pomocí media queries
- Čistý JavaScript bez inline atributů (
onClick), všechny události přeselement.addEventListener - Estetika – jemné stíny, zaoblené rohy, plynulé animace a přechody
.vscode/ # Konfigurace vývojového prostředí (bylo použito pro výjimky rozšíření Spell Checker) src/ # Zdrojové soubory ├── img/ # Složka s obrázky ├── query.css # Media queries (CSS) ├── script.js # JavaScript kód └── style.css # Hlavní CSS styly index.html # Hlavní HTML soubor README.md # Dokumentace k projektu
- Naklonujte repozitář nebo stáhněte složky.
- Otevřete
index.htmlve webovém prohlížeči. - Doporučeno spustit lokální server (např. Live Server ve VS Code) pro správné načtení CSS/JS.
- HTML5 – základní struktura
- CSS3 – Flexbox, Grid, přechody, media queries
- JavaScript (ES6+) –
fetch()pro volání NASA API, DOM manipulace,addEventListener - NASA Open APIs – APOD (Astronomy Picture of the Day), DONKI (Geomagnetic Storms)
- Font Awesome – ikony pro menu a tlačítka
Pavel Karlin
- Email: locky481@gmail.com
- GitHub: eLocky11
- Discord (ENGETO): eLocky11
V případě dotazů mě neváhejte kontaktovat. Užijte si prohlížení a přepínání mezi dnem a nocí! 😊