Initial commit

app.js

@@ -0,0 +1,134 @@
+// ===== STRING-METHODEN BEISPIELE IN DIESER APP =====
+// 
+// 1. trim() – Whitespace entfernen (in parseAmount)
+// 2. replace() – Komma durch Punkt ersetzen (in parseAmount)
+// 3. toLowerCase() – String zu Kleinbuchstaben (in showMessage)
+// 4. length – Zeichenanzahl prüfen (in transferBtn.addEventListener)
+// 5. concat() und toUpperCase() – können Sie in der HTML erweitern
+//
+// ===== WEITERE STRING-METHODEN =====
+// indexOf(), lastIndexOf() – Position eines Substrings finden
+// slice(), substring() – Teile eines Strings extrahieren
+// charAt() – einzelnes Zeichen an Position
+// search() – mit Regex suchen
+//
+// Siehe: STRING_METHODS_NOTES.md für detaillierte Dokumentation
+
+const STORAGE_KEY = 'konto_balance_v1';
+const INITIAL_BALANCE = 1000.00; // Anfangswert beliebig
+
+const balanceDisplay = document.getElementById('balanceDisplay');
+const amountInput = document.getElementById('amountInput');
+const transferBtn = document.getElementById('transferBtn');
+const messageDiv = document.getElementById('message');
+
+function readStoredBalance(){
+  const raw = localStorage.getItem(STORAGE_KEY);
+  if(raw === null){
+    localStorage.setItem(STORAGE_KEY, INITIAL_BALANCE.toString());
+    return INITIAL_BALANCE;
+  }
+  const n = parseFloat(raw);
+  return Number.isFinite(n) ? n : INITIAL_BALANCE;
+}
+
+function writeStoredBalance(value){
+  localStorage.setItem(STORAGE_KEY, value.toString());
+}
+
+function formatCurrency(num){
+  return num.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
+}
+
+function showMessage(text, type){
+  messageDiv.textContent = text || '';
+  
+  // ===== STRING-METHODEN: toLowerCase() =====
+  // toLowerCase() – wandelt String in Kleinbuchstaben um
+  // Praktisch: Konsistente Vergleiche unabhängig von Groß-/Kleinschreibung
+  // Beispiel: "ERROR".toLowerCase() → "error"
+  const normalizedType = (type || '').toLowerCase();
+  
+  messageDiv.className = '';
+  if(normalizedType === 'error') messageDiv.classList.add('msg-error');
+  if(normalizedType === 'warning') messageDiv.classList.add('msg-warning');
+  if(normalizedType === 'success') messageDiv.classList.add('msg-success');
+}
+
+function updateDisplay(){
+  const bal = readStoredBalance();
+  balanceDisplay.textContent = formatCurrency(bal);
+  if(bal < 0){
+    balanceDisplay.classList.add('negative');
+  } else {
+    balanceDisplay.classList.remove('negative');
+  }
+}
+
+function parseAmount(input){
+  if(!input) return NaN;
+  
+  // ===== STRING-METHODEN IN AKTION =====
+  
+  // 1. trim() – entfernt äußere Whitespaces (Leerzeichen, Tabs, etc.)
+  //    Praktisch: Benutzereingaben bereinigen
+  //    Beispiel: "  123.45  ".trim() → "123.45"
+  const trimmed = input.trim();
+  
+  // 2. replace() – ersetzt Zeichen oder Substring
+  //    Akzeptiere sowohl Komma als auch Punkt als Dezimaltrenner
+  //    replace(searchValue, replaceValue) – ersetzt ERSTES Vorkommen
+  //    Beispiel: "123,45".replace(',', '.') → "123.45"
+  const normalized = trimmed.replace(',', '.');
+  
+  // Alternative: replace() mit Regex und "g" Flag für alle Vorkommen
+  // const normalized = trimmed.replace(/,/g, '.');
+  
+  return parseFloat(normalized);
+}
+
+transferBtn.addEventListener('click', ()=>{
+  showMessage('', null);
+  const raw = amountInput.value;
+  
+  // ===== STRING-METHODEN: length und indexOf() =====
+  // length – gibt die Anzahl der Zeichen zurück (Eigenschaft, keine Methode!)
+  // Beispiel: "Hallo".length → 5
+  // Praktisch: Prüfe ob Eingabe nicht leer ist
+  if(raw.length === 0){
+    showMessage('Bitte geben Sie einen Betrag ein.', 'error');
+    return;
+  }
+  
+  const amount = parseAmount(raw);
+
+  if(!Number.isFinite(amount) || amount <= 0){
+    showMessage('Bitte geben Sie einen gültigen Betrag größer als 0 ein.', 'error');
+    return;
+  }
+
+  if(amount > 2000){
+    showMessage('Über 2000 € können nicht überwiesen werden. Vorgang abgebrochen.', 'error');
+    return;
+  }
+
+  const current = readStoredBalance();
+  const newBalance = +(current - amount).toFixed(2);
+
+  if(newBalance < 0){
+    showMessage('Achtung Konto überzogen', 'warning');
+  } else {
+    showMessage('Überweisung erfolgreich.', 'success');
+  }
+
+  writeStoredBalance(newBalance);
+  updateDisplay();
+
+  // ===== STRING-METHODEN: Eingabefeld leeren =====
+  // Setze den Wert auf einen leeren String ''
+  // Beispiel: input.value = ''
+  amountInput.value = '';
+  amountInput.focus();
+});
+
+updateDisplay();