52 lines
2.0 KiB
HTML
52 lines
2.0 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">
|
|
<h2>Übung 12: Mit prompt das Lieblingsessen erfragen</h2>
|
|
|
|
<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>
|
|
|
|
<div class="alert alert-success my-3 output-a"></div>
|
|
<div class="alert alert-danger my-3 output-b"></div>
|
|
<div class="alert alert-warning my-3 output-c"></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 favoriteFood = prompt('Dein Lieblingsessen ist..?');
|
|
const favoriteDrink = prompt('Dein favorisiertes Getränk ist..?');
|
|
</script>
|
|
</body>
|
|
</html>
|