2026-09-23 10:47:07 +02:00
parent b16dd8458d
commit 082a9bd7b3
11 changed files with 209 additions and 18 deletions
@@ -34,16 +34,84 @@
          </div>
          <!-- ▲ /card ▲ -->
        </div>
+
+        <div class="output alert alert-secondary my-3">
+          <div class="row"></div>
+        </div>
      </div>
    </main>
    <script>
      'use strict';

+      const outputEl = document.querySelector('.output');
+
      const person1 = { firstName: 'John', lastName: 'Wick', age: 51, hobbies: ['guns', 'dogs', 'cars'] };
      const person2 = { firstName: 'Jane', lastName: 'Doe', age: 23 };
      const person3 = { firstName: 'Joe', lastName: 'Doe' };

-      // your code
+      const generatePersonData = ({ firstName = '[FIRSTNAME]', lastName = '[LASTNAME]', hobbies = [], age }) => {
+        let html = '<div class="card mb-3">';
+        html += '<div class="card-body">';
+        html += `<h5 class="card-title">${firstName} ${lastName}</h5>`;
+
+        if (!!age) {
+          html += `<p class="card-text">Person is ${age} years old.</p>`;
+        }
+
+        if (hobbies.length > 0) {
+          html += `<p class="card-text">Person has the following hobbies:</p>`;
+          html += '</div>';
+          html += '<ul class="list-group list-group-flush">';
+
+          hobbies.forEach((hobby) => {
+            html += `<li class="list-group-item">${hobby}</li>`;
+          });
+
+          html += '</ul>';
+        } else {
+          html += '</div>';
+        }
+
+        html += '</div>';
+
+        return html;
+      };
+
+      // const generatePersonData2 = ({ firstName = '[FIRSTNAME]', lastName = '[LASTNAME]', hobbies = [], age }) => {
+      //   let html = `<div class="card mb-3">
+      //   <div class="card-body">
+      //   <h5 class="card-title">${firstName} ${lastName}</h5>
+      //   ${!!age ? `<p class="card-text">Person is ${age} years old.</p>`: ''}
+      //   ${(hobbies.length > 0) ? `<p class="card-text">Person has the following hobbies:</p></div>`
+      //     html += '<ul class="list-group list-group-flush">';
+
+      //     hobbies.forEach((hobby) => {
+      //       html += `<li class="list-group-item">${hobby}</li>`;
+      //     });
+
+      //     html += '</ul>';
+      //   } else {
+      //     html += '</div>';
+      //   }
+
+      //   html += '</div>';
+
+      //   return html;
+      // };
+
+      const createProfileCard = (personObj) => {
+        const cardHtml = generatePersonData(personObj);
+
+        const cardContainer = document.createElement('div');
+        cardContainer.classList.add('col-12', 'col-md-4');
+
+        cardContainer.insertAdjacentHTML('beforeend', cardHtml);
+        outputEl.querySelector('.row').appendChild(cardContainer);
+      };
+
+      createProfileCard(person1);
+      createProfileCard(person2);
+      createProfileCard(person3);
    </script>
  </body>
 </html>