This commit is contained in:
Philippe Torrel
@@ -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>
|
||||
BIN
02_advanced/uebungen/uebungen-21-24.zip
Normal file
BIN
02_advanced/uebungen/uebungen-21-24.zip
Normal file
Binary file not shown.
Reference in New Issue
Block a user