PVA_3.02.03.PRAKTIKUM: Vytvořit responzivní web dle zadání (HTML5, CSS3, JS)
Kalkulačka či převodník
Vytvořte webovou aplikaci typu kalkulačka nebo převodník (měn, délek, teplot, hmotností nebo jiných fyzikálních veličin). Aplikace bude fungovat v reálném čase (bez nutnosti znovu načítat stránku) a bude zaměřena také na přehledný a responzivní design. Výstupem bude funkční webová stránka obsahující:
- vstupní pole
- výběr jednotek/měn
- tlačítko pro výpočet nebo automatický výpočet
- výstupní oblast s výsledkem
Varianta SIMPLE (Základní úroveň)
Cíle:
Ovládnout práci s HTML formulářovými prvky
Využít základní CSS pro vzhled
Použít jednoduché výpočty v JavaScriptu
Specifikace:
Převodník jedné konkrétní veličiny (např. převod cm ⇄ m)
2 vstupní pole nebo 1 pole s přepínačem (from / to)
Výpočet pomocí tlačítka "Převést"
Validace vstupu (např. nesmí být text)
Jednoduchý CSS styl s nadpisem, centrálním rozložením a minimem barev
Bonus (dobrovolně):
Přidání jednoduché animace (např. hover efekt na tlačítku)
Kompletní zadání Varianta SIMPLE (Základní úroveň)
Varianta MODERATO (Středně pokročilá úroveň)
Cíle:
Ovládnout práci s více jednotkami / měnami
Využít responzivní design a lepší strukturu webu
Pracovat s událostmi a strukturami dat v JS
Specifikace:
Možnost výběru typu převodu (např. délka, teplota, hmotnost) pomocí select menu
Převody mezi minimálně 3 jednotkami (např. mm, cm, m)
Automatický výpočet při změně hodnoty nebo jednotky (bez tlačítka)
Validace vstupních hodnot + ošetření chyb (např. zobrazení upozornění)
CSS stylování s responzivním layoutem pomocí Flexboxu nebo Gridu
Uspořádání do karty / bloku – moderní vzhled
Bonus (dobrovolně):
Barevná indikace správně / nesprávně zadaných dat
Při přepnutí jednotek výměna hodnot (např. km → m aktualizuje vstup automaticky)
Kompletní zadání Varianta MODERATO (Středně pokročilá úroveň)
Varianta HARD (Pokročilá úroveň)
Cíle:
Práce s dynamickými daty a pokročilými funkcemi JS
Uplatnění moderního webdesignu a přístupnosti
Navržení rozšiřitelné a modulární aplikace
Specifikace:
Převodník měn nebo více typů veličin (délka, hmotnost, měna, teplota)
Dynamické načítání dat (např. směnné kurzy z objektu nebo simulovaného API)
Možnost přidat další měny/jednotky bez úpravy HTML (např. načtení ze struktury JS objektu)
Pokročilá validace (např. barevné ohraničení chybného pole, tooltip)
Vizuální výstup formou karty nebo notifikace (výsledek s ikonou a animací)
Responzivní a přístupný design (dark/light režim, klávesové ovládání, kontrast)
Bonus (dobrovolně):
Simulované API pomocí fetch() s JSON souborem (pro pokročilé)
Možnost přepnutí jazykové lokalizace aplikace (CZ / EN)
Možnost ukládat historii převodů pomocí localStorage
Kompletní zadání Varianta HARD (Pokročilá úroveň)
Hodnocení projektu:
Systém pro hodnocení projektu
PUBLIKOVÁNO
04.09.2025, 20:53
ODKAZ
https://javascript.weloveit.education/pva-3-02-03-PRAKTIKUM-Vytvorit-responzivni-web-dle-zadani/