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;
|
||||
height: 100px;
|
||||
border: 0.5rem solid #333;
|
||||
background-color: tomato;
|
||||
background-color: limegreen;
|
||||
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;
|
||||
height: 100px;
|
||||
border: 0.5rem solid #333;
|
||||
background-color: tomato;
|
||||
background-color: limegreen;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<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>
|
||||
<script src="assets/js/build.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 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",
|
||||
"main": "index.js",
|
||||
"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