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-07-01 11:14:39 +02:00
parent 2dbadb9c4f
commit faccb4ef34
4 changed files with 100 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
02_advanced/uebungen/#u03_profile-card/index.html
View File

@@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 3: Profilcard mit destructuring</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 3: Profilcard mit destructuring</h2>
<p>
Erstelle eine Funktion namens <code>createProfileCard</code>, die die Informationen einer Person
entgegennimmt und daraus eine Bootstrap Card im HTML-Format generiert. Nutze dabei die generatePersonData
Funktion, um die Personendaten zu formatieren. Die Funktion soll so angepasst werden, dass sie Destructuring
für die übergebenen Parameter verwendet.
</p>
</div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

0
02_advanced/uebungen/#u02_distance/index.html → 02_advanced/uebungen/u02_distance/index.html
View File

92
02_advanced/uebungen/u03_profile-card/index.html Normal file
View File

@@ -0,0 +1,92 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 3: Profilcard mit destructuring</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 3: Profilcard mit destructuring</h2>
<p>
Erstelle eine Funktion namens <code>createProfileCard</code>, die die Informationen einer Person
entgegennimmt und daraus eine Bootstrap Card im HTML-Format generiert. Nutze dabei die generatePersonData
Funktion, um die Personendaten zu formatieren. Die Funktion soll so angepasst werden, dass sie Destructuring
für die übergebenen Parameter verwendet.
</p>
</div>
<div class="output alert alert-secondary my-3 row"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const createProfileCard = (
person = {
// Default Objekt, falls kein Objekt übergeben wurde
firstName: 'firstName',
lastName: 'LastName',
age: 30,
hobbies: ['Hobby 1', 'Hobby 2', 'Hobby 3'],
},
) => {
// if (typeof person === 'undefined') {
// person = {
// // Default Objekt, falls kein Objekt übergeben wurde
// firstName: 'firstName',
// lastName: 'LastName',
// age: 30,
// hobbies: ['Hobby 1', 'Hobby 2', 'Hobby 3'],
// };
// }
// Desctructuring von person Objelt
const { firstName, lastName, age, hobbies = [] } = person;
const html = `
<div class="col-12 col-sm-6 col-md-4">
<div class="card mb-3">
<img src="https://dummyimage.com/300x150.jpg&text=${firstName}+${lastName}" class="card-img-top" alt="${firstName} ${lastName}" />
<div class="card-body">
<h5 class="card-title">${firstName} ${lastName}</h5>
${age ? `<p class="card-text">${firstName} ${lastName} is ${age} years old.</p>` : ''}
</div>
${
hobbies.length > 0
? `<div class="card-body">
<h5 class="card-title">Hobbies:</h5>
</div>
<ul class="list-group list-group-flush">
${hobbies
.map((hobby) => {
return `<li class="list-group-item">${hobby}</li>`;
})
.join('')}
</ul>
</div>`
: ''
}
<!-- ▲ /card ▲ -->
</div>
`;
return html;
};
const personObj = { firstName: 'John', lastName: 'Wick', age: 51, hobbies: ['guns', 'dogs', 'cars'] };
const person2 = { firstName: 'Jane', lastName: 'Doe', age: 23 };
const person3 = { firstName: 'Joe', lastName: 'Doe' };
outputEl.innerHTML = createProfileCard(personObj);
outputEl.innerHTML += createProfileCard(person2);
outputEl.innerHTML += createProfileCard(person3);
outputEl.innerHTML += createProfileCard();
</script>
</body>
</html>

11
02_advanced/uebungen/#u07_string-rekursiv/index.html → 02_advanced/uebungen/u07_string-rekursiv/index.html
View File

@@ -19,14 +19,19 @@
'use strict'; 'use strict';
const reverseString = (str) => { const reverseString = (str) => {
if (str.length <= 1) { // Basisfall
if (str.length < 1) {
return ''; return '';
} }
// console.log('str.slice(1): ', str.slice(1)); // console.log('str.slice(1): ', str.slice(1));
// iwie kapier ich das mit den rückgabewarten von rekursiven funktionen noch net wirklich
return reverseString(str.slice(1)) + str[0]; return reverseString(str.slice(1)) + str[0];
// return ... <-- ("lo") + "l" <--- ("llo") + "e" <-- ("ello") + "h" // return '' + 'o' fn("o") + "l" <-- fn("lo") + "l" <--- fn("llo") + "e" <-- fn("ello") + "h"
};
const reverseString2 = (str) => {
return str.split('').reverse().join('');
}; };
// Test cases // Test cases