adding details much more elegant

src/public/javascript/createProfile.js

@@ -1,7 +1,55 @@
-const contactDetails = [];
+class ContactDetails {
+    constructor(rootUiElement) {
+        this.rootUiElement = rootUiElement;
+        this.details = [];
+    }
+
+    addDetails(type, value) {
+        this.details.push({ type, value });
+    }
+
+    removeDetails(type, value) {
+        this.details = this.details.filter(detail => detail.type !== type || detail.value !== value);
+    }
+
+    syncUi() {
+        requestAnimationFrame(() => {
+            this.rootUiElement.innerHTML = '';
+            this.details.forEach((detail) => {
+                const addedDetailFragment = ContactDetails.buildContactDetailBadge(detail);
+                this.rootUiElement.appendChild(addedDetailFragment);
+            });
+        })
+    }
+
+    static buildContactDetailBadge(detail) {
+        const fragment = document.createDocumentFragment();
+
+        const div = document.createElement("div");
+        div.className = "added-contact-detail badge";
+
+        const p = document.createElement("p");
+        p.textContent = `${detail.type}: ${detail.value}`;
+
+        const button = document.createElement("button");
+        button.textContent = "Eliminar";
+        button.onclick = function () {
+            removeAddedContactDetail(this);
+            return false;
+        };
+
+        div.appendChild(p);
+        div.appendChild(button);
+        fragment.appendChild(div);
+
+        return fragment;
+    }
+}
+
+let contactDetails;
 
 window.onload = () => {
-    const contactList = document.querySelector('.contact-list');
+    contactDetails = new ContactDetails(document.querySelector('#created-contact-details-list'));
 
     document.querySelectorAll('.contact-detail-add-button').forEach(button => {
         button.addEventListener('click', function () {
@@ -13,13 +61,10 @@ window.onload = () => {
             if (value === '') return; // Ignore empty input
 
             // Save new contact detail
-            contactDetails.push({ type, value });
+            contactDetails.addDetails(type, value);
 
             // Create and display a non-editable badge
-            const newBadge = document.createElement('div');
-            newBadge.classList.add('contact-badge');
-            newBadge.innerText = `${type}: ${value}`;
-            contactList.appendChild(newBadge);
+            contactDetails.syncUi();
 
             // Clear input field
             input.value = '';

src/views/createProfile.ejs

@@ -42,8 +42,11 @@
                                                 class="contact-detail-add-button">Añadir</button></div>
                         </div>
                 </div>
-        <div class="contact-list">
+                <div id="created-contact-details-section">
                         <p>Contactos añadidos</p>
+                        <div id="created-contact-details-list">
+
+                        </div>
                 </div>
         </form>
 </body>