104 lines
3.9 KiB
HTML
104 lines
3.9 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 12: Mit prompt das Lieblingsessen erfragen</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 my-3">
|
|
<h1>Übung 12: Mit prompt das Lieblingsessen erfragen</h1>
|
|
|
|
<ol>
|
|
<li>
|
|
Fragen Sie den Benutzer nach seinem Lieblingsessen und seinem Lieblingsgetränk und speichern Sie beides in
|
|
passend benannte Variablen.
|
|
</li>
|
|
<li>
|
|
Verwenden Sie beide Variablen in einem Satz, den Sie über die Konsole ausgeben. Verketten Sie dabei die
|
|
Variablen mithilfe des Verkettungsoperators mit den restlichen Satzteilen .
|
|
</li>
|
|
<li>
|
|
Führen Sie die letzte Übung noch einmal durch, aber verwenden Sie dieses Mal Template String
|
|
Substitutions.
|
|
</li>
|
|
<li>
|
|
Wenn Sie ganz fleißig sind, können Sie als dritte Variante noch austesten, wie sich beide Varianten in der
|
|
gleichen Ausgabe verwenden lassen.
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<form name="userFavs">
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="userMeal" id="userMeal" />
|
|
<label for="userMeal">Lieblingsessen</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" name="userDrink" id="userDrink" />
|
|
<label for="userDrink">Lieblingsgetränk</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-4 text-center">
|
|
<button type="submit" class="btn btn-primary">Bestellen</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="alert alert-success my-3 output-a invisible"></div>
|
|
<div class="alert alert-danger my-3 output-b invisible"></div>
|
|
<div class="alert alert-warning my-3 output-c invisible"></div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
'use strict';
|
|
|
|
const outputAEl = document.querySelector('.output-a');
|
|
const outputBEl = document.querySelector('.output-b');
|
|
const outputCEl = document.querySelector('.output-c');
|
|
|
|
const userForm = document.forms.userFavs;
|
|
|
|
userForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
|
|
const favMeal = userForm.userMeal.value;
|
|
const favDrink = userForm.userDrink.value;
|
|
|
|
if (favMeal === '' || favDrink === '') {
|
|
return;
|
|
}
|
|
|
|
outputAEl.classList.remove('invisible');
|
|
outputBEl.classList.remove('invisible');
|
|
outputCEl.classList.remove('invisible');
|
|
|
|
outputAEl.innerText =
|
|
'Salut User. Dein Lieblingsmahl ist also ' +
|
|
favMeal +
|
|
'? Und ' +
|
|
favDrink +
|
|
' dein Lieblingsgetränk? ... Hm, naja, jedem das Seine...';
|
|
|
|
outputBEl.innerText = `User 1234 wurde mit Lieblingsspeise ${favMeal} und Lieblingsgedränk ${favDrink} registiert. Sie werden jetzt zum Bezahlungsprozess weitergeführt. Die Ausgabe der gewünschten Speisen ist optional und nicht garantiert. Einen schönen Tag noch! Beep`;
|
|
|
|
outputCEl.innerText =
|
|
`Mein Lieblingsmahl ist ${favMeal} und mein Lieblingsgetränk ist ` +
|
|
favDrink +
|
|
` und es ist mir scheißegal was ihr darüber denkt!!!111`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|