1. Przeliczanie rachunku w restauracji

Napisz formularz, który będzie składał się z pól:

• pole input typu number, gdzie podamy kwotę netto do zapłaty
• pole select, gdzie wprowadzimy wielkość napiwku np.: 5, 10, 15, 20%
• przycisk "Przelicz"

Po kliknięciu w "Przelicz" aplikacja obliczy nam cenę brutto gdzie VAT ustalimy sobie na poziomie 5, 8 lub 25% (Twój wybór ;).

Po wysłaniu wynik niech wyświetli się zamiast formularza.

Modyfikacja

Wykonaj to zadanie zarówno za pomocą komponentu klasowego jak i funkcyjnego

‍

2. Walidacja formularzy

Przygotuj formularz, w którym użytkownik będzie wprowadzał swoje dane:

• imię (element input)
• email (element input)
• krótkie bio (element textarea)
• wybór płci - (element radio)
• akceptację regulaminu (nie musi istnieć ;) tutaj skorzystamy z elementu checkbox)

Na końcu formularza powinien znajdować się przycisk do jego wysłania. Wszystkie pola są wymagane, czyli nie da się wysłać formularza do momentu wprowadzenia przez użytkownika wszystkich danych oraz akceptacji regulaminu.

Jeśli jakieś pole nie zostało wypełnione, wówczas aplikacja ustawi czerwony border na tym polu, a pod polem znajdzie się komunikat: "Pole wymagane".

Jeśli wszystkie informacje zostały wprowadzone, to wówczas wszystkie pola zostaną wyczyszczone (nie będzie w nich danych), a na ekranie pojawi się komunikat "Dziękujemy za wysłanie"

‍

3. Formik lub React Hook Form

Wykonaj to zadanie 2 za pomocą biblioteki Formik lub React Hook Form

‍

4. Kalkulator wydatków

Napisz kalkulator wydatków. Aplikację podziel na dwie listy:

1. Pierwsza lista prezentuje Twoje wydatki (nazwa, kwota, kategoria)
2. Druga lista to przychody (nazwa, kwota, kategoria)

Zrób formularz dodawania, który posiada:

• pole radio określające czy jest to wydatek, czy przychód
• pole input typu text z nazwą
• pole input typu number z kwotą
• pole select z kategorią
• przycisk dodawania

Kategorie możesz przechowywać w tablicy i przekazywać do selecta. Powinniśmy mieć możliwość usunięcia każdej pozycji (zarówno przychód, jak i wydatek)

W widocznym miejscu aplikacja powinna pokazywać Twój budżet, czyli np. 1500zł albo -200zł i kolorować na zielono lub czerwono w zależności czy jest powyżej zera :)

Modyfikacja 1

Zdefiniuj wcześniej dwie listy w tablicach - dla wydatków i przychodów. Te dwie listy będą pokazywały się od razu po załadowaniu aplikacji. Formularz natomiast będzie dodawał nową pozycję do już istniejących.

Modyfikacja 2

Możesz zmodyfikować swoją aplikację w taki sposób, aby dodawane dane były przechowywane w localStorage - czyli za każdym razem, gdy załadujesz aplikację dane nie będą znikały, a zostaną załadowane z localStorage.

‍

Zadanie 5

Stwórz nową aplikację, która będzie posiadała główny komponent App Napisz komponent Button, który będzie przechowywał element HTML button. Domyślnie tło będzie niebieskie. Po załadowaniu aplikacji, niech przycisk zmieni swój kolor tła na czerwony, a kolor tekstu na biały. Zaprogramuj to w komponencie Button za pomocą refów.

Modyfikacja 1

Zmień sposób zmiany koloru. Niech kolor już nie zmienia się po załadowaniu aplikacji, a po najechaniu myszką.

Modyfikacja 2

Przenieś logikę odpowiedzialną za zmianę koloru do komponentu nadrzędnego, czy App. Tips: skorzystaj z forwardRef

Powodzenia!