2026-07-01 11:14:39 +02:00
parent 2dbadb9c4f
commit faccb4ef34
4 changed files with 100 additions and 30 deletions
--- a/02_advanced/uebungen/u03_profile-card/index.html
+++ b/02_advanced/uebungen/u03_profile-card/index.html
@@ -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>