JavaScript: Pierwszy projekt – Kalkulator walut

JavaScript: Pierwszy projekt

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, że 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 że ć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śli 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śli 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, że 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śli pracujecie lokalnie, pamiętajcie, by go najpierw podłączyć odpowiednio do HTML. Jeśli 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, że 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ę, że 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śli kurs PLNUSD był jako pierwszy w mojej tablicy, tak zapisałam zmienną: var PLNUSD = rates[0], przy założeniu, że 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śli pogłówkujecie sami. Mogę jedynie powiedzieć, że musimy sprawdzić, jakie wartości użytkownik wprowadził do formularza. Jeśli 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 w odpowiednim 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śli 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, że 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ę, że ten wpis przypadł Wam do gustu i że 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!

13 Replies to “JavaScript: Pierwszy projekt – Kalkulator walut”

  1. Ooo, super! Moim postanowieniem noworocznym jest napisanie apki w JS, więc z nieba mi spadasz z tym projektem 🙂

    1. Powodzenia! Koniecznie podziel się rezultatem w takim razie 🙂

  2. Byłem ciekaw jak słowniki działają w JS, oto rezultat dla zainteresowanych:
    https://codepen.io/r4ndomw4lk/pen/KZyEBY
    p.s. ściągnąłem od Ciebie Asiu front-end 😉

    1. Tylko dodaj do inputa min=”0″ bo inaczej pozwalasz przeliczać ujemne liczby.

    2. O, ale fajny pomysł na skrócenie kodu! Super wyszło 🙂
      PS To layout bardziej z dokumentacji Bootstrapa niż mój 😉

    3. Jakieś zaokrąglenie by się przydało i będzie ok.

  3. Bardzo fajny kalkulator. Sam osobiście tez zacząłem od stworzenia czegoś takiego -> http://calculators.pl/kalkulator-walut/. Postawiłem sobie jednak wyzwanie w postaci nie ustawiania stałych zmiennych jako kursu, ale pobieranie ich przez API NBP , które jest dostępne za darmo do czego zachęcam:)

    1. Wow! Super, też muszę zrobić wersję z API 🙂

  4. Trochę czyściej, DRY, z podziałem odpowiedzialności i w aktualnym standardzie (co nie znaczy, że perfekt ;)): https://codepen.io/caderek/pen/jZEZYL?editors=0010

    1. Ale super wyszło 🙂 Dlatego lubię oglądać rozwiązania innych. Może nie jest to opcja dla super początkującego, ale na pewno można się wiele nauczyć analizując taki kod 🙂

  5. Hm. próbuje zrobić wersje z API NBP jak kolega wyżej. I zastanawiam się co lepiej użyć Fetch API
    Czy XMLHttpRequest? Ktoś coś?

    1. Fetch API, nie baw się w archeologię.

  6. Ciekawy wpis, ja od dłuższego czasu pracuję głównie w php i stworzyłem kiedyś taki kalkulator: https://skalkuluj.pl/kalkulator-walutowy
    Jak będę miał trochę czasu niewątpliwie spróbuję napisać jego jsowy odpowiednik i jeszcze tu wrócę :).

Dodaj komentarz