13 pomysłów na projekty JavaScript dla początkujących, które pomogą Ci rozwinąć umiejętności kodowania

Zawsze ekscytuje mnie tworzenie gier. Gra w karty pamięci jest jedną z nich.

Znasz zasadę, prawda? Karty leżą na planszy rewersem do dołu. Kiedy klikniesz na dwie karty, zatrzymujesz je, jeśli do siebie pasują, w przeciwnym razie są one ponownie odwracane rewersem do dołu. Grasz tak długo, aż zbierzesz wszystkie karty.

Popup

Popup podobnie jak alert() czy prompt() ma ograniczenia. Są one proste. Twoje projekty zawsze wymagają więcej funkcji, takich jak więcej pól do wyświetlenia, obsługa złożonych akcji, czy dopracowane UI.

Zbudujmy więc jeden z nich.

Galeria zdjęć

Każda strona eCommerce posiada galerię zdjęć na stronie szczegółów produktu. Możesz zbudować taką galerię z funkcjami takimi jak zoom, zobacz następne lub poprzednie zdjęcie.

Kalkulator

To jest pierwszy projekt, który ćwiczyłem podczas nauki JavaScriptu.

Jest wystarczająco prosty, abyś zrozumiał, jak pracować z JavaScript, HTML i CSS do pewnego stopnia.

Możesz zacząć od kilku prostych operatorów, takich jak dodawanie, odejmowanie, mnożenie i dzielenie. Następnie uczyń swój kalkulator bardziej profesjonalnym poprzez dodanie kilku złożonych funkcji.

Lista rzeczy do zrobienia

Zamiast korzystać z innych aplikacji do tworzenia list rzeczy do zrobienia, dlaczego nie stworzyć takiej dla siebie?

Podstawowe funkcje listy rzeczy do zrobienia obejmują dodawanie, usuwanie, edytowanie i sprawdzanie pozycji. Aby mieć więcej zabawy, możesz dodać animacje, takie jak powolne uderzanie elementu, gdy go ukończysz.

Walidacja formularzy

Uzyskujemy formularz składający się głównie z trzech elementów – nazwy użytkownika, hasła oraz przycisku logowania.

Użytkownicy muszą wpisać nazwę użytkownika i hasło, a następnie kliknąć przycisk logowania. Twoim zadaniem jest sprawdzenie poprawności nazwy użytkownika i hasła po kliknięciu przycisku. Jeśli dane są prawidłowe, to przyznanie użytkownikom uprawnień do dostępu do kolejnego kroku.

Zegar

Jaki rodzaj zegara lubisz? Analogowy czy cyfrowy? Możesz stworzyć oba za pomocą JavaScript, HTML i CSS. Aby nadać mu fajny wygląd, dodaj kilka płynnych animacji.

Cytaty motywacyjne

Za każdym razem, gdy siadasz przy biurku, włączasz komputer, otwierasz przeglądarkę, widzisz cytat motywacyjny, który zainspiruje Cię na cały dzień pracy.

Możesz stworzyć taką aplikację poprzez zbudowanie rozszerzenia do Chrome.

Instrumenty muzyczne

Kochasz grać muzykę. Dlaczego nie zbudować samemu instrumentu? Może to być pianino, gitara, albo zestaw perkusyjny?

Możesz symulować każdy klawisz na klawiaturze, aby był dźwiękiem instrumentu, który chcesz zbudować.

Zaufaj mi. To niesamowita zabawa!

Progres Bar

Ten pasek postępu będzie wyświetlany, gdy użytkownicy będą oczekiwać na załadowanie danych.

Możesz zrobić z niego prostą animację lub złożoną z kilkoma fantastycznymi efektami, takimi jak zmiana kolorów.

Konwertery

Ilu rodzajów konwerterów używasz?

Dla mnie są to: doc do pdf, mp4 do mp3, png do jpeg, konwerter jednostek itp.

Zbudujmy teraz własny konwerter.

Uwaga

Ten służy do robienia notatek i zapisywania swoich pomysłów tak szybko, jak to możliwe.

Dla prostej wersji, po prostu pozwól użytkownikom na tworzenie, edytowanie i usuwanie notatek.

Aby uczynić ją bardziej interesującą, dodajmy funkcję dającą możliwość formatowania notatek, jak zmiana koloru tekstu, wyświetlanie formatu HTML/Markdown, itp.

Quiz

Czy znasz program „Kto jest milionerem?” show. Pod względem technicznym to nic innego jak aplikacja quizowa.

Użytkownicy rozpoczynają dowolne quizy dotyczące dowolnych dziedzin. Następnie widzą pytanie z 4 (może być więcej lub mniej) opcjami do wyboru. Po wybraniu jednej z nich i przesłaniu, zobaczą kolejne pytanie. Użytkownicy odpowiadają na nie aż do ostatniego pytania.

Na ekranie wyników, zobaczą ile punktów osiągnęli i na ile pytań nie udało im się odpowiedzieć.

Wnioski

Powtarzam, praktyka czyni mistrza. Z wszystkimi powyższymi pomysłami, są szanse, że możesz wyostrzyć swoje umiejętności JavaScript.

Mam nadzieję, że uważasz to za przydatne!