Ostatnio przypomniałam sobie o challengu z Javascript, który dawno dawno temu widziałam. Mówię tutaj o Javascript30 – darmowym kursie przygotowanym przez Wes Bos’a.

Dobrze się dla mnie składało bo chciałam na szybko poćwiczyć krótkie zadania w czystym Javascript. Wes Bos proponuje świetne mini programy do napisania. Nie trzeba poprzestawać na tym co jest w kursie, można oprzeć się na koncepcji podstawionego przed nami zadania i zrobić je według własnego widzimisię. Ja właśnie tak zrobiłam. Rozwijając pomysły z wyzwania kierowałam się zasadami żeby były w miarę miłe dla oka, mogły się chociaż w małym stopniu do czegoś przydać (” np. mnie ! 🙂 „), żeby były związane z rzeczami które lubię albo mi się podobają – bo wtedy wiadomo, cały proces jest jeszcze bardziej przyjemny i najważniejsze – żeby były szybkie do wykonania.

1. Miała być perkusja a wyszły „dziwniejsze rzeczy” …

I tak właśnie w challengu z pierwszego dnia gdzie zadaniem było wykonanie „zestawu perkusyjnego” sterowanego klawiszami klawiatury ja zakodowałam logo „Stranger Things” („ukłon w stronę świetnego trzeciego sezonu”). Klawisze po naciśnięciu „grają” i podświetlają się.

Tutaj link do codepen!
Muzyka w klimacie „Stranger things”.

2. Zegarek na czasie.

Kolejne wyzwanie polegało na zbudowaniu prostego zegara opartego na rzeczywistej godzinie. Ale to przecież takie przeleciane i nudne . I nie mówcie, że nigdy nie widzieliście paskudnych przykładów zakodowanych zegarów rozsianych po polskim internecie. I tak nie uwierzę ! No tak, więc dodałam mały twist. Wykorzystałam zdjęcie z zegarkiem z którego wymazałam w programie graficznym wskazówki. W ich miejsce pojawiły się te napędzane Javascriptem. Mnie efekt się całkiem podoba, chociaż możnaby było posiedzieć dłużej nad wskazówkami żeby nadać im bardziej realistycznego wyglądu. Jak na robotę na szybko ja jestem kontent.

Tutaj link do codepen!
Zegarek.

3. Generator gradientu tekstu.

Trzecim wyzwaniem była zabawa ze zmiennymi CSS. W kursie zmieniane były parametry zdjęcia takie jak stopień rozmycia, kolor tła itp. Wydało mi się to średnio przydatne. Machnęłam więc prosty generator gradientu na tekście. Nic niezwyczajnego, ale ma większe szanse kiedyś się przydać. Mamy kilka parametrów do ustawienia typu kolory, stopień nachylenia gradientu itp. Na bieżąco generuje nam się kod, który możemy sobie skopiować do własnego projektu. Prosto i przyjemnie!

Tutaj link do codepen!

Generator gradientu w tekście.

Generalnie narazie tyle udało mi się „urodzić”. Jak narazie robienie tych zadań to sama przyjemność. Kolejne wyzwania czekają, więc do dzieła!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Close