13 JavaScript-Projektideen für Anfänger, um Ihre Programmierfähigkeiten zu schärfen
Theorien sind langweilig.
Wenn es darum geht, neue Fähigkeiten zu lernen, bevorzuge ich den praktischen Teil.
Natürlich brauchen Sie die Theorie, bevor Sie üben können. Aber verbringen Sie nicht Ihre ganze Zeit mit einer Theorie und dann mit einer anderen. Sie werden das alles sicher wieder vergessen.
Nachfolgend finden Sie 13 JavaScript-Projektideen für Anfänger, mit denen Sie das Beste aus Ihrem Lernprozess machen können.
Ich finde es immer spannend, Spiele zu entwickeln. Das Memory-Kartenspiel ist eines davon.
Sie kennen die Regel, richtig? Die Karten liegen verdeckt auf einem Brett. Wenn man zwei Karten anklickt, behält man sie, wenn sie übereinstimmen, sonst werden sie wieder umgedreht. Man spielt so lange, bis man alle Karten gesammelt hat.
Popup
Das Popup wie das alert() oder prompt() hat Grenzen. Sie sind einfach. Ihre Projekte benötigen immer mehr Funktionen, wie z. B. mehr anzuzeigende Felder, die Handhabung komplexer Aktionen oder ein ausgefeiltes UI.
So, lassen Sie uns eines bauen.
Fotogalerie
Jede eCommerce-Website hat eine Fotogalerie auf der Produktdetailseite. Sie können eine solche mit Funktionen wie Zoom, nächstes oder vorheriges Foto anzeigen erstellen.
Kalkulator
Dies ist das erste Projekt, das ich geübt habe, als ich JavaScript gelernt habe.
Es ist einfach genug, um zu verstehen, wie man mit JavaScript, HTML und CSS bis zu einem gewissen Grad arbeitet.
Sie können mit einigen einfachen Operatoren wie Addieren, Subtrahieren, Multiplizieren und Dividieren beginnen. Dann machen Sie Ihren Taschenrechner professioneller, indem Sie einige komplexe Funktionen hinzufügen.
Todo-Liste
Anstatt andere ToDo-Listen-Apps zu verwenden, warum nicht eine für sich selbst erstellen?
Zu den Grundfunktionen einer ToDo-Liste gehört das Hinzufügen, Entfernen, Bearbeiten und Abhaken eines Eintrags. Um mehr Spaß zu haben, können Sie Animationen hinzufügen, z. B. ein Element langsam streichen, wenn Sie es abschließen.
Formularüberprüfung
Sie erhalten ein Formular, das hauptsächlich aus drei Elementen besteht – Benutzername, Passwort und Anmeldeschaltfläche.
Der Benutzer muss seinen Benutzernamen und sein Passwort eingeben und dann auf die Schaltfläche „Login“ klicken. Ihre Aufgabe ist es, den Benutzernamen und das Passwort nach dem Klicken auf die Schaltfläche zu überprüfen. Wenn die Daten gültig sind, erteilen Sie dem Benutzer die Erlaubnis, auf den nächsten Schritt zuzugreifen.
Uhr
Welche Art von Uhr mögen Sie? Analog oder digital? Sie können beides mit JavaScript, HTML und CSS erstellen. Um es cool zu machen, fügen Sie einige sanfte Animationen hinzu.
Motivierende Zitate
Jedes Mal, wenn Sie an Ihrem Schreibtisch sitzen, den Computer einschalten, einen Browser öffnen, sehen Sie ein motivierendes Zitat, das Sie für einen ganzen Arbeitstag inspiriert.
Diese Anwendung können Sie mit einer Chrome-Erweiterung realisieren.
Musikinstrumente
Liebe zum Musizieren. Warum nicht selbst ein Instrument bauen? Es könnte ein Klavier, eine Gitarre oder ein Schlagzeug sein?
Sie können jede Taste auf Ihrem Keyboard so simulieren, dass sie den Klang des Instruments darstellt, das Sie bauen möchten.
Vertrauen Sie mir. Es macht extrem viel Spaß!
Fortschrittsbalken
Dieser Fortschrittsbalken wird angezeigt, wenn Benutzer darauf warten, dass Daten geladen werden.
Sie können daraus eine einfache Animation machen oder eine komplexe mit einigen fantastischen Effekten wie wechselnden Farben.
Wandler
Wie viele Arten von Konvertern verwenden Sie?
Für mich sind das z.B. doc zu pdf, mp4 zu mp3, png zu jpeg oder ein Einheiten-Konverter usw.
Jetzt wollen wir einen eigenen Konverter bauen.
Hinweis
Dies ist dafür da, um sich Notizen zu machen und seine Ideen so schnell wie möglich aufzuschreiben.
Für eine einfache Version reicht es aus, dem Benutzer das Erstellen, Bearbeiten und Löschen einer Notiz zu ermöglichen.
Um es interessanter zu machen, fügen wir eine Funktion hinzu, die die Möglichkeit bietet, Notizen zu formatieren, wie z.B. die Textfarbe zu ändern, das HTML/Markdown-Format anzuzeigen, usw.
Quiz
Kennen Sie die „Wer ist Millionär?“ zeigen. Technisch gesehen ist es nichts anderes als eine Quiz-Applikation.
Die Benutzer starten ein Quiz über beliebige Bereiche. Dann sehen sie eine Frage mit 4 (kann mehr oder weniger sein) Optionen, aus denen sie auswählen können. Nachdem sie eine ausgewählt und abgeschickt haben, sehen sie eine weitere Frage. Die Benutzer beantworten die Fragen bis zur letzten Frage.
Auf dem Ergebnisbildschirm sehen sie, wie viele Punkte sie erreicht haben und wie viele Fragen sie nicht beantworten konnten.
Fazit
Auch hier gilt: Übung macht den Meister. Mit all den oben genannten Ideen können Sie Ihre JavaScript-Fähigkeiten schärfen.
Hoffentlich finden Sie es nützlich!