Online Business Card Maker

 

 

NathTech’s Tools ,

Online Business Card Maker ,

This tool provides an interface for an Online Business Card Making with input fields for name, position, email, phone number, and image/logo upload sections. Users can generate their business card by clicking the “Generate Business Card” button. The background color of the business card is randomized, and the Snap.svg library is used to generate and display the business card.

 

// Random background color const randomColor = () => '#' + Math.floor(Math.random() * 16777215).toString(16);

// Generate SVG for business card const svg = Snap('#background'); const width = svg.node.offsetWidth; const height = svg.node.offsetHeight; const backgroundColor = randomColor(); svg.rect(0, 0, width, height).attr({ fill: backgroundColor });

// Add text elements svg.text(width / 2, height / 4, name).attr({ fill: 'white', 'font-size': 20, 'text-anchor': 'middle' }); svg.text(width / 2, height / 2, position).attr({ fill: 'white', 'font-size': 16, 'text-anchor': 'middle' }); svg.text(width / 2, height * 3 / 4, `${email} | ${phone}`).attr({ fill: 'white', 'font-size': 14, 'text-anchor': 'middle' });

// Add image and logo const reader = new FileReader(); reader.onload = () => { svg.image(reader.result, width / 4, height / 6, width / 2, height / 3); }; if (imageFile) reader.readAsDataURL(imageFile);

if (logoFile) { const reader2 = new FileReader(); reader2.onload = () => { svg.image(reader2.result, width * 3 / 4 - 30, height * 5 / 6 - 30, 60, 60); }; reader2.readAsDataURL(logoFile); } };

document.getElementById('generateBtn').addEventListener('click', generateBusinessCard);