92 lines
2.7 KiB
HTML
92 lines
2.7 KiB
HTML
<!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 AVAILABLE_INGREDIENTS = [
|
|
'Pineapple',
|
|
'Maracuja Juice',
|
|
'Cream',
|
|
'Grapefruit Juice',
|
|
'Crushed Ice',
|
|
'Milk',
|
|
'Vodka',
|
|
'Apple Juice',
|
|
'Aperol',
|
|
'Pineapple Juice',
|
|
'Lime Juice',
|
|
'Lemons',
|
|
'Cucumber',
|
|
];
|
|
|
|
const isMixableWithMyIngredients = (cocktailRecipe) => {
|
|
return isMixableWith(cocktailRecipe, AVAILABLE_INGREDIENTS);
|
|
};
|
|
|
|
const isMixableWith = (cocktailRecipe, availableIngredients) => {
|
|
return cocktailRecipe.every((ingredientFromRecipe) =>
|
|
hasIngredient(availableIngredients, ingredientFromRecipe),
|
|
);
|
|
};
|
|
|
|
const hasIngredient = (listAr, searchStr) => {
|
|
return listAr.includes(searchStr);
|
|
};
|
|
console.log(cocktailRecipes);
|
|
console.log('isMixable: ', isMixableWith(casualFriday, AVAILABLE_INGREDIENTS));
|
|
|
|
console.log(
|
|
cocktailRecipes.find((recipeAr) => {
|
|
return isMixableWithMyIngredients(recipeAr);
|
|
}),
|
|
);
|
|
// => [ 'Vodka', 'Lime Juice', 'Apple Juice', 'Cucumber' ]
|
|
</script>
|
|
</body>
|
|
</html>
|