Digital Business Card Builder

Build Your Digital Business Card

Create a beautiful and professional business card for your brand.

document.getElementById("cardForm").addEventListener("submit", function(e) { e.preventDefault(); // Get form data const profileImage = document.getElementById("profileImage").files[0]; const coverImage = document.getElementById("coverImage").files[0]; const siteTitle = document.getElementById("siteTitle").value; const mainHeading = document.getElementById("mainHeading").value; const paragraph = document.getElementById("paragraph").value; const actionIcons = document.getElementById("actionIcons").value; const actionButtonText = document.getElementById("actionButton").value; const actionLink = document.getElementById("actionLink").value; // Display the preview document.get // Display the preview document.getElementById("previewSiteTitle").textContent = siteTitle; document.getElementById("previewMainHeading").textContent = mainHeading; document.getElementById("previewParagraph").textContent = paragraph; document.getElementById("previewActionButton").textContent = actionButtonText; document.getElementById("previewActionButton").href = actionLink; // Set the images const readerProfile = new FileReader(); readerProfile.onload = function(e) { document.getElementById("previewProfileImage").src = e.target.result; }; readerProfile.readAsDataURL(profileImage); const readerCover = new FileReader(); readerCover.onload = function(e) { document.getElementById("previewCoverImage").src = e.target.result; }; readerCover.readAsDataURL(coverImage); // Show the icons based on selected action document.querySelectorAll('.icons i').forEach(icon => icon.style.display = 'none'); // Hide all icons first if (actionIcons === "phone") { document.getElementById("previewPhone").style.display = 'inline-block'; } else if (actionIcons === "location") { document.getElementById("previewLocation").style.display = 'inline-block'; } else if (actionIcons === "email") { document.getElementById("previewEmail").style.display = 'inline-block'; } else if (actionIcons === "website") { document.getElementById("previewWebsite").style.display = 'inline-block'; } // Show card preview document.getElementById("cardPreview").classList.remove("hidden"); });