Online Business Card Maker
Certainly! Below is a complete responsive code for an online business card maker with HTML, CSS, and JavaScript. It includes fields for name, position, email, phone number, image, and logo section. The background color is randomized with colorful styling. Snap.svg library is used for creating and manipulating SVG elements.
```html
Business Card Maker
```
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
.card {
width: 300px;
height: 200px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#logo {
width: 50px;
height: 50px;
fill: #fff;
margin-bottom: 10px;
}
.info {
text-align: center;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}
```
```javascript
function generateCard() {
// Generate random background color
var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
// Update background color
document.getElementById('businessCard').style.backgroundColor = randomColor;
// Generate random logo using Snap.svg
var s = Snap("#logo");
s.clear();
var circle = s.circle(50, 50, 25);
circle.attr({
fill: "#FFA500"
});
// Update other details
document.getElementById('name').innerText = "John Doe";
document.getElementById('position').innerText = "CEO";
document.getElementById('email').innerText = "john@example.com";
document.getElementById('phone').innerText = "123-456-7890";
}
function downloadCard() {
// Create a clone of the business card
var cardClone = document.getElementById('businessCard').cloneNode(true);
// Remove buttons from cloned card
var buttons = cardClone.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].remove();
}
// Create an anchor element with download attribute
var link = document.createElement('a');
link.download = 'business_card.png';
// Convert SVG to a Blob
var svgData = new XMLSerializer().serializeToString(cardClone);
var blob = new Blob([svgData], {type: 'image/svg+xml'});
// Create URL for the Blob
var url = URL.createObjectURL(blob);
link.href = url;
// Append anchor to the body and click it programmatically
document.body.appendChild(link);
link.click();
// Remove anchor from the body
document.body.removeChild(link);
}
```
This code will create a responsive business card maker with random background colors, a logo, and the ability to download the generated card as an image.
John Doe
CEO
john@example.com
123-456-7890
.jpg)
.jpg){kind=icon}
.jpg)
No comments