This commit is contained in:
Philippe Torrel
2026-09-14 14:46:34 +02:00
parent d71f368a3f
commit 3c1f40ac1f
13 changed files with 531 additions and 3 deletions
@@ -0,0 +1,97 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung optional 01: Kontaktformular</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 optional 01: Kontaktformular</h2>
<p>
Erweitere das bestehende Kontaktformular mithilfe von Bootstrap-Komponenten um persönliche Angaben (Anrede
per Radio-Buttons) sowie eine strukturierte Adressabfrage (Straße, Hausnummer, PLZ, Ort und Länderauswahl).
Achte dabei auf ein responsives Grid-Layout und eine semantisch korrekte Verknüpfung von Labels und
Eingabefeldern (for und id).
</p>
</div>
<div class="container py-5">
<h1>Kontakt</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
<form class="form-contact">
<div class="row">
<!-- .col>.mb-3>label.form-label -->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-firstname" class="form-label">First name:</label>
<input
type="text"
name="firstname"
id="input-firstname"
class="form-control input-firstname"
required />
</div>
</div>
<!-- ▲ /col ▲ -->
<!-- .col>.mb-3>label.form-label -->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-lastname" class="form-label">Last name:</label>
<input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
</div>
</div>
<!-- ▲ /col ▲ -->
</div>
<!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-email" class="form-label">E-mail</label>
<input type="email" name="email" id="input-email" class="form-control input-email" required />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-subject" class="form-label">Subject</label>
<input type="text" name="subject" id="input-subject" class="form-control input-subject" />
</div>
</div>
</div>
<!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="textarea-message" class="form-label">Message</label>
<textarea
name="message"
id="textarea-message"
cols="12"
rows="8"
class="form-control textarea-message"></textarea>
</div>
</div>
</div>
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
<div class="row">
<div class="col">
<div class="mb-3">
<button type="submit" class="btn btn-dark button-submit">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>
+106
View File
@@ -0,0 +1,106 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 19 und 20: Die dunkle Seite von JavaScript</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 19: Die dunkle Seite von JavaScript</h2>
<p>
Programmieren Sie nun Stück für Stück ein kleines Quiz, in dem ein Spieler Fragen zu JS beantworten muss und
damit gegen Fehler und schlechten Code — also die dunkle Seite von JS — antritt. Möge der Source mit Ihnen
sein.
</p>
<ol class="list">
<li>
<p>
Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und
begrüßen ihn mittels einer Alert-Box. Ergänzen Sie den folgenden Code:
</p>
<pre>
<code> 'use strict'; let username = … alert(…); </code></pre>
</li>
<li>
<p>
Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript
anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben. Die Antwort speichern Sie
in einer neuen Variable und erstellen als Nächstes eine
<code>if</code>-Verzweigung. Der Rumpf des <code>if</code> soll nur ausgewertet werden, wenn der Spieler
bestätigt, dass er sich stark genug fühlt, das Spiel zu beginnen. In den Rumpf schreiben wir ein
<code>alert</code>, das den Spielstart bestätigt und den Spieler anfeuert.
</p>
<p>
Für den Fall, dass der Spieler zu feige ist und einen mangelnden Fitness-Grad angegeben hat, schreiben
Sie eine weitere
<code>if</code>-Verzweigung, die den Fall abfängt und den Spieler mit Schimpf und Schande verabschiedet.
Natürlich dürfen Sie auch freundlich bleiben — ganz wie Sie mögen.
</p>
<blockquote>
<strong>Tipp:</strong> Schon während Sie das Programm entwickeln, sollten Sie es immer wieder testen.
Führen Sie nach jeder Änderung das Programm erneut aus!
</blockquote>
</li>
<li>
<p>
Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe. Deklarieren Sie nach dem alert
eine neue Variable, in der Sie die Antwort des Spielers zu folgender Frage speichern:<br />
<code>»Which Operator has the higher priority: * or + ?«</code>
</p>
<p>
Um auf die Antwort reagieren zu können, schreiben Sie eine weitere
<code>if</code>-Verzweigung, deren Rumpf nur ausgewertet wird, wenn die Antwort stimmt.
</p>
<p>
<code>alert</code> gratuliert hier zur korrekten Antwort. Wenn Sie mögen, können Sie noch weitere
Verzweigungen mit Fragen einbauen.
</p>
</li>
<li>
<p>
Fügen Sie ein weiteres <code>if</code> für die Variante ein, in der der Spieler eine falsche Antwort
gibt.
</p>
</li>
</ol>
</div>
<div class="alert alert-primary">
<h2>Übung 20: Die dunkle Seite von JavaScript</h2>
<p>
Für Ihr Spiel ist else ebenfalls hilfreich. Zum Beispiel bei der Frage, ob der Spieler bereit zum Spielen
ist. Statt hier ein zweites
<code>if</code> einzubauen, können Sie <code>else</code> verwenden.
</p>
<p>Ersetzen Sie die <code>if</code>-Anweisungen an den richtigen Stellen durch ein <code>else</code>:</p>
</div>
<div class="alert alert-primary">
<h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
<p>
Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
»Kampf-Sequenzen«:
</p>
<ul class="list">
<li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
<li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
</ul>
</div>
</div>
</main>
<script>
'use strict';
const QUESTION_1 = 'Which Operators has the higher priority: * or + ?';
const SOLUTION_1 = '*';
// 1.Als ersten Schritt fragen Sie den Spieler nach seinem Namen, speichern diesen in eine Variable und begrüßen ihn mittels einer Alert-Box.
// 2.Stellen Sie dem Spieler die Frage, ob er sich fit genug fühlt, um gegen das dunkle JavaScript anzutreten. Es ist sinnvoll, bei der Frage die Antwortmöglichkeiten anzugeben.
// 3.Nun kann es losgehen. Stellen Sie den Spieler vor seine erste Aufgabe.
</script>
</body>
</html>
@@ -0,0 +1,44 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 21: Die Sache mit dem Schaltjahr</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 21: Die Sache mit dem Schaltjahr</h2>
<p>
Vielleicht gehören Sie zu den Menschen, die »die Sache mit dem Schaltjahr« spannend finden. Und falls Sie es
nicht spannend finden, schreiben Sie einfach trotzdem ein Programm, das berechnet, ob es sich bei einem Jahr
um ein Schaltjahr handelt.
</p>
<p>Fragen Sie den Anwender nach dem gewünschten Jahr und speichern Sie die Eingabe in einer Variable.</p>
<p>
Falls das betreffende Jahr ein Schaltjahr ist, soll die Konsole z.B. den Satz »0000 ist ein Schaltjahr!«
ausgeben; ansonsten »0000 ist KEIN Schaltjahr« — mit dem eingegeben Jahr statt 0000.
</p>
<h4>Ein Jahr ist ein Schaltjahr, wenn das betreffende Jahr</h4>
<ul>
<li>ganzzahlig durch 400 teilbar ist.</li>
<li>nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist.</li>
</ul>
<div class="alert alert-warning">
Die Berechnung ist übrigens nicht zu 100 Prozent genau, aber für die nächsten 2000 Jahre passt es noch.
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</div>
</main>
<script>
'use strict';
const year = Number(prompt('please enter year:'));
const outputEl = document.querySelector('.output');
</script>
</body>
</html>
Binary file not shown.
@@ -0,0 +1,37 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>if - Verzweigung</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">
<h1>if - Verzweigung</h1>
<p>
<code>if (BEDINGUNG) { /* ANWEISUNGEN */ }</code>
</p>
</div>
</main>
<script>
'use strict';
const SOLUTION = 42;
// prefer-const
const answer = Number(prompt("What's the result of 6 * 7"));
if (answer === SOLUTION) {
console.log('42 is correct.');
console.log('Congratulations, You are a genius!');
}
// Bei nur einer Anweisung können die {}- Klammern weggelassen werden.
if (answer === SOLUTION) console.log('42 is correct.');
console.log('weiter im code...');
</script>
</body>
</html>
@@ -0,0 +1,35 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>if - Verzweigung</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">
<h1>if - Verzweigung</h1>
<p>
<code>if (BEDINGUNG) { /* ANWEISUNGEN */ }</code>
</p>
</div>
</main>
<script>
'use strict';
const DISCOUNT = 0.05;
const quantityOfCartItem = Number(prompt('Quantity of the item?'));
const pricePerItem = 20; // just to simulate the real price here
let totalPrice = quantityOfCartItem * pricePerItem;
if (quantityOfCartItem >= 3) {
totalPrice = totalPrice * (1 - DISCOUNT);
}
console.log(`total Price: $${totalPrice.toFixed(2)}`);
</script>
</body>
</html>
@@ -0,0 +1,36 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>if - Verzweigung</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">
<h1>if - Verzweigung</h1>
<p>
<code> if (BEDINGUNG) { /* ANWEISUNGEN */ } else { /* ANSONSTEN ANWEISUNGEN */ } </code>
</p>
</div>
</main>
<script>
'use strict';
const SOLUTION = 42;
// prefer-const
const answer = Number(prompt("What's the result of 6 * 7"));
if (answer === SOLUTION) {
console.log('42 is correct.');
console.log('Congratulations, You are a genius!');
} else {
console.log("Wrong. Math isn't exactly your strong point, is it?");
}
console.log('weiter im code...');
</script>
</body>
</html>
@@ -0,0 +1,40 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ternärer Operator | Tertiärer Operator</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">
<h1>Ternärer Operator | Tertiärer Operator</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const ouputEl = document.querySelector('.output');
const productCategory = 'books';
const netPrice = 10;
// let taxRate;
// if (productCategory === 'books') {
// taxRate = 1.07;
// } else {
// taxRate = 1.19;
// }
// Ternärer Operator
const taxRate = (productCategory === 'books') ? 1.07 : 1.19; // prettier-ignore
const totalPrice = netPrice * taxRate;
console.log(totalPrice.toFixed(2)); // => 10.70
</script>
</body>
</html>
@@ -12009,6 +12009,9 @@ h6,
.menu-main ul.list {
display: flex;
}
.menu-main ul.list li a {
outline: none;
}
.menu-main ul.list li a:hover, .menu-main ul.list li a:focus {
color: #201e1f;
background-color: #f2ebbf;
@@ -12025,5 +12028,13 @@ h6,
.menu-main ul.sublist {
position: absolute;
}
.menu-main ul ul {
display: none;
}
.menu-main ul > li:hover ul,
.menu-main ul > li:focus ul,
.menu-main ul > li:focus-within ul {
display: block;
}
/*# sourceMappingURL=main.css.map */
File diff suppressed because one or more lines are too long
@@ -0,0 +1,110 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webseite mit HTML & CSS (SCSS)</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js" defer></script>
</head>
<body>
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
<header class="header-main">
<div class="content-box">
<figure class="logo-main">
<img src="https://dummyimage.com/280x160/555/000.jpg" alt="Logo" />
<figcaption>Logo - Slogan</figcaption>
</figure>
</div>
</header>
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
<nav class="menu-main">
<ul class="list">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li>
<a href="#">Projects</a>
<!-- ul.sublist>li*3>a[href="#"]{Project $} -->
<ul class="sublist">
<li><a href="#">Project 1</a></li>
<li><a href="#">Project 2</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>Kontakt</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
<form class="form-contact">
<div class="row">
<!-- .col>.mb-3>label.form-label -->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-firstname" class="form-label">First name:</label>
<input
type="text"
name="firstname"
id="input-firstname"
class="form-control input-firstname"
required />
</div>
</div>
<!-- ▲ /col ▲ -->
<!-- .col>.mb-3>label.form-label -->
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="input-lastname" class="form-label">Last name:</label>
<input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
</div>
</div>
<!-- ▲ /col ▲ -->
</div>
<!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-email" class="form-label">E-mail</label>
<input type="email" name="email" id="input-email" class="form-control input-email" required />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-subject" class="form-label">Subject</label>
<input type="text" name="subject" id="input-subject" class="form-control input-subject" />
</div>
</div>
</div>
<!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="textarea-message" class="form-label">Message</label>
<textarea
name="message"
id="textarea-message"
cols="12"
rows="8"
class="form-control textarea-message"></textarea>
</div>
</div>
</div>
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
<div class="row">
<div class="col">
<div class="mb-3">
<button type="submit" class="btn btn-dark button-submit">Send</button>
</div>
</div>
</div>
</form>
</div>
</main>
</body>
</html>
@@ -14,6 +14,7 @@
display: flex;
li {
a {
outline: none; // nur wenn focus definiert wurde und einen hohen Kontrast hat.
&:hover,
&:focus {
color: $color-black;
@@ -33,4 +34,16 @@
ul.sublist {
position: absolute;
}
ul ul {
display: none; // TODO: change to not visible
}
ul > li:hover,
ul > li:focus,
ul > li:focus-within {
ul {
display: block;
}
}
}
@@ -21,7 +21,7 @@
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
<nav class="menu-main">
<ul class="list">
<li><a href="/">Home</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li>
<a href="#">Projects</a>
@@ -38,7 +38,6 @@
<main>
<div class="container py-5">
<h1>Webseite mit HTML & CSS (SCSS)</h1>
<div class="box"><span>BOX</span></div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, earum? Harum fuga itaque a natus tempora
dolor vero officiis eos tempore! Impedit nobis ea eum labore, aut assumenda nostrum dicta.