135 lines
4.3 KiB
JavaScript
135 lines
4.3 KiB
JavaScript
// ===== 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();
|