This commit is contained in:
Philippe Torrel
@@ -0,0 +1,41 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 20: Geoquiz — Teil 2</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 20: Geoquiz — Teil 2</h2>
|
||||||
|
<p>
|
||||||
|
In der erweiterten Ausbaustufe sollen die Schüler den Staat zu einer Hauptstadt nennen. Deine Aufgabe ist es
|
||||||
|
erneut, eine Lösungsfunktion zu programmieren. Dieses Mal nimmt <code>getCountryForCapital</code> eine
|
||||||
|
Hauptstadt (<code>capital</code>) entgegen und liefert den zugehörigen Staat zurück.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Die Funktion soll auf die bestehende Konstante <code>countriesWithCapital</code> zugreifen. Es ist nicht
|
||||||
|
erlaubt, die Struktur der Daten in der Konstante zu ändern.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const countriesWithCapital = [
|
||||||
|
['UK', 'London'],
|
||||||
|
['France', 'Paris'],
|
||||||
|
['Germany', 'Berlin'],
|
||||||
|
['Switzerland', 'Bern'],
|
||||||
|
['Austria', 'Vienna'],
|
||||||
|
['Russia', 'Moscow'],
|
||||||
|
];
|
||||||
|
|
||||||
|
const getCountryForCapital = () => {};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 21: Pokémon — Evolution</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: Pokémon — Evolution</h2>
|
||||||
|
<p>
|
||||||
|
Kennst du Pokémon? Allen Pokémon-Spielen ist gemein, dass es Pokémon (Phantasiewesen) gibt, die über
|
||||||
|
verschiedene Evolutionsstufen verfügen. Ein Pokémon kann sich bis zu zweimal weiterentwickeln. D. h. es gibt
|
||||||
|
maximal drei Stufen: seine Anfangsstufe und bis zu zwei Folgestufen. Jede dieser Stufen trägt einen neuen
|
||||||
|
Pokémon-Namen — keiner dieser Namen kann doppelt vorkommen. Einen guten Überblick über die Stufen bei
|
||||||
|
Pokémon GO findest du auf <a href="https://pokemondb.net/evolution">https://pokemondb.net/evolution</a>.
|
||||||
|
</p>
|
||||||
|
<ol class="list">
|
||||||
|
<li>
|
||||||
|
Schreibe eine Funktion <code>stagesFor</code>, der du eine Pokémon-Evolutionsstufe übergibst und die dir
|
||||||
|
alle dazugehörigen Evolutionsstufen als Array zurückliefert. Als Daten verwendest du exemplarisch die
|
||||||
|
Evolutionsstufen von Pidgey, Vulpix und Dratini.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Entwickle die Funktionen <code>stagesAfter</code> und <code>stagesBefore</code>, die dir nur die Stufen
|
||||||
|
vor bzw. nach der angefragten Stufe zurückliefern.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const evolutionStages = [
|
||||||
|
['Pidgey', 'Pidgeotto', 'Pidgeot'],
|
||||||
|
['Vulpix', 'Ninetales'],
|
||||||
|
['Dratini', 'Dragonair', 'Dragonite'],
|
||||||
|
];
|
||||||
|
|
||||||
|
const stagesFor = (pokemon) => {};
|
||||||
|
|
||||||
|
const stagesAfter = (pokemon) => {};
|
||||||
|
|
||||||
|
const stagesBefore = (pokemon) => {};
|
||||||
|
|
||||||
|
console.log(stagesFor('Vulpix')); // => [ 'Vulpix', 'Ninetales' ]
|
||||||
|
console.log(stagesAfter('Dratini')); // => [ 'Dragonair', 'Dragonite' ]
|
||||||
|
console.log(stagesBefore('Pidgeot')); // => [ 'Pidgey', 'Pidgeotto' ]
|
||||||
|
console.log(stagesBefore('Dragonair')); // => [ 'Dratini' ]
|
||||||
|
console.log(stagesBefore('Pidgey')); // => [ ]
|
||||||
|
console.log(stagesBefore('Pidgeot')); // => ['Pidgey', 'Pidgeotto']
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 22: Fröhliches Mixen mit Arrays</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 22: Fröhliches Mixen mit Arrays</h2>
|
||||||
|
<p>
|
||||||
|
Du möchtest mal wieder Cocktails mixen. Aber heute konntest du dich nicht so recht für einen bestimmten
|
||||||
|
Cocktail entscheiden. Am besten wäre es, wenn du aus mehreren Rezepten herausfinden könntest, für welches du
|
||||||
|
die passenden Zutaten vorrätig hast. Nun wird es etwas kniffliger, denn du benötigst ein Array, das die
|
||||||
|
Rezepte wiederum in Form von Arrays aus Zutaten enthält.
|
||||||
|
</p>
|
||||||
|
<p>Die Konsole soll die Zutaten des ersten gefundenen Cocktails loggen.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const honoluluFlip = [
|
||||||
|
'Maracuja Juice', //
|
||||||
|
'Pineapple Juice',
|
||||||
|
'Lemon Juice',
|
||||||
|
'Grapefruit Juice',
|
||||||
|
'Crushed Ice',
|
||||||
|
];
|
||||||
|
|
||||||
|
const casualFriday = [
|
||||||
|
'Vodka', //
|
||||||
|
'Lime Juice',
|
||||||
|
'Apple Juice',
|
||||||
|
'Cucumber',
|
||||||
|
];
|
||||||
|
const pinkDolly = [
|
||||||
|
'Vodka', //
|
||||||
|
'Orange Juice',
|
||||||
|
'Pineapple Juice',
|
||||||
|
'Grenadine',
|
||||||
|
'Cream',
|
||||||
|
'Coco Syrup',
|
||||||
|
];
|
||||||
|
const cocktailRecipes = [honoluluFlip, casualFriday, pinkDolly];
|
||||||
|
|
||||||
|
const ingredientsFromMyBar = [
|
||||||
|
'Pineapple',
|
||||||
|
'Maracuja Juice',
|
||||||
|
'Cream',
|
||||||
|
'Grapefruit Juice',
|
||||||
|
'Crushed Ice',
|
||||||
|
'Milk',
|
||||||
|
'Vodka',
|
||||||
|
'Apple Juice',
|
||||||
|
'Aperol',
|
||||||
|
'Pineapple Juice',
|
||||||
|
'Lime Juice',
|
||||||
|
'Lemons',
|
||||||
|
'Cucumber',
|
||||||
|
];
|
||||||
|
|
||||||
|
const isMixableWithMyIngredients = (cocktailRecipe) => {
|
||||||
|
/* ??? */
|
||||||
|
};
|
||||||
|
|
||||||
|
const isMixableWith = (cocktailRecipe, availableIngredients) => {
|
||||||
|
return cocktailRecipe.every((ingredientFromRecipe) =>
|
||||||
|
hasIngredient(availableIngredients, ingredientFromRecipe)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasIngredient = (listOfIngredients, searchedIngredient) => listOfIngredients.includes(searchedIngredient);
|
||||||
|
|
||||||
|
// console.log(cocktailRecipes./* ??? */(isMixableWithMyIngredients));
|
||||||
|
|
||||||
|
// => [ 'Vodka', 'Lime Juice', 'Apple Juice', 'Cucumber' ]
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 23: Fetch API – Einfache Datenabfrage</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: Fetch API – Einfache Datenabfrage</h2>
|
||||||
|
<p>
|
||||||
|
Erstelle eine Funktion <code>fetchUsers</code>, die mithilfe der Fetch API eine Liste von Benutzern von der
|
||||||
|
DummyJSON-API abruft. Verwende async/await und try/catch, um Netzwerkfehler abzufangen. Die abgerufenen
|
||||||
|
Daten sollen dann in der Konsole ausgegeben werden.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<strong>Hinweis:</strong> Verwende die URL
|
||||||
|
<a href="https://dummyjson.com/users">https://dummyjson.com/users</a> für den Fetch-Aufruf.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 24: Objekt in JSON umwandeln</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 24: Objekt in JSON umwandeln</h2>
|
||||||
|
<p>
|
||||||
|
Gegeben ist ein JavaScript-Objekt <code>book</code>. Konvertiere dieses Objekt in einen JSON-String und
|
||||||
|
parse anschließend die Zeichenkette zurück in ein JavaScript-Objekt. Gib den Titel und den Autor des Buches
|
||||||
|
in der Konsole aus.
|
||||||
|
</p>
|
||||||
|
<p>Folgendes sollte in der Konsole ausgegeben werden:</p>
|
||||||
|
|
||||||
|
<code>
|
||||||
|
<pre>
|
||||||
|
// JSON-String
|
||||||
|
{"title":"The Great Gatsby","author":"F. Scott Fitzgerald","year":1925}
|
||||||
|
|
||||||
|
// JavaScript Object
|
||||||
|
The Great Gatsby
|
||||||
|
F. Scott Fitzgerald
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const book = {
|
||||||
|
title: 'The Great Gatsby',
|
||||||
|
author: 'F. Scott Fitzgerald',
|
||||||
|
year: 1925,
|
||||||
|
};
|
||||||
|
|
||||||
|
// JSON String
|
||||||
|
|
||||||
|
// JS Object
|
||||||
|
|
||||||
|
console.log(bookObj.title); // => 'The Great Gatsby'
|
||||||
|
console.log(bookObj.author); // => 'F. Scott Fitzgerald'
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"workbench.colorCustomizations": {
|
||||||
|
"titleBar.activeForeground": "#333",
|
||||||
|
"titleBar.activeBackground": "#6bd0ab",
|
||||||
|
"titleBar.inactiveForeground": "#ddd",
|
||||||
|
"titleBar.inactiveBackground": "#6ca38f"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -11878,7 +11878,7 @@ body {
|
|||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border: 0.5rem solid #333;
|
border: 0.5rem solid #333;
|
||||||
background-color: tomato;
|
background-color: limegreen;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
"use strict";
|
||||||
|
(() => {
|
||||||
|
// dev/js/main.js
|
||||||
|
(() => {
|
||||||
|
const DOM = {};
|
||||||
|
const init = () => {
|
||||||
|
console.log("init...");
|
||||||
|
};
|
||||||
|
init();
|
||||||
|
})();
|
||||||
|
})();
|
||||||
|
//# sourceMappingURL=build.js.map
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"sources": ["../../dev/js/main.js"],
|
||||||
|
"sourcesContent": ["'use strict';\n\n(() => {\n // === DOM & VARS =======\n const DOM = {};\n\n // === INIT =============\n const init = () => {\n console.log('init...');\n };\n\n // === EVENTHANDLER =====\n\n // === XHR/FETCH ========\n\n // === FUNCTIONS ========\n\n init();\n})();\n"],
|
||||||
|
"mappings": ";;;AAEA,GAAC,MAAM;AAEL,UAAM,MAAM,CAAC;AAGb,UAAM,OAAO,MAAM;AACjB,cAAQ,IAAI,SAAS;AAAA,IACvB;AAQA,SAAK;AAAA,EACP,GAAG;",
|
||||||
|
"names": []
|
||||||
|
}
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
console.log('init');
|
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
// === DOM & VARS =======
|
||||||
|
const DOM = {};
|
||||||
|
|
||||||
|
// === INIT =============
|
||||||
|
const init = () => {
|
||||||
|
console.log('init...');
|
||||||
|
};
|
||||||
|
|
||||||
|
// === EVENTHANDLER =====
|
||||||
|
|
||||||
|
// === XHR/FETCH ========
|
||||||
|
|
||||||
|
// === FUNCTIONS ========
|
||||||
|
|
||||||
|
init();
|
||||||
|
})();
|
||||||
@@ -22,7 +22,7 @@ body {
|
|||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
border: 0.5rem solid #333;
|
border: 0.5rem solid #333;
|
||||||
background-color: tomato;
|
background-color: limegreen;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<title>Webseite mit HTML & CSS (SCSS)</title>
|
<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 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" />
|
<link rel="stylesheet" href="assets/css/main.css" />
|
||||||
<script src="assets/js/main.js" defer></script>
|
<script src="assets/js/build.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
|
<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -8,6 +8,13 @@
|
|||||||
"type": "module",
|
"type": "module",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q"
|
"css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q",
|
||||||
|
"js": "npx esbuild dev/js/main.js --watch --bundle --sourcemap --outfile=assets/js/build.js",
|
||||||
|
"dev": "run-p css js"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"esbuild": "^0.28.2",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"sass": "^1.105.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user