arimeq / girls-js-challenge-1

Created with StackBlitz ⚡️

girls-js-exercise-1

Dzień dobry, Witajcie w pierwszym wyzwaniu girls.js!

Celem tego zadania jest poprawienie formularza - dodanie do niego paru brakujących funkcjonalności oraz poprawienie jego wyglądu.

Rzeczy do zrobienia są opisane poniżej. Kiedy zrobisz jakąś rzecz, możesz nacisnąć przycisk "Sprawdź zadanie", aby zobaczyć swoje postępy i sprawdzić, czy zrobiłaś podpunkt dobrze (albo przynajmniej według przewiedzianych przez nas rozwiązań ;-)). Jeśli nie będziesz mogła wymyśleć, jak to zadanie zrobić, możesz nacisnąć przycisk "Podpowiedź", żeby zobaczyć podpowiedź.

Kiedy skończysz lub już nie będziesz mogła tego zadania dokończyć, wyślij linka do swojego rozwiązania na Facebooku. Tam wszyscy chętnie Ci pomogą i jeśli zechcesz, powiedzą Ci jak możesz poprawić swój kod, aby wyglądał ładnie.

Pliki

Pliki nad którymi będziesz pracować to index.html, index.js i style.css. Jeśli nie chcesz sobie zaspoilować zabawy, nie zaglądaj do folderu tests, przed skończeniem zadań :).

Zadania

1. Popraw nazwę strony. Aktualnie strona nosi tytuł "Your site name". Nadaj mu jakąś ładniejszą nazwę. Jakąkolwiek.
2. Popraw stylówę. Mało komu spodoba się aktualny szary kolor headera i taki podstawowy button "Submit". Nadaj im jakieś nowe kolory tła. Najładniejsze kolory są wtedy, kiedy są wybrane według jakiegoś konkretnego stylu. Możesz w tym celu wyszukać w Google'u "Color palette generator", albo użyć strony https://coolors.co.
3. Duże pole tekstowe oznaczone "Your interests" można rozszerzać i zmniejszać chwytając i przesuwając prawy dolny róg. To nie wygląda najlepiej i raczej nie chcemy tego umożliwiać użytkownikowi. Zablokuj to :)
4. Z jakiegoś dziwnego powodu, na moim Macu, pierwsze trzy pola tekstowe mają różne kolory obwódki, niż czwarty. Może nie używacie Macbooka, ale gdy tworzycie stronę internetową, ważne jest, żeby ona wyglądała dobrze na każdej przeglądarce. Ustawcie jakiś kolor obramowania (border) dla wszystkich pól tekstowych. Wygląd różnych statycznych stron na różnych przeglądarkach możecie sprawdzić tutaj: https://comparium.app/
5. Zrób walidację formularza. Po naciśnięciu "Submit", niech niepoprawne pola zyskają czerwoną obwódkę. Pole jest niepoprawne, jeśli jest oznaczone gwiazdką (*) i nie ma wartości, oraz kiedy pole jest typu email i ma inny format, niż [email protected], czyli nie posiada '@', nazwy przed '@', nazwy strony przed '.' lub domeny po '.'. Użyj do tego rozpoczętych funkcji z pliku 'index.js' oznaczonych jako "Funkcja do uzupełnienia". Po ponownym naciśnięciu "Submit", niech czerwone pola powrócą do poprzedniego koloru.
6. Po naciśnięciu submit wyślij treść formularza funkcją "sendRequest" i wyświetl komunikat na stronie :)

Zapisywanie

Żeby zapisać rozwiązanie, należy nacisnąć niebieki przycisk Fork, w headerze strony i się zalogować. Potem trzeba naciskać "Save" lub Ctrl + S.

Uwagi

Nie zmieniajcie nazw klas, ponieważ wtedy niektóre testy przestaną działać :)