add contact details on frontend

src/public/css/seca.css

@@ -0,0 +1,6 @@
+.badge {
+    border: 2px solid black;
+    border-radius: 10px;
+    margin: 5px;
+    padding: 5px;
+}

src/public/javascript/createProfile.js

@@ -0,0 +1,28 @@
+const contactDetails = [];
+
+window.onload = () => {
+    const contactList = document.querySelector('.contact-list');
+
+    document.querySelectorAll('.contact-detail-add-button').forEach(button => {
+        button.addEventListener('click', function () {
+            const badge = this.parentElement;
+            const type = badge.getAttribute('data-type');
+            const input = badge.querySelector('input');
+            const value = input.value.trim();
+
+            if (value === '') return; // Ignore empty input
+
+            // Save new contact detail
+            contactDetails.push({ 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);
+
+            // Clear input field
+            input.value = '';
+        });
+    });
+};