ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-25 10:35:17 +02:00
parent ccff1b73d6
commit db2ec6838a
7 changed files with 170 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
01_grundlagen/uebungen/u36_kekse-array.html Normal file
View File

@@ -0,0 +1,106 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 36: Kekse backen 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 36: Kekse backen mit Arrays</h2>
<img
src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/526/800-534/53f6cb7feb9e9a7580d88ce5fa5a6d5c.jpg?1739200429"
alt=""
width="300"
class="img-thumbnail" />
<p>
Du möchtest ein digitales Rezeptbuch schreiben. Die Zutaten für das jeweilige Rezept stellst du in einem
Array zur Verfügung.
</p>
<ol>
<li>
Lege für das erste Rezept — Haferflocken-Kekse — ein Array mit den folgenden Zutaten an:
<code>
<pre>
1/4 cup vegetable oil
1 separated egg
1/2 cup sugar
1 tsp baking powder
</pre>
</code>
</li>
<li>Da in der Liste das Mehl fehlt, musst du 1 EL Mehl (1 tsp flour) noch nachträglich ergänzen.</li>
<li>
Beim Durchlesen der Liste fällt auf, dass die wohl wichtigste Zutat ebenfalls fehlt. Füge noch 100 g
Haferflocken (1 cup rolled oats) an die erste Position in die Zutatenliste ein.
</li>
<li>
Für Kekse ist es eigentlich besser, Butter statt Öl zu verwenden. Tausche das Öl in der Liste
dementsprechend gegen 75 g Butter (1/3 cup butter) aus.
</li>
<li>
Wandle das Array nun in einen String um und speichere diesen in einer Variablen. Dabei sollen die Zutaten
als Liste ausgegeben werden.
</li>
<li>
Und damit die Rezeptspielerei nicht total sinnlos war, bekommst du natürlich noch die Anleitung von uns
dazu. Speichere auch diese in einer Variable und gib das komplette Rezept in der Konsole aus.
</li>
</ol>
<p>Anleitung:</p>
<blockquote>
Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let
it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now
mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be
too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a
pre-heated oven.
</blockquote>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const introduction = `Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a pre-heated oven.`;
const receipeAr = [
'1/4 cup vegetable oil', //
'1 separated egg',
'1/2 cup sugar',
'1 tsp baking powder',
];
// 36.1
receipeAr.push('1 tsp flour');
// 36.2
receipeAr.unshift('1 cup rolled oats');
// 36.2
receipeAr.splice(1, 1, '1/3 cup butter');
receipeAr[1] = '1/3 cup butter';
// 36.3
const receipeStr = receipeAr.join('\n');
console.log(`Oat-Cookie Receipe:\n\n${receipeStr}\n\n${introduction}`);
outputEl.innerHTML = `<p>${introduction}</p>
<h3>Oat-Cookie Receipe:</h3>
<ol><li>${receipeAr.join('</li><li>')}</li></ol>`;
</script>
</body>
</html>