ID Card Generator with QR Code – HTML CSS & JavaScript

ID Card Generator with QR Code - HTML CSS & JavaScript

Learn to design and develop an interactive ID card generator that automatically generates QR codes and enables instant downloads.

Building an ID card generator is an excellent project for strengthening your HTML, CSS, and JavaScript skills while creating a practical web application. In this tutorial, you will learn how to develop a simple yet effective ID card generator that allows users to create personalized ID cards, generate QR codes, and download the final output with ease. Whether you are designing ID cards for events, educational purposes, or personal projects, this step-by-step guide will help you understand key front-end development concepts and enhance your web development expertise.

Copy Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID Card Generator with QR Code</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>
<body>
    <div id="formContainer" class="section">
        <h1>ID Card Generator</h1>
        <form id="idForm">
            <label for="eventname">Event Title:</label>
            <input type="text" id="eventTitle" required>

            <label for="name">Participant Name:</label>
            <input type="text" id="participant" required>
            
            <label for="designation">Participant Role:</label>
            <input type="text" id="designation" required>
            
            <label for="company">Company Name:</label>
            <input type="text" id="company" required>
            
            <label for="access">Access Rights:</label>
            <select id="rights" required>
                <option value="Attendee">Guest</option>
                <option value="VIP">VIP</option>
            </select>
            <button type="submit">Generate ID Card</button>
        </form>
    </div>

    <div id="idCard" class="idCard">
        <div class="idCard-header">
            <h1 id="idEvent"></h1>
        </div>
        <div class="idCard-body">
            <h2 id="idName"></h2>
            <p id="idDesignation"></p>
            <h3 id="idcontainer"></h3>
        </div>
        <div id="qrcode" class="idCard-qr">
        </div>
        <div class="idCard-footer">
            <p id="idRights">ATTENDEE</p>
        </div>
    </div>

    <button id="dwnCard" class="dwnCard">Download ID Card</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>
</html>

Copy Text

body {
  /*background-color: #e0e7f1;*/
  background-color: rgb(134, 228, 245);
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.section {
  background-color: #1f61fb;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.section 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:rgb(254, 251, 251);
  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);
}

.section 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%;
}

.section button:hover {
  background: #6A82FB;
}

.dwnCard{
  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) {
  .section {
      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;
  }
}

.idCard {
  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;
}

.idCard-header {
background-color: #001f3f;
background: linear-gradient(315deg, #313c47, #001f3f);
padding: 20px;
color: white;
position: relative;
overflow: hidden;
}

.idCard-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;
}

.idCard-header::before {
content: '';
position: absolute;
background-color: #fff;
width: 12px;
height: 12px;
border-radius: 20px;
top: 5px;
left: 50%;
transform: translateX(-50%);
}

.idCard-header h1 {
  margin: 0;
  font-size: 18px;
}

.idCard-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.idCard-body h2 {
  margin: 0;
  font-size: 22px;
  color: #333;
}

.idCard-body p {
  font-size: 14px;
  margin: 0;
  color: #777;
  font-weight: 600;
}

.idCard-body h3 {
  color: #1d72b8;
  font-size: 11px;
  margin: 0;
}

.idCard-qr {
  margin: 20px 0;
}

.idCard-footer {
  background-color: #007bff;
  color: white;
  padding: 15px;
}

.idCard-footer p {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

Copy Text

const idForm = document.getElementById('idForm');
const downloadCard = document.getElementById('dwnCard');

idForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const formcontainer = document.getElementById('formContainer')
  formcontainer.style.display = 'none';
  const eventTitle = document.getElementById('eventTitle').value;
  const participant = document.getElementById('participant').value;
  const designation = document.getElementById('designation').value;
  const company = "@" + document.getElementById('company').value;
  const rights = document.getElementById('rights').value;

  const id = 'ID' + Math.floor(Math.random() * 10000).toString().padStart(4, '0');

  $('#idEvent').text(eventTitle);
  $('#idName').text(participant);
  $('#idDesignation').text(designation);
  $('#idcontainer').text(company);
  $('#idRights').text(rights);

  $('#qrcode').empty();

  $('#qrcode').qrcode({
    text: `ID: ${id}\Event: ${eventTitle}\nName: ${participant}\nDesignation: ${designation}\nCompany: ${company}\nAccess: ${rights}`,
    width: 128,
    height: 128
  });

  $('#idCard').css('display', 'block');
  $('#dwnCard').css('display', 'block');
});

downloadCard.addEventListener('click', function (e) {
  e.preventDefault();
  const idcardElement = document.getElementById('idCard');
  htmlToImage.toPng(idcardElement)
    .then(function (dataUrl) {
      const link = document.createElement('a');
      link.download = 'card.png';
      link.href = dataUrl;
      link.click();
    })
    .catch(function (error) {
      console.error('Error converting HTML to image:', error);
    });
});