Były podsumowania, było o planach na nowy rok, a dzisiaj zaproszę Was do zrobienia czegoś praktycznego w kwestii nauki programowania. A mianowicie: do stworzenia prostej aplikacji w JS. To drugi wpis z serii JavaScript: Pierwszy projekt. Zaczynamy!
Celem artykułów z tej serii jest przedstawienie tutoriali prostych aplikacji, które umożliwią Wam wykorzystanie w praktyce podstaw JavaScriptu. W poprzednim wpisie tworzyliśmy quiz, możecie cały tutorial zobaczyć tutaj. Wszystkie mini projekty ukazujące się w ramach serii są dostępne na koncie Codepen Wake up and Code. Przeniosłam tam również przykładową aplikację z poprzedniego wpisu, żeby wszystko było w jednym miejscu. Jednak zachęcam Was mocno, by najpierw samemu spróbować zbudować aplikację, a potem dopiero sprawdzać mój kod na Codepen Mój przykładowy kalkulator oraz wzskazówki w poniższym wpisie przeznaczone są dla osób, które zaczynają swoją przygodę z JS i szukają pomysłów na projekty. Nie są to kompletne aplikacje, gotowe na komercyjny rynek, ale sposób na przećwiczenie podstaw, wykorzystanie np. zapisywania elementów DOM do zmiennych czy używania instrukcji warunkowych.
Projekt w JS: Kalkulator walut
Czas przejść do rzeczy! Dzisiaj stworzymy kalkulator walut. Jak dokładnie ma on wyglądać? Użytkownik powinien mieć możliwość wpisać kwotę, jaką chce przeliczyć w formularzu, a następnie wybrać z jakiej waluty na jaką ma nastąpić przeliczenie. Po naciśnięciu przycisku, wynik ma być widoczny na stronie. Wskazówki zawarte w tym wpisie mają Was naprowadzić na możliwe rozwiązania, ale nie są jedynym sposobem na napisanie takiego kalkulatora. Pamiętajcie, iż w programowaniu nie ma jednej odpowiedzi, dlatego jak wpadniecie na zupełnie inny pomysł zrealizowania zadania, śmiało próbujcie! I podzielcie się koniecznie swoimi kalkulatorami. Pod koniec wpisu znajdziecie też kilka pomysłów, jak można rozszerzyć tę prostą aplikację.
Krok 1: Zastanów się nad logiką
Zupełnie tak jak poprzednio, najpierw zatrzymamy się nad logiczną warstwą aplikacji. Pomyślcie, jak działa taki kalkulator i w jaki sposób najlepiej go napisać. Użytkownik powinien mieć możliwość wpisania kwoty do przeliczenia w jakiś input i wybrania odpowiednich walut w polach typu select, co sugeruje obecność formularza. Po naciśnięciu przycisku wynik ma pojawiać się na stronie, także potrzeba też sekcji, w której będzie można go wyświetlić. Tak naprawdę cała logika przeliczania będzie działa się w jednej funkcji przeliczającej waluty w zależności od wybranych parametrów. Jako iż ćwiczymy tutaj podstawy JS, będziemy mogli użyć kursów walut zakodowanych na stałe w zmiennych, nie będziemy łączyć się z żadnym API. Zachęcam, byście teraz na chwilkę się zatrzymali i wypisali sobie, jakie elementy byłyby potrzebne do przeliczenia waluty i ogólny mechanizm jak to robić. Gotowe? Wskakujcie do kolejnego punktu!
Krok 2: HTML i CSS
Chcemy mieć projekt dostępny na stronie (albo na przykład na Codepen), także fajnie jest mieć warstwę wizualną aplikacji. jeżeli zupełnie nie macie ochoty dzisiaj na zabawę w HTMl i CSS, możecie zrobić kalkulator tylko w JS i wypisywać wyniki w konsoli. Ale o wiele więcej zabawy jest z symulacją realnej aplikacji! Czego nam trzeba? Jak już pisałam wyżej, numer jeden na naszej liście to formularze. jeżeli nie mieliście zupełnie jeszcze do czynienia z formularzami w HTML, polecam zapoznać się z podstawami opisanymi w tym artykule. Wszystko jest tu fajnie i prosto wytłumaczone. Dodatkowo, formularze w HTML są naprawdę bardzo intuicyjne i jak spojrzycie na kod, na pewno od razu będziecie w stanie zidentyfikować, do czego służy dany znacznik.
Ja w swoim projekcie umieściłam formularz, który zawiera pole input typu number, dzięki czemu nie muszę się martwić o to, iż ktoś będzie chciał przeliczać literki. Dodatkowo wybrałam dwa pola typu select, w których ustawiłam po trzy waluty jako opcje. Na początek zachęcam do stworzenia czegoś na bazie trzech podstawowych walut, żebyście nie zagubili się za bardzo w funkcjach i jednocześnie mogli sprawdzić, czy Wasza logika działa. Oprócz tego w formularzu umieściłam przycisk, a pod formularzem sekcję w której będą pokazywane wyniki. Na samym początku nic w niej nie widać, bo wyniki pokazują się dopiero po wciśnięciu przycisku.
Chciałam też trochę do razu postylować mój kalkulator (i jednocześnie wypróbować nowości!), dlatego zdecydowałam się na użycie Bootstrapa 4.0. Dlatego nie zdziwcie się, jak nazwy klas w moim HTMLu wydadzą Wam się trochę egzotyczne. Wszystkich ciekawych odsyłam do całej dokumentacji nowego Bootstrapa. To dopiero wersja Beta, ale fajnie już się z nią zapoznać Koniec mojego rozwodzenia się nad Bootstrapem! Działajcie ze swoim formularzem w HTML, a jak będziecie gotowi, ruszajcie do kolejnego punktu, w którym pojawi się gość honorowy dzisiejszego wpisu, czyli JS.
Krok 3: JS – przygotuj zmienne
I oto jesteśmy w pliku JS! jeżeli pracujecie lokalnie, pamiętajcie, by go najpierw podłączyć odpowiednio do HTML. jeżeli pracujecie na Codepen, po prostu możecie pisać. Zaczynamy od przygotowania niezbędnych zmiennych. Zastanówcie się, co musimy zapisać do zmiennych. Na pewno będą to elementy HTML, z których będziemy wyciągać odpowiednie dane, czyli nasz input oraz selecty. Potrzebujemy także przycisku oraz miejsca, w którym będziemy wyświetlać wynik. Ja chciałam pod formularzem wyświetlać całe wyrażenie np. 1 USD to 3,40 PLN, dlatego przygotowałam paragraf z elementami span, które pobrałam do zmiennych. Przypominam, iż elementy z DOM zapisujemy do zmiennych np. wykorzystując document.querySelector('nazwa selektora') albo document.getElementById('nazwa id'). Ja w moim projekcie użyłam obu, żeby pokazać Wam, jak działają. Zwróćcie uwagę, iż inaczej podajemy nazwę elementu, gdy pobieramy go jako selektor – zachowujemy kropkę albo krzyżyk, zupełnie jak w pliku CSS. Natomiast przy pobraniu jako ID, po prostu podajemy nazwę danego ID.
Oprócz zapisywania do zmiennych elementów z formularza, dzięki którym zyskamy dostęp do wybranych przez użytkownika parametrów, przygotujmy sobie także zmienne przydatne do samego przeliczania. Chodzi oczywiście o kursy walut. Jak wspominałam, ćwiczymy tu podstawy JavaScriptu, także śmiało na stałe zapiszcie sobie kursy. Ja wszystkie kursy podstawowych par walutowych zapisałam w tablicy, a następnie odpowiednie elementy tablicy przypisałam zmiennym o nazwach odpowiadających parom walut. Czyli, jeżeli kurs PLNUSD był jako pierwszy w mojej tablicy, tak zapisałam zmienną: var PLNUSD = rates[0], przy założeniu, iż rates to tablica zawierająca kursy. To nie jest jedyny sposób na zrobienie tego, coś takiego przyszło mi po prostu do głowy. Zastanówcie się sami, jak najlepiej zapisać kursy walut, żeby łatwo było ich Wam potem użyć w funkcji.
Krok 4: JS – napisz główną funkcję
Tutaj aż tak dużo nie podpowiem, bo to tak naprawdę główne zadanie całej aplikacji i dobrze, jeżeli pogłówkujecie sami. Mogę jedynie powiedzieć, iż musimy sprawdzić, jakie wartości użytkownik wprowadził do formularza. jeżeli mamy zapisany do zmiennej input i zmienna nazywa się np. amountFromInput, możemy odwołać się do wprowadzonej wartości przez amountFromInput.value. Tak zyskamy liczbę wpisaną przez użytkownika, a także, analogicznie, wybrane waluty. Potem pozostaje nam tylko w instrukcjach warunkowych wypisać, co ma się dziać w przypadku danej pary walutowej (tzn. jaki kurs ma zostać wybrany). No i pokazać to wszystko we właściwym miejscu w HTML. Nie zapomnijcie też o podłączeniu tej funkcji do przycisku.
I bardzo ważna uwaga: formularz w HTML z automatu po naciśnięciu przycisku typu submit chce się gdzieś wysłać przez co strona się przeładowuje. Dlatego w funkcji musimy zabronić mu wykonywanie tej akcji, co umożliwia nam metoda preventDefault(). Więcej o niej poczytacie tutaj. Jak nie będziecie wiedzieli za bardzo jak jej użyć, a Wasz formularz będzie się przeładowywał po naciśnięciu przycisku, sprawdźcie kod w mojej wersji projektu.
Krok 5 – wprowadź swoje pomysły!
Gotowe? Działa? To świetnie! Moją wersję projektu znajdziecie tu. jeżeli macie jakiekolwiek pytania dotyczące kodu, piszcie śmiało. Jak pewnie widzicie, przedstawiony przeze mnie krótki tutorial, nie pozwala na stworzenie kalkulatora, który od razu moglibyście dać komuś do używania. Dlaczego? Nie mamy tutaj za dużo walidacji, więc użytkownik może sobie poszaleć. Także pierwsza sugestia do polepszeń to wprowadzenie walidacji. Dodatkowo możecie też zmienić wyświetlanie liczb, np. żeby zawsze były pokazywane dwa miejsca po przecinku. Użytkownik też nie powinien móc wybrać dwóch takich samych walut, bo wtedy przecież przeliczanie nie ma sensu. Oprócz tego, pewnie widzicie, iż kilka instrukcji warunkowych pod rząd, to nie jest optymalny kod. Gdybyśmy mieli więcej walut, czekałoby nas bardzo dużo pisania. Może macie pomysł, jak sprawdzić wartość pól krótszym kodem? A może coś jeszcze przychodzi Wam do głowy? Śmiało wprowadźcie te zmiany w swoich projektach! Najwięcej satysfakcji bowiem daje wymyślenie czegoś fajnego samemu!
Mam nadzieję, iż ten wpis przypadł Wam do gustu i iż pobawicie się dzięki niemu trochę JS. Koniecznie dajcie znać, jak Wam poszło! Powodzenia
Chcesz się czymś podzielić? O coś zapytać? Napisz komentarz pod postem, maila do mnie na joanna@wakeupandcode.pl, wiadomość na fanpage Wake up and Code albo post w grupie Programuj, dziewczyno!
