Dynamic Student ID Card with HTML, CSS, and jQuery

0
71

Creating dynamic tools for everyday tasks has become an essential aspect of modern web development. One such interesting and functional application is generating dynamic student ID cards. With HTML, CSS, and jQuery, we can create a responsive, user-friendly tool that allows students or institutions to generate professional-looking ID cards instantly.

This blog introduces a dynamic Student ID Card Generator, which can be customized and integrated into various systems, offering a sleek and efficient solution.

Follow this video for complete guidance :

Full Source Code

<!DOCTYPE html>
<html>
<head>
    <title>Student ID Generator</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .id-card {
            width: 340px;
            height: 520px;
            padding: 20px;
            border-radius: 15px;
            background: linear-gradient(135deg, #0a4275 0%, #1266f1 100%);
            color: white;
            font-family: Arial, sans-serif;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        .university-logo {
            text-align: center;
            margin-bottom: 15px;
            font-size: 18px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .photo-container {
            position: relative;
            width: 130px;
            height: 150px;
            margin: 0 auto;
            background: white;
            border: 5px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            overflow: hidden;
        }

        .photo-placeholder {
            width: 100%;
            height: 100%;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
        }

        .student-info {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }

        .student-info p {
            margin: 10px 0;
            font-size: 14px;
            border-bottom: 1px solid rgba(255,255,255,0.2);
            padding-bottom: 5px;
        }

        .student-info strong {
            color: rgba(255,255,255,0.8);
            font-weight: 500;
            width: 100px;
            display: inline-block;
        }

    </style>
</head>
<body class="bg-light">
    <div class="container py-5">
        <div class="row">
            <!-- Input Form -->
            <div class="col-md-6">
                <div class="card p-4">
                    <h3 class="mb-4">Student ID Generator</h3>
                    <form id="idForm">
                        <div class="mb-3">
                            <label class="form-label">University Name</label>
                            <input type="text" class="form-control" id="university" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Full Name</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Student ID</label>
                            <input type="text" class="form-control" id="studentId" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Course</label>
                            <input type="text" class="form-control" id="course" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Valid Until</label>
                            <input type="date" class="form-control" id="validUntil" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Photo</label>
                            <input type="file" class="form-control" id="photo" accept="image/*">
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Preview Card -->
            <div class="col-md-6">
                <div class="id-card mx-auto">
                    <div class="university-logo" id="universityPreview">
                        -
                    </div>
                    <div class="text-center">
                        <h5 class="mb-4">STUDENT CARD</h5>
                        <div class="photo-container">
                            <div class="photo-placeholder" id="photoPreview">
                                <span>PHOTO</span>
                            </div>
                        </div>
                    </div>
                    <div class="student-info">
                        <p><strong>Name:</strong> <span id="namePreview">-</span></p>
                        <p><strong>Student ID:</strong> <span id="studentIdPreview">-</span></p>
                        <p><strong>Course:</strong> <span id="coursePreview">-</span></p>
                        <p style="border-bottom:none;"><strong>Valid Until:</strong> <span id="validUntilPreview">-</span></p>
                    </div>
                </div>
                <div class="text-center mt-4">
                    <button class="btn btn-primary" id="downloadBtn">Download ID Card</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        $(document).ready(function() {
            // Real-time preview
            $('#name').on('input', function() {
                $('#namePreview').text($(this).val() || '-');
            });
            $("#university").on('input',function(){
                $("#universityPreview").text($(this).val() || '-');
            });
            
            $('#studentId').on('input', function() {
                $('#studentIdPreview').text($(this).val() || '-');
            });
            
            $('#course').on('input', function() {
                $('#coursePreview').text($(this).val() || '-');
            });
            
            $('#validUntil').on('change', function() {
                $('#validUntilPreview').text($(this).val() || '-');
            });

            // Photo preview
            $('#photo').on('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    let reader = new FileReader();
                    reader.onload = function(e) {
                        $('#photoPreview').css({
                            'background-image': 'url(' + e.target.result + ')',
                            'background-size': 'cover',
                            'background-position': 'center'
                        }).empty();
                    }
                    reader.readAsDataURL(e.target.files[0]);
                }
            });

            // Download functionality
            $('#downloadBtn').click(function() {
                html2canvas(document.querySelector('.id-card')).then(canvas => {
                    let link = document.createElement('a');
                    link.download = 'student-id.png';
                    link.href = canvas.toDataURL();
                    link.click();
                });
            });
        });
    </script>
</body>
</html>

Why Build a Dynamic Student ID Card Generator?

Managing student IDs can be tedious, especially for educational institutions handling large numbers of students. A dynamic ID card generator simplifies this process by:

  • Efficiency: Automating the creation of IDs reduces manual effort and errors.
  • Personalization: Customizable fields like name, ID, course, and photo allow for a tailored experience.
  • Cost-Effective: Eliminates the need for external tools or services.
ALSO READ  Netflix clone design using HTML and CSS

Features of the ID Card Generator

  • Interactive Form: The generator starts with a form where users can input their details:
    • Full Name
    • Student ID
    • Course
    • Photo Upload
  • Live Preview: A real-time preview reflects the entered details, ensuring accuracy before downloading.
  • Responsive Design: The layout is optimized for various screen sizes, ensuring accessibility across devices.
  • Professional Design: The ID card design features a modern and minimalistic look, with gradients, rounded corners, and shadow effects.
  • Download Functionality: Once the user inputs their data, they can download the ID card as an image file for printing or sharing.

User Experience Highlights

The tool is designed with user experience in mind, offering:

  • Ease of Use: The intuitive form layout ensures users can input data effortlessly.
  • Visual Appeal: The ID card includes vibrant gradients and shadow effects, enhancing its professional appearance.
  • Real-Time Feedback: Any changes made in the form are immediately reflected in the preview.

Application Scenarios

The dynamic ID card generator can be used in various contexts:

  • Educational Institutions: Automate ID generation for students during admissions or events.
  • Workshops and Conferences: Quickly create participant badges.
  • Online Courses: Provide students with personalized ID cards upon enrollment.

How It Works

The generator combines the power of HTML for structure, CSS for styling, and jQuery for interactivity. Here’s an overview of how it functions:

  • HTML Form:
    • Captures user inputs for name, ID, course, and photo.
    • Validates fields to ensure data completeness.
  • CSS Styling:
    • Applies a vibrant design to both the form and ID card.
    • Ensures a professional and clean visual experience.
  • jQuery and Dynamic Updates:
    • Processes form inputs to update the ID card preview in real time.
    • Handles the photo upload and integrates it into the card design.
    • Utilizes the html2canvas library to enable downloading the ID card as an image.
ALSO READ  Rotate Car Using JQuery

Enhancements and Customizations

The tool is highly adaptable. Here are some ways you can enhance its functionality:

  • Additional Fields: Add fields like email, contact number, or address for more detailed IDs.
  • Styling Variations: Offer multiple card designs or themes for users to choose from.
  • QR Code Integration: Include a QR code that links to the student’s profile or academic records.
  • Database Connectivity: Connect the form to a database for bulk ID generation and storage.

A dynamic Student ID Card Generator is a practical and innovative tool for managing student identification needs. Its seamless integration of HTML, CSS, and jQuery ensures functionality, while the visually appealing design enhances its usability. Whether for schools, colleges, or online learning platforms, this tool provides an efficient, customizable solution for creating professional ID cards.

Are you ready to build your own dynamic ID card generator? Share your thoughts, use cases, or improvements in the comments below!

Comments are closed.