JavaScript – projekty dla początkujących – cz. I

Pytacie mnie czasem jakie projekty możecie wykonać celem przećwiczenia JavaScript. W końcu nauka programowania to nade wszystko praktyka, praktyka i jeszcze więcej praktyki 😉 A że projektów nigdy za dużo, rozpoczynam serię propozycji projektów, o różnym poziomie trudności.

Niedługo osobno rozpocznę serię zadań z JavaScript.

Dzisiejsze projekty mocno skupiają się na komunikacji JavaScript – DOM, operacjach na elementach DOM, nasłuchiwaniu na eventy (click, key, itp.). 

Ćwicząc JavaScript totalnie nie musicie przejmować się tym, jak aplikacja wygląda (HTML, CSS) – chyba, że chcecie 😉 

(subiektywny poziom trudności zadania/modyfikacji) (1 – łatwe, 10 – hard core)

Prosty Licznik (1)

Kliknięcie w minus odejmuje (jeden bądź dowolny krok), plus: dodaje 🙂 

Kalkulator (1 – 6)

I tutaj kilka poziomów trudności: 

(1)

Trzy input’y. 

Wprowadzasz pierwszą i drugą liczbę, aplikacja wylicza trzecią. 

Początkowo możesz dodać przycisk: Oblicz. Jak w widocznym poniżej przykładzie:

Wynik pojawiałby się dopiero po kliknięciu “Oblicz”. 

(3)

Docelowo fajnie by było, gdyby każda zmiana w Input1, Input2 generowała zmianę wyniku automatycznie (bez zbędnych przycisków 😉 ). Brak wprowadzonej wartości? Możesz przyjąć, że wynosi 0 i wyzerować wynik. 

(6)

Level wyżej (albo pare) to stworzenie działającego kalkulatora jak poniżej:

Tabliczka mnożenia 🙂 (1-7)

Zaczynając od:

(1)

Możesz zrobić komuś test z tabliczki mnożenia 🙂 

Zrób pod spodem log z rezultatami (3), np.

Domyślnie (3)

• aplikacja losowo dobiera liczby w obu polach z zakresu 1-9. 

Możesz roszerzyć do (7):

• działania nie mogą się powtarzać 🙂 czyli masz na wejściu całą tabliczkę mnożenia, ale jeśli aplikacja już raz spytała o dane działanie – nie może tego zrobić ponownie. 

Hex to Background (1-5)

Kilka wariacji nt. tej aplikacji 🙂 

Tak czy inaczej wartość ustawiona w Input zmienia kolor tła na adekwatny do ustawienia. 

Możesz skorzystać z przycisku “Zmień” i zmieniać kolor tylko i wyłącznie po jego kliknięciu. (2)

Możesz też zmieniać na bieżąco kolor gdy użytkownik wprowadza wartość (na każdy przycisk (key)) (3) (zwróć uwagę, że nie każda wartość będzie stanowiła poprawny wynik, np. #ffff? możesz założyć, że w takim przypadku zmieniasz kolor tła na białe – tak jakby nie ustawione było żadne)

Możesz walidować wartość wprowadzoną przez użytkownika – np. żeby nie pojawiały się tam wartości spoza zakresu jak: zzzzzz, itp. (zakres; 0-f = 0, 1, 2 … , 9, a, b, c, d, e, f) (5)

A możesz podpiąć pod zmień losowanie koloru 😉 A w Input wyświetlać wylosowaną wartość (pamiętaj o zakresie, 0 – f). (1)

A skoro już o Hex mowa: 

* RBG to Hex, Hex to RGB (9)

(zwłaszcza, jeśli nie wiesz jak to zrobić ręcznie, na kartce papieru 😛 )

Konwerter. 

Zadanie z *, bo przy okazji dowiesz się jak konwertować zapis heksadecymalny (Hex) do decymalnego (RGB) i z powrotem 🙂 (napisać na ten temat jakiś artykuł?)

Tutaj ponownie: sky is the limit!

Możesz dodać walidację i informować, czy użytkownik wpisuje wartość z zakresu (HEX, a w przypadku RGB = 0-255) – czerwona ramka jeśli nie? może jakiś komunikat? 

W wersji podstawowej wystarczy, że założysz, że użytkownik dobrze wie co tam wpisać 🙂 

Uwaga! Domyślnie w programowaniu zakładamy zawsze, że użytkownik może wymyślić milion sposobów na wykorzystanie aplikacji niezgodnych z jej domyślnym działaniem 😉 np. wpisze w R: “alamakota” 😀 I tym podobne 😛  

Oczywiście, każdy z tych projektów możesz rozwijać zgodnie z tym jak chcesz. Mogą być bardziej lub mniej zaawansowane, wyglądać całkiem inaczej. Traktuj je jako inspirację. I spokojnie eksperymentuj, rozwijaj, zmieniaj zgodnie z pomysłami 😉

Jeśli masz jakieś pytania, coś nie jest jasne, nie masz pomysłu jak można coś rozwinąć dalej – daj znać w komentarzu, na forum, Discordzie lub pisząc na platforma@zanetajazdzyk.pl 🙂 

Mało? Zajrzyj jeszcze w te dwa miejsca 🙂

JavaScript 30 — Build 30 things with vanilla JS in 30 days with 30 tutorials

100+ JavaScript Projects for Beginners! [ Solutions Provided! ]

Ciąg dalszy propozycji nastąpi 😉 

Artykuły w ramach serii

<< Portfolio Front-end Developera