https://github.com/frantiseksilhan/2023-p3a-mpa-react-router-frantiseksilhan

https://github.com/frantiseksilhan/2023-p3a-mpa-react-router-frantiseksilhan

Last synced: 4 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/frantiseksilhan/2023-p3a-mpa-react-router-frantiseksilhan
• Owner: FrantisekSilhan
• Created: 2024-02-12T14:57:22.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-02-12T15:04:14.000Z (9 months ago)
• Last Synced: 2024-04-28T03:19:14.636Z (7 months ago)
• Language: TypeScript
• Size: 40 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Jednoduché stopky II

Zadání na procvičení useState, useEffect, obsluhy tlačítek, předávání dat přes props rozšířené o využití React Router.

Vytvořte - samostatně - a jen s použitím oficiální dokumentace – tedy [MDN](https://developer.mozilla.org/en-US/) a [React.dev](https://react.dev/) - aplikaci pro použití během písemek pro sledování toho, kolik času ještě studentům zbývá. 

## Zadání

Rozšiřte stávající aplikaci tak, aby pro přepínání stránek používala React Router.

* https://reactrouter.com/en/main

## Původní zadání

## Obrazovka se stopkami

V tomto případě očekáváme, že během samotné písemky bude na obrazovce (například na projektoru) vidět jen zbývající čas vyjádřený jako počet hodin, minut a sekund a jako [progressbar](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress). Z této obrazovky je možné stopky pozastavit, znovu rozběhnout a také zcela zastavit. Případná tlačítka by ale neměla rušit obraz během odpočtu - lze je skrývat, lze se přepnout na další obrazovku. Nezapomeňte vhodně rušit timeout aplikace.

## Obrazovka nastavení

Na této obrazovce je možné nastavit délku písemky. Ta se pohybuje od 5 sekund do 6 hodin. Uživatel zde má také předpřipravené možnosti:

* pětiminutovka - 5 minut

* desetiminutovka - 10 minut

* maturitní zkouška - 15 minut

* hodinový test - 40 minut

* dvouhodinový test - 85 minut

* maturitní práce - 4 hodiny

Z této obrazovky lze přejít na obrazovku stopek.

## Vzhled a UI

Do aplikace připojte vhodný font a pomocí css modulů ji nastylujte tak, aby bylo rozhraní minimalistické, připravené na promítání na celou obrazovku. Aplikaci lze stylovat jako digitální hodiny nebo elegantní minimalistickou aplikaci (Android, iOS).

## Vylepšení

* Na poslední momenty (jsou to procenta nebo minuty, ideálně by si uživatel mohl zvolit) práce uživatele upozorněte změnou barvy vhodného prvku.