Learn how to build an ID card generator using HTML, CSS, and JavaScript. Features include QR code generation and ID card download.
Table of Contents
Creating an ID card generator is a great way to learn about HTML, CSS, and JavaScript. This guide will walk you through the steps to build a simple yet functional ID card generator. We will include features like generating a QR code and allowing users to download their ID cards. Whether you need ID cards for a small event or just want to improve your coding skills, this tutorial will help you achieve that.
Start by creating three files: index.html, styles.css, and script.js. These will contain the structure, style, and functionality of your ID card generator, respectively.
Source Code
Step 1 (HTML Code):
In your index.html file, create the form and basic layout for your ID card. Include placeholders for the event name, person name, and other details. Add a section for displaying the QR code and a button to download the ID card.
HTML Document Declaration:
<!DOCTYPE html>
- This declares the document type and version of HTML being used (HTML5 in this case).
HTML Root Element:
<html lang="en">
- This element is the root of the HTML document, with the language set to English.
Head Section:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Card and Badge Generator</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="styles.css">
</head>
- Meta Charset: Defines the character encoding as UTF-8.
- Meta Viewport: Ensures the page is responsive and scales properly on different devices.
- Title: Sets the title of the webpage shown in the browser tab.
- Link to Google Fonts: Includes the Poppins font from Google Fonts.
- Link to External CSS: Links to a stylesheet styles.css for styling the page.
Body Section:
<body>
<div id="formContainer" class="container">
<h1>Badge Generator</h1>
<form id="badgeForm">
<label for="eventname">Event Name:</label>
<input type="text" id="eventname" required>
<label for="name">Person Name:</label>
<input type="text" id="name" required>
<label for="designation">Designation:</label>
<input type="text" id="designation" required>
<label for="company">Company Name:</label>
<input type="text" id="company" required>
<label for="access">Access Level:</label>
<select id="access" required>
<option value="Attendee">Attendee</option>
<option value="VIP">VIP</option>
</select>
<button type="submit">Generate Badge</button>
</form>
</div>
<div id="badge" class="badge">
<div class="badge-header">
<h1 id="badgeEvent"></h1>
</div>
<div class="badge-body">
<h2 id="badgeName"></h2>
<p id="badgeDesignation"></p>
<h3 id="badgecontainer"></h3>
</div>
<div id="qrcode" class="badge-qr">
</div>
<div class="badge-footer">
<p id="badgeAccess">ATTENDEE</p>
</div>
</div>
<button id="dwnBadge" class="dwnBadge">Download Badge</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.js"></script>
<script src="script.js"></script>
</body>
Form Container (#formContainer):
- Contains a form for inputting badge details (event name, person name, designation, company name, and access level).
- When submitted, this form will generate a badge based on the input values.
Badge Display (#badge):
- Displays the generated badge with placeholders for event name, person name, designation, company name, and access level.
- Includes a QR code section (#qrcode) to be dynamically generated based on the form data.
Download Button (#dwnBadge):
- Allows users to download the generated badge.
JavaScript Libraries:
- jQuery: A popular library for simplifying JavaScript operations.
- jQuery QRCode: To generate QR codes.
- html-to-image: Converts HTML elements to images.
- script.js: An external JavaScript file for additional functionality (e.g., handling form submission, generating the badge, and downloading).
Step 2 (CSS Code):
In the styles.css file, style your ID card to make it look professional. Use CSS to define the size, colors, and fonts. Ensure that your QR code and download button are clearly visible and styled appropriately.
Here's a breakdown of the CSS code:
Global Styles
body {
background-color: #e0e7f1; /* Light blue background color */
font-family: 'Poppins', sans-serif; /* Font family for the entire page */
display: flex; /* Flexbox layout for body */
flex-direction: column; /* Stack child elements vertically */
justify-content: center; /* Center content vertically */
align-items: center; /* Center content horizontally */
min-height: 100vh; /* Minimum height of the viewport */
margin: 0; /* Remove default margins */
padding: 0; /* Remove default padding */
}
- The body is set to have a light blue background and uses the Poppins font. It centers its content both vertically and horizontally.
Container
.container {
background-color: #fff; /* White background color */
padding: 20px; /* Padding inside the container */
border-radius: 15px; /* Rounded corners */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Shadow effect */
width: 100%; /* Full width of its parent */
max-width: 400px; /* Maximum width */
text-align: center; /* Center text inside the container */
}
- The container has a white background, rounded corners, a shadow for depth, and is centered with a maximum width of 400px.
Header in Container
.container h1 {
margin: 0px; /* Remove default margin */
font-size: 2em; /* Large font size */
color: #333; /* Dark gray text color */
}
- The header (h1) inside the container has no margin, a large font size, and a dark gray color.
Form Styles
form {
display: flex; /* Flexbox layout for the form */
flex-direction: column; /* Stack form elements vertically */
}
label {
margin-top: 10px; /* Space above labels */
margin-bottom: 5px; /* Space below labels */
font-size: 1em; /* Font size for labels */
color: #666; /* Light gray text color */
text-align: left; /* Align text to the left */
}
input[type="text"],
select {
padding: 10px; /* Padding inside inputs and selects */
border-radius: 10px; /* Rounded corners */
border: 1px solid #ccc; /* Light gray border */
font-size: 1em; /* Font size */
outline: none; /* Remove default outline */
transition: all 0.3s; /* Smooth transition effect */
width: 100%; /* Full width of parent container */
box-sizing: border-box; /* Include padding and border in element's width and height */
}
input[type="text"]:focus,
select:focus {
border-color: #6A82FB; /* Blue border on focus */
box-shadow: 0 0 5px rgba(106, 130, 251, 0.5); /* Blue shadow on focus */
}
- Forms use flexbox to stack elements. Labels are styled with spacing and font color. Inputs and selects have padding, rounded corners, a light gray border, and change color and shadow when focused.
Button Styles
.container button {
margin-top: 20px; /* Space above the button */
padding: 12px; /* Padding inside the button */
background: #FC5C7D; /* Pink background color */
border: none; /* No border */
border-radius: 10px; /* Rounded corners */
color: white; /* White text color */
font-size: 1em; /* Font size */
cursor: pointer; /* Pointer cursor on hover */
transition: background 0.3s; /* Smooth background color transition */
width: 100%; /* Full width of parent container */
}
.container button:hover {
background: #6A82FB; /* Change background color on hover */
}
- Buttons in the container are styled with padding, a pink background, rounded corners, and change to a blue background on hover.
Hidden Badge
.dwnBadge {
display: none; /* Hidden by default */
margin-top: 20px; /* Space above the badge */
padding: 12px; /* Padding inside the badge */
background: #001f3f; /* Dark blue background color */
border: none; /* No border */
border-radius: 10px; /* Rounded corners */
color: white; /* White text color */
font-size: 1em; /* Font size */
cursor: pointer; /* Pointer cursor on hover */
transition: background 0.3s; /* Smooth background color transition */
}
- .dwnBadge is hidden by default and styled similarly to the button, with dark blue background and rounded corners.
Responsive Design
@media (max-width: 600px) {
.container {
padding: 20px; /* Padding inside the container */
max-width: 90%; /* Maximum width of 90% on small screens */
}
h1 {
font-size: 1.5em; /* Smaller font size on small screens */
}
button {
padding: 10px; /* Smaller padding on small screens */
font-size: 0.9em; /* Smaller font size */
}
input[type="text"],
select {
font-size: 0.9em; /* Smaller font size */
padding: 8px; /* Smaller padding */
}
}
- Adjusts styles for screens smaller than 600px, making the container and text sizes smaller and changing padding.
Badge Styles
.badge {
width: 280px; /* Fixed width */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
overflow: hidden; /* Hide overflow */
background-color: #fff; /* White background color */
text-align: center; /* Center text */
font-family: 'Poppins', Arial, sans-serif; /* Font family */
display: none; /* Hidden by default */
}
- The .badge class styles a badge with a fixed width, rounded corners, shadow, and centered text.
Badge Header
.badge-header {
background-color: #001f3f; /* Dark blue background */
background: linear-gradient(315deg, #313c47, #001f3f); /* Gradient background */
padding: 20px; /* Padding inside the header */
color: white; /* White text color */
position: relative; /* Relative positioning for pseudo-elements */
overflow: hidden; /* Hide overflow */
}
.badge-header::after {
content: ''; /* Empty content */
position: absolute; /* Absolute positioning */
top: -4px; /* Position at the top */
left: -20px; /* Position from the left */
width: 40%; /* Width of 40% */
height: 180%; /* Height of 180% */
background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 30%, transparent 10.01%); /* Radial gradient background */
background-size: 10px 10px; /* Background size */
transform: rotate(52deg); /* Rotate effect */
opacity: 0.8; /* Slight transparency */
}
.badge-header::before {
content: ''; /* Empty content */
position: absolute; /* Absolute positioning */
background-color: #fff; /* White color */
width: 12px; /* Width of 12px */
height: 12px; /* Height of 12px */
border-radius: 20px; /* Rounded corners */
top: 5px; /* Position from the top */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Center horizontally */
}
.badge-header h1 {
margin: 0; /* Remove default margin */
font-size: 18px; /* Font size */
}
- The .badge-header uses a dark blue background with a gradient, includes a radial gradient effect for a decorative background, and has a white dot at the top center.
Badge Body
.badge-body {
padding: 20px; /* Padding inside the body */
display: flex; /* Flexbox layout */
flex-direction: column; /* Stack elements vertically */
}
.badge-body h2 {
margin: 0; /* Remove default margin */
font-size: 22px; /* Font size */
color: #333; /* Dark gray text color */
}
.badge-body p {
font-size: 14px; /* Font size */
margin: 0; /* Remove default margin */
color: #777; /* Light gray text color */
font-weight: 600; /* Bold text */
}
.badge-body h3 {
color: #1d72b8; /* Blue text color */
font-size: 11px; /* Smaller font size */
margin: 0; /* Remove default margin */
}
.badge-qr {
margin: 20px 0; /* Space around QR code */
}
- The .badge-body styles the content area with padding and a vertical flexbox layout. It styles headings and paragraphs with specific colors and sizes.
Badge Footer
.badge-footer {
background-color: #007bff; /* Blue background color */
color: white; /* White text color */
padding: 15px; /* Padding inside the footer */
}
.badge-footer p {
margin: 0; /* Remove default margin */
font-size: 16px; /* Font size */
font-weight: bold; /* Bold text */
}
- The .badge-footer styles the footer with a blue background, white text, and padding. The text inside is bold and larger.
body {
background-color: #e0e7f1;
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
text-align: center;
}
.container h1 {
margin: 0px;
font-size: 2em;
color: #333;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 10px;
margin-bottom: 5px;
font-size: 1em;
color: #666;
text-align: left;
}
input[type="text"],
select {
padding: 10px;
border-radius: 10px;
border: 1px solid #ccc;
font-size: 1em;
outline: none;
transition: all 0.3s;
width: 100%;
box-sizing: border-box;
}
input[type="text"]:focus,
select:focus {
border-color: #6A82FB;
box-shadow: 0 0 5px rgba(106, 130, 251, 0.5);
}
.container button {
margin-top: 20px;
padding: 12px;
background: #FC5C7D;
border: none;
border-radius: 10px;
color: white;
font-size: 1em;
cursor: pointer;
transition: background 0.3s;
width: 100%;
}
.container button:hover {
background: #6A82FB;
}
.dwnBadge{
display: none;
margin-top: 20px;
padding: 12px;
background: #001f3f;
border: none;
border-radius: 10px;
color: white;
font-size: 1em;
cursor: pointer;
transition: background 0.3s;
}
@media (max-width: 600px) {
.container {
padding: 20px;
max-width: 90%;
}
h1 {
font-size: 1.5em;
}
button {
padding: 10px;
font-size: 0.9em;
}
input[type="text"],
select {
font-size: 0.9em;
padding: 8px;
}
}
.badge {
width: 280px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
background-color: #fff;
text-align: center;
font-family: 'Poppins', Arial, sans-serif;
display: none;
}
.badge-header {
background-color: #001f3f;
background: linear-gradient(315deg, #313c47, #001f3f);
padding: 20px;
color: white;
position: relative;
overflow: hidden;
}
.badge-header::after {
content: '';
position: absolute;
top: -4px;
left: -20px;
width: 40%;
height: 180%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 30%, transparent 10.01%);
background-size: 10px 10px;
transform: rotate(52deg);
opacity: 0.8;
}
.badge-header::before {
content: '';
position: absolute;
background-color: #fff;
width: 12px;
height: 12px;
border-radius: 20px;
top: 5px;
left: 50%;
transform: translateX(-50%);
}
.badge-header h1 {
margin: 0;
font-size: 18px;
}
.badge-body {
padding: 20px;
display: flex;
flex-direction: column;
}
.badge-body h2 {
margin: 0;
font-size: 22px;
color: #333;
}
.badge-body p {
font-size: 14px;
margin: 0;
color: #777;
font-weight: 600;
}
.badge-body h3 {
color: #1d72b8;
font-size: 11px;
margin: 0;
}
.badge-qr {
margin: 20px 0;
}
.badge-footer {
background-color: #007bff;
color: white;
padding: 15px;
}
.badge-footer p {
margin: 0;
font-size: 16px;
font-weight: bold;
} Step 3 (JavaScript Code):
In the script.js file, write JavaScript to handle the generation of the QR code and the functionality of the download button. Use a QR code library to create the QR code based on user input. Add an event listener to the download button to allow users to save their ID card as a file.
Here's a step-by-step breakdown:
Getting DOM Elements:
const badgeForm = document.getElementById('badgeForm');
const downloadBadge = document.getElementById('dwnBadge');
- badgeForm targets the form with the ID badgeForm.
- downloadBadge targets the element (a button) with the ID dwnBadge.
Form Submission Handling:
badgeForm.addEventListener('submit', function (event) {
event.preventDefault();
- Adds an event listener to the form that triggers when the form is submitted.
- event.preventDefault(); stops the form from submitting normally, which prevents a page reload.
Hide Form and Gather Form Data:
const formcontainer = document.getElementById('formContainer');
formcontainer.style.display = 'none';
const eventname = document.getElementById('eventname').value;
const name = document.getElementById('name').value;
const designation = document.getElementById('designation').value;
const company = "@" + document.getElementById('company').value;
const access = document.getElementById('access').value;
- Hides the form container by setting its display to none.
- Retrieves the values from the form fields.
Generate Unique ID and Update Badge Information:
const id = 'ID' + Math.floor(Math.random() * 10000).toString().padStart(4, '0');
$('#badgeEvent').text(eventname);
$('#badgeName').text(name);
$('#badgeDesignation').text(designation);
$('#badgecontainer').text(company);
$('#badgeAccess').text(access);
- Generates a random ID with a prefix 'ID' and ensures it's a 4-digit number.
- Uses jQuery to update the badge elements with the retrieved form values.
Generate and Display QR Code:
$('#qrcode').empty();
$('#qrcode').qrcode({
text: `ID: ${id}\Event: ${eventname}\nName: ${name}\nDesignation: ${designation}\nCompany: ${company}\nAccess: ${access}`,
width: 128,
height: 128
});
- Clears any previous QR code.
- Generates a new QR code with the badge information.
Show Badge and Download Button:
$('#badge').css('display', 'block');
$('#dwnBadge').css('display', 'block');
- Displays the badge and download button.
Badge Download Handling:
downloadBadge.addEventListener('click', function (e) { e.preventDefault(); const badgeElement = document.getElementById('badge'); htmlToImage.toPng(badgeElement) .then(function (dataUrl) {const link = document.createElement('a');
link.download = 'badge.png';
link.href = dataUrl;
link.click();
})
.catch(function (error) {
console.error('Error converting HTML to image:', error);
});
});
- Adds an event listener to the download button.
- Converts the badge element to a PNG image using the htmlToImage library.
- Creates a link to download the image and programmatically clicks it to start the download.
- Logs any errors that occur during the conversion process.
const badgeForm = document.getElementById('badgeForm');
const downloadBadge = document.getElementById('dwnBadge');
badgeForm.addEventListener('submit', function (event) {
event.preventDefault();
const formcontainer = document.getElementById('formContainer')
formcontainer.style.display = 'none';
const eventname = document.getElementById('eventname').value;
const name = document.getElementById('name').value;
const designation = document.getElementById('designation').value;
const company = "@" + document.getElementById('company').value;
const access = document.getElementById('access').value;
const id = 'ID' + Math.floor(Math.random() * 10000).toString().padStart(4, '0');
$('#badgeEvent').text(eventname);
$('#badgeName').text(name);
$('#badgeDesignation').text(designation);
$('#badgecontainer').text(company);
$('#badgeAccess').text(access);
$('#qrcode').empty();
$('#qrcode').qrcode({
text: `ID: ${id}\Event: ${eventname}\nName: ${name}\nDesignation: ${designation}\nCompany: ${company}\nAccess: ${access}`,
width: 128,
height: 128
});
$('#badge').css('display', 'block');
$('#dwnBadge').css('display', 'block');
});
downloadBadge.addEventListener('click', function (e) {
e.preventDefault();
const badgeElement = document.getElementById('badge');
htmlToImage.toPng(badgeElement)
.then(function (dataUrl) {
const link = document.createElement('a');
link.download = 'badge.png';
link.href = dataUrl;
link.click();
})
.catch(function (error) {
console.error('Error converting HTML to image:', error);
});
});Final Output:
Conclusion:
Building an ID card generator with HTML, CSS, and JavaScript is a rewarding project that enhances your coding skills. By following these steps, you can create a functional tool that includes features like QR code generation and a download option. This guide provides a solid foundation to get started, and you can customize and expand your generator to suit your needs.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: id card generator with qr code html css javascript, create qr code id card using javascript, generate id cards with qr codes tutorial, id card generator, qr code generator, badge generator, identification card generator, id card generator online, id card online maker
End of the article
