64 lines
2.4 KiB
HTML
64 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Übung 23: Von guten und bösen Eingaben</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="container py-5">
|
|
<div class="alert alert-primary">
|
|
<h2>Übung 23: Von guten und bösen Eingaben</h2>
|
|
<ol class="list">
|
|
<li>
|
|
Nimm Angaben zu Vorname, Nachname, Alter und dem liebsten Heißgetränk eines Anwenders entgegen und
|
|
speichere diese in Variablen.
|
|
</li>
|
|
<li>
|
|
Diese Eingaben sollst du nun folgendermaßen validieren:
|
|
<ul class="list">
|
|
<li>Vorname und Nachname müssen zwischen 2 und 100 Zeichen lang sein.</li>
|
|
<li>Das Alter muss eine Zahl unter 150 sein.</li>
|
|
<li>Die Eingabe für das Getränk muss c (coffee) oder t (tea) sein.</li>
|
|
</ul>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
<div class="output alert alert-secondary my-3"></div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
'use strict';
|
|
const outputEl = document.querySelector('.output');
|
|
// Aufgabe
|
|
const firstName = prompt('Wilkommen. Wie heißen Sie mit Vornamen?');
|
|
const lastName = prompt('Und mit Nachnamen??');
|
|
const age = Number(prompt('Geben Sie ihr Alter an:'));
|
|
const favoriteHotDrink = prompt('Und was ist ihr liebstes Heißgetränk??? (k (Kaffee) | t (Tee)').toLowerCase();
|
|
|
|
let errorMsg = '';
|
|
|
|
if (firstName.length < 2 || firstName.length > 100) {
|
|
errorMsg += 'Der Vorname muss zwischen 2 und 100 Zeichen lang sein!\n';
|
|
}
|
|
if (lastName.length < 2 || lastName.length > 100) {
|
|
errorMsg += 'Der Nachname muss zwischen 2 und 100 Zeichen lang sein!\n';
|
|
}
|
|
if (age >= 150 || age <= 0) {
|
|
errorMsg += 'Das Alter muss unter 150 liegen und über 0 liegen\n';
|
|
}
|
|
if (favoriteHotDrink !== 'k' && favoriteHotDrink !== 't') {
|
|
errorMsg += 'Bitte Kaffee mit k und Tee mit t eingeben!\n';
|
|
}
|
|
|
|
if (errorMsg === '') {
|
|
outputEl.textContent = '<p>Alle Eingaben sind korrekt!</p>';
|
|
} else {
|
|
outputEl.innerHTML = errorMsg.replaceAll('\n', '<br />');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|