Praktični rad

Vrijeme je i za malo samostalnog rada. Pokušajte iskoristiti prethodne koncepte (i već postojeće znanje o HTML i CSS-u) kako bi napravili jednu funkcionalnu web aplikaciju.

Cilj:
Napravite interaktivnu komponentu koja prati i vizualno prikazuje promjene raspoloženja koristeći tipke na sučelju.

Zadatak

Kreirajte komponentu koja:

1. Prikazuje trenutno raspoloženje korisnika
2. Pokazuje različite ikone/poruke ovisno o raspoloženju
3. Omogućuje promjenu raspoloženja putem tipki na sučelju
4. Broji koliko puta je promijenjeno raspoloženje
5. Koristi uvjetno renderiranje za vizualne efekte

Zahtjevi

1. Komponenta MoodDisplay (Prikaz raspoloženja)

• Prima trenutno raspoloženje putem props-a
• Prikazuje različite ikone i boju pozadine ovisno o stanju:
  • 😊 (žuta) - Sretno
  • 😐 (plava) - Neutralno
  • 😞 (siva) - Tužno
• Prikazuje tekstualni opis koji odgovara raspoloženju

2. Komponenta MoodController (Upravljanje raspoloženjem)

• Ima 3 tipke: Sretno/Neutralno/Tužno
• Koristi useState za praćenje:
  • Trenutnog raspoloženja (string)
  • Brojača klikova (number)
• Ažurira prikaz kada se klikne gumb
• Prikazuje ukupan broj promjena
• Resetira brojač nakon 10 klikova

3. Uvjetno renderiranje

• Različite ikone/boje ovisno o raspoloženju
• Bonus: Animacija(CSS) kada se promijeni raspoloženje
• Prikaz tipke "Reset!" kada brojač dosegne 10 (prije toga je nevidljiva).