F\u00fcr meine Abschlusspr\u00fcfung zum Mediengestalter Digital und Print (Schwerpunkt Frontend-Entwicklung) im Sommer 2025 habe ich eine Web-App f\u00fcr ein fiktives Gartencenter konzipiert und realisiert. Die App sollte ausschlie\u00dflich auf Tablets laufen und als digitaler Info-Point im Laden dienen. Dabei umfasst die App die Entstehungsgeschichte des Gartencenters, aktuelle Angebote, eine Newsletter-Anmeldung sowie als Highlight einen dynamischen Gutscheingenerator. W\u00e4hrend mit die technische Umsetzung (Note: 1) keine besonderen Schwierigkeiten bereitete, lag die eigentliche Herausforderung f\u00fcr mich eher im UI-Design (Konzept-Note: 2), da ich mich im Code einfach sicherer f\u00fchle als in UI-Gestaltung.<\/p>\n\n\n\n
Technische Highlights<\/h2>\n\n\n\n
\n
Echtzeit-Gutscheingenerator: Eingabe von Name und Betrag werden via JavaScript verz\u00f6gerungsfrei live auf das gew\u00e4hlte Gutschein-Motiv gerendert.<\/li>\n\n\n\n
Skalierbares Routing & Event Delegation: Ein zentraler Event-Listener auf dem App-Container f\u00e4ngt Klicks \u00fcber HTML5 data-* Attribute ab, f\u00e4ngt verschachtelte Kind-Elemente (wie Icons) per .closest() ab und steuert die Page-Transitions<\/li>\n\n\n\n
Clientseitige Validierung: Dynamische Pr\u00fcfung von Mail, Postleitzahl und komplexen Hausnummern-Kombinationen (RegEx) vor dem Absenden.<\/li>\n<\/ul>\n\n\n\n
Roadmap<\/h2>\n\n\n\n
\n
Refactoring von JavaScript-Strukturen und Behebung von fehlerhaften Event-Listenern<\/li>\n\n\n\n
Umstellung des Layouts von starren CSS-Vorgaben auf ein vollresponsives CSS Grid \/ Flexbox-System<\/li>\n<\/ul>\n\n\n\n
![\"\"](\"http:\/\/my-vps.net\/wp-content\/uploads\/2026\/07\/PG2-1024x486.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/my-vps.net\/wp-content\/uploads\/2026\/07\/PG3-1024x486.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/my-vps.net\/wp-content\/uploads\/2026\/07\/PG1-1024x486.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"