Meine Web-Experimente
Hier sind ein paar Projekte, die ich erstellt habe, um die Grundlagen von HTML, CSS und JavaScript zu vertiefen. Jedes Experiment zeigt, dass ich neue Konzepte verstehe und in der Lage bin, sie anzuwenden.
1. Bild-Editor Pro
2. Einfacher Zeichenzähler
Zeichen: 0 / 140
3. Gradienten-Mixer
4. Animations-Showcase
So habe ich das gemacht
Jedes dieser Projekte ist ein Ergebnis des Lernens aus Online-Tutorials, die ich in eigene, funktionierende Anwendungen umgewandelt habe. Ich habe dabei das Zusammenspiel von HTML, CSS und JavaScript vertieft.
1. Der Bild-Editor
Dieses Projekt demonstriert die dynamische Bildbearbeitung im Browser. Das Herzstück bildet die CSS filter-Eigenschaft, deren Werte in Echtzeit über JavaScript manipuliert werden. Ich habe Event-Listener auf den input-Elementen der Range-Slider implementiert, um jede Wertänderung sofort in den entsprechenden CSS-Filter-String zu übersetzen. Die gleichzeitige Anzeige der Prozentwerte bietet direktes, numerisches Feedback. Dies ermöglicht eine sofortige visuelle Rückmeldung ohne serverseitige Verarbeitung. Ein separater Button setzt alle Filterwerte programmatisch auf ihre Initialzustände zurück.
2. Der Zeichenzähler
Dieser einfache Zeichenzähler veranschaulicht die Nutzung von DOM-Events und der Manipulation von Elementklassen. Ein input-Event-Listener überwacht das Textfeld, zählt die Zeichen in Echtzeit und aktualisiert die Anzeige. Basierend auf logischen Abfragen wird die Schriftfarbe dynamisch angepasst: eine einfache if/else if/else-Struktur fügt die entsprechenden CSS-Klassen (counter-warn, counter-limit, etc.) hinzu, um dem Nutzer sofortiges visuelles Feedback zu geben.
3. Der Gradienten-Mixer
Der Gradienten-Mixer zeigt die Erstellung und dynamische Anpassung von Farbverläufen. Zwei input type="color"-Elemente geben die Farbwerte vor. Ein JavaScript-Skript liest diese Werte aus und generiert den linear-gradient()-CSS-Befehl, um den Hintergrund des Vorschau-Elements zu aktualisieren. Die Integration von transition in CSS sorgt für einen fließenden Übergang zwischen den Farbänderungen und verbessert die User Experience.
4. Das Animations-Showcase
Dieses Showcase präsentiert die Implementierung von CSS-basierten Animationen. Jede Animation (pulse, flash, wobble) wurde mit @keyframes definiert. Durch das Hinzufügen und sofortige Entfernen der zugehörigen CSS-Klasse mittels JavaScript wird der Browser gezwungen, die Animation neu zu rendern und von vorne zu starten. Dies demonstriert ein effektives Zusammenspiel von JavaScript zur Steuerung von Klassen und CSS zur Definition komplexer Bewegungsabläufe.