📱 Kontakt Manager - Schnupperlehre

Modernes Programmier-Projekt für angehende Applikationsentwickler EFZ

Eine vollständige CRUD-Webanwendung mit HTML, CSS und JavaScript - perfekt für den Einstieg in die Webentwicklung!

🎯 Was du heute baust

Eine professionelle Kontakt-Verwaltung mit:

• ✨ Modernem Design mit Glasmorphism-Effekten
• 📱 Vollständig responsive (funktioniert auf Handy & Desktop)
• 🔍 Live-Suche durch alle Kontakte
• 💾 Dauerhafte Speicherung im Browser
• ⚡ Alle CRUD-Funktionen (Create, Read, Update, Delete)

🚀 Schnellstart

1. Repository forken

Klicke oben rechts auf "Fork" um deine eigene Kopie zu erstellen.

2. Code herunterladen

# Option A: ZIP herunterladen
Klicke "Code" → "Download ZIP" → Entpacken

# Option B: Git Clone
git clone https://github.com/[dein-username]/kontakt-manager-schnupperlehre.git

3. App starten

• Öffne index.html in deinem Browser
• Drücke F12 → Console Tab für Debugging
• Folge den TODO-Anleitungen in script.js

📚 Lernziele

Nach 4 Stunden kannst du:

• HTML-Struktur verstehen und anpassen
• CSS-Styling mit modernen Techniken (Grid, Flexbox, Animations)
• JavaScript DOM-Manipulation für interaktive Webseiten
• Event-Handling für Buttons und Formulare
• localStorage für dauerhafte Datenspeicherung
• CRUD-Operationen implementieren
• Debugging mit Browser Developer Tools

🛠️ Technologien

• HTML5 - Semantische Struktur
• CSS3 - Modernes Styling mit:
  • CSS Grid & Flexbox
  • Custom Properties
  • Animations & Transitions
  • Glasmorphism Design
  • Mobile-First Responsive Design
• Vanilla JavaScript ES6+ - Keine Frameworks!
  • Array Methods (forEach, filter, find)
  • Template Literals
  • LocalStorage API
  • Event Delegation
  • Async/Await Ready

📋 TODOs & Struktur

Das Projekt ist in 10 aufeinander aufbauende TODOs strukturiert:

⭐ Einfach

1. Kontakte laden - localStorage & JSON
2. Kontakte speichern - Persistierung
3. Anzahl anzeigen - UI Updates

⭐⭐ Medium

4. Kontakte anzeigen - DOM Manipulation
5. Kontakt erstellen - Form Handling
6. Kontakt aktualisieren - Edit Funktionalität
7. Kontakt löschen - Delete mit Confirmation

⭐⭐⭐ Fortgeschritten

8. Form Submit Event - Event Prevention
9. Live-Suche - Real-time Filtering

⭐⭐⭐⭐ Profi

10. Edit/Delete Buttons - Event Delegation (schwierigste Aufgabe!)

🏆 Bonus-Features

Für schnelle Lerner:

• Sortierung nach Name/Email
• Export/Import als JSON
• Kategorien mit Dropdown-Filter
• Dark Mode Toggle
• Email-Validation
• Keyboard Shortcuts

🐛 Debugging-Tipps

// Häufige Debugging-Commands
console.log("Variable:", meineVariable);
console.log("Array Länge:", contacts.length);
console.log("Element gefunden:", document.getElementById('myId'));

// In Browser Console:
// Alle Kontakte anzeigen: contacts
// LocalStorage prüfen: localStorage.getItem('contacts')

📁 Datei-Struktur

kontakt-manager-schnupperlehre/
├── index.html          # HTML-Struktur
├── style.css           # Modernes CSS-Design
├── script.js           # JavaScript mit TODOs
└── README.md           # Diese Datei

🎓 Nach der Schnupperlehre

Weiterlernen:

• Erweitere die App mit neuen Features
• Lerne moderne JavaScript Frameworks (React, Vue)
• Verbinde mit echter Datenbank (Node.js + MongoDB)
• Deploye deine App online (Netlify, Vercel, GitHub Pages)

Ressourcen:

• MDN Web Docs - Beste JavaScript Referenz
• JavaScript.info - Umfassendes Tutorial
• CSS-Tricks - CSS Tipps & Tricks

🤝 Beitragen

Hast du eine coole Idee für ein Feature oder einen Bug gefunden?

• Erstelle ein Issue
• Fork → Änderungen → Pull Request
• Feedback ist immer willkommen!

📄 Lizenz

MIT License - verwende den Code frei für deine Projekte!

---

🚀 Viel Erfolg beim Programmieren deiner ersten Webanwendung!

Built with ❤️ für angehende Entwickler