This commit is contained in:
Philippe Torrel
@@ -20,9 +20,15 @@
|
||||
- [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
|
||||
- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
|
||||
- [HTMLReference.io](https://htmlreference.io/)
|
||||
- [CSSReference.io](https://cssreference.io/)
|
||||
- [BEM](https://getbem.com/) - Block Element Modifier
|
||||
|
||||
## CSS Tricks
|
||||
|
||||
- [CSSReference.io](https://cssreference.io/)
|
||||
- [CSS Guide Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||||
- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
|
||||
- [CSS Gridgarden](https://cssgridgarden.com/#de)
|
||||
|
||||
## Software/ Tools
|
||||
|
||||
- [Microsoft PowerToys](https://learn.microsoft.com/de-de/windows/powertoys/)
|
||||
|
||||
@@ -23,6 +23,12 @@
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const age = prompt('Wie alt bist Du?');
|
||||
|
||||
const result = `Du bist ${age} Jahre alt.`;
|
||||
console.log(result);
|
||||
outputEl.textContent = result;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -20,12 +20,17 @@
|
||||
<p>Folgende Definitionen steht dir zur Verfügung:</p>
|
||||
<p>
|
||||
<code>
|
||||
'use strict'<br />
|
||||
const TAX_PERCENTAGE = 22<br />
|
||||
let price = 150<br />
|
||||
/* your code here */<br />
|
||||
console.log(totalPrice)<br />
|
||||
</code>
|
||||
'use strict'
|
||||
|
||||
const TAX_PERCENTAGE = 22
|
||||
|
||||
let price = 150
|
||||
|
||||
/* your code here */
|
||||
|
||||
console.log(totalPrice)
|
||||
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
@@ -34,12 +39,22 @@
|
||||
<script>
|
||||
'use strict';
|
||||
const TAX_PERCENTAGE = 22;
|
||||
const TAX_RATE = 1 + TAX_PERCENTAGE / 100; // => 1.22
|
||||
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const price = 150;
|
||||
|
||||
/* your code here */
|
||||
// const totalPrice = price + (price * TAX_PERCENTAGE) / 100;
|
||||
const totalPrice = price * TAX_RATE;
|
||||
|
||||
|
||||
|
||||
console.log(totalPrice);
|
||||
|
||||
outputEl.textContent = `total price: $${totalPrice}`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</code>
|
||||
@@ -23,32 +23,32 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Preis eines Buches in einem Onlineshop</td>
|
||||
<td>-</td>
|
||||
<td>bookPrice, itemPrice</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Anzahl der angemeldeten Benutzer</td>
|
||||
<td>-</td>
|
||||
<td>numberOfRegisteredUser, loggedInUsers, loggedUserCount</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Titel einer Webseite</td>
|
||||
<td>-</td>
|
||||
<td>websiteTitle, pageTitle</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Höhe eines Hauses auf einer Immobiliensite</td>
|
||||
<td>-</td>
|
||||
<td>houseHeight, buildingHeight, heightOfHouse</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Typ eines Monitors auf der Site eines Herstellers</td>
|
||||
<td>-</td>
|
||||
<td><strong>monitorType</strong></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Fahrgestellnummer eines reparierten Autos auf der Website einer Autowerkstatt</td>
|
||||
<td>-</td>
|
||||
<td>carChassisNumber, vehicleIdentificationNumber, vin, <strong>vinRepaired</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -36,118 +36,118 @@
|
||||
<tr>
|
||||
<td>bildid</td>
|
||||
<td>Inhalt</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>kein lowerCamelCase</td>
|
||||
<td>bildId, imageId</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>bildZähler</td>
|
||||
<td>Anzahl der hochgeladenen Bilder</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>keine Umlaute</td>
|
||||
<td>imgUploadedCounter, bildZaehler, imageCounter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zahlerFuerDie AktuelleZeileIn DerTabelleDie DieBenutzer Auflistet</td>
|
||||
<td>Zähler für die aktuelle Zeile, in der Tabelle, die die Benutzer auflistet.</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>keine Sonderzeichnen und zu lang</td>
|
||||
<td>currentRowUserCounter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>urenKelvornAme</td>
|
||||
<td>Vorname des Sohns eines Enkels</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>falsche lowerCamelCase Worttrennung</td>
|
||||
<td>urenkelVorname, greatGrandson</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>x</td>
|
||||
<td>Geburtsdatum</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>nicht aussagekräftig</td>
|
||||
<td>birthdate, dateOfBirth</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>y</td>
|
||||
<td>Nummer der aktuellen Seite</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>nicht aussagekräftig</td>
|
||||
<td>pageNumber</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>d</td>
|
||||
<td>Dateiname</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>nicht aussagekräftig</td>
|
||||
<td>fileName, filename</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>faqUeberschrift</td>
|
||||
<td>Überschrift der Liste häufig gestellter Fragen</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>faqHeadline</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>menHoeh</td>
|
||||
<td>Höhe eines Menüs</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>keine gültige Abkürzung</td>
|
||||
<td>menuHeight, navHeight</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>strName</td>
|
||||
<td>Straßenname</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>streetName</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>wanf</td>
|
||||
<td>Wandfarbe</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>wallPaint, <strong>wallColor</strong> colorOfWall</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>PoStLeiTZaHl</td>
|
||||
<td>Postleitzahl</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>falsches CamelCase</td>
|
||||
<td>zipCode</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PLZ</td>
|
||||
<td>Postleitzahl</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>nicht uppercase (Verwechslung mit Konfigurationsvariable)</td>
|
||||
<td>zipCode</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>plz</td>
|
||||
<td>Postleitzahl</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>zipCode</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>2.frage</td>
|
||||
<td>Die 2. Frage</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>syntaxfehler</td>
|
||||
<td>secondQuestion, questionTwo, question2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>anzahl?</td>
|
||||
<td>Die vom Benutzer eingegebene Anzahl von Produktexemplaren, die er kaufen möchte.</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>syntaxfehler</td>
|
||||
<td>articleCount, articleAmount, productAmount</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>wichtige Meldung!</td>
|
||||
<td>Die Variable enthält den Text einer wichtigen Systemmeldung.</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>syntaxfehler</td>
|
||||
<td>importMessage, importantSystemMessage, alertMessage</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pi</td>
|
||||
<td>Die Zahl π (3.14…)</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>Konfigurationsvariable</td>
|
||||
<td>Math.PI, PI</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -43,6 +43,27 @@
|
||||
const outputAEl = document.querySelector('.output-a');
|
||||
const outputBEl = document.querySelector('.output-b');
|
||||
const outputCEl = document.querySelector('.output-c');
|
||||
|
||||
const lieblingsEssen = prompt('Was ist Ihr Lieblingsessen?');
|
||||
const lieblingsGetraenk = prompt('Was ist Ihr Lieblingsgetränk?');
|
||||
|
||||
const text1 =
|
||||
'Output 1: Ihr Lieblingsessen ist ' +
|
||||
lieblingsEssen +
|
||||
' und Ihr Lieblingsgetränk ist ' +
|
||||
lieblingsGetraenk +
|
||||
'.';
|
||||
|
||||
// RECOMMENDED
|
||||
const text2 = `Output 2: Ihr Lieblingsessen ist ${lieblingsEssen} und Ihr Lieblingsgetränk ist ${lieblingsGetraenk}.`;
|
||||
|
||||
console.log(text1);
|
||||
console.log(text2);
|
||||
|
||||
outputAEl.textContent = text1;
|
||||
outputBEl.textContent = text2;
|
||||
outputCEl.innerHTML =
|
||||
'Ihr Lieblingsessen ist ' + lieblingsEssen + `<br /> und Ihr Lieblingsgetränk ist ${lieblingsGetraenk}`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -34,14 +34,14 @@
|
||||
|
||||
<form name="userFavs">
|
||||
<div class="row mb-3">
|
||||
<div class="col-6">
|
||||
<div class="col">
|
||||
<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="col">
|
||||
<div class="form-floating">
|
||||
<input type="text" class="form-control" name="userDrink" id="userDrink" />
|
||||
<label for="userDrink">Lieblingsgetränk</label>
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-4 text-center">
|
||||
<button type="submit" class="btn btn-primary">Bestellen</button>
|
||||
<button type="submit" class="btn btn-primary">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -71,11 +71,12 @@
|
||||
const userForm = document.forms.userFavs;
|
||||
|
||||
userForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
e.preventDefault(); // Standardverhalten unterbinden
|
||||
|
||||
const favMeal = userForm.userMeal.value;
|
||||
const favDrink = userForm.userDrink.value;
|
||||
|
||||
// Guard
|
||||
if (favMeal === '' || favDrink === '') {
|
||||
return;
|
||||
}
|
||||
@@ -91,7 +92,7 @@
|
||||
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`;
|
||||
outputBEl.innerText = `User 1234 wurde mit Lieblingsspeise ${favMeal} und Lieblingsgedränk ${favDrink} registriert. 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 ` +
|
||||
|
||||
Reference in New Issue
Block a user