How to make a qr code generator for free

0

Features Implemented:
Responsive 4-Column Layout:

  • Uses CSS Grid for desktop view (4 columns)
  • Switches to 2 columns on medium screens (tablets)
  • Stacks to 1 column on mobile devices

Profile Column:

  • Circular profile image with border
  • Centered with caption
  • Soft shadow and hover effect

Basic Details Column:

  • Student name as heading
  • Field of study as subheading
  • Short bio paragraph

Portfolio Column:

  • List of 5 projects with clickable links
  • Hover effects for better interactivity

Contact Column:

  • Contact form with name, email, and message fields
  • JavaScript alert on form submission
  • Download CV button with distinct styling

Design Elements:

  • Clean, minimal aesthetic
  • Soft shadows and rounded corners
  • Hover animations for interactivity
  • Professional color scheme
  • Legible typography

Technical Implementation:

  • Pure HTML, CSS, and JavaScript (no external libraries)
  • CSS Grid for layout
  • Media queries for responsiveness
  • Simple form validation and feedback

The placeholder image can be replaced with an actual student photo by changing the src attribute in the profile image tag. Similarly, the download CV link can be updated to point to an actual PDF file.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QR Code Generator</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script> </head> <body> <div class="container"> <h1>QR Code Generator</h1> <div class="input-group"> <label for="qrInput">Enter URL or Text</label> <input type="text" id="qrInput" placeholder="https://example.com or any text"> </div> <div class="button-group"> <button id="generateBtn">Generate QR Code</button> <button id="downloadBtn">Download QR Code</button> </div> <div class="error" id="errorMsg">Please enter some text or URL</div> <div class="qr-container" id="qrContainer"> <div id="qrcode"></div> </div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 30px;
            width: 100%;
            max-width: 500px;
        }

        h1 {
            color: #333;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            text-align: center;
        }

        .input-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #555;
            font-weight: 500;
        }

        input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        input:focus {
            outline: none;
            border-color: #4a90e2;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
        }

        button {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
        }

        button:hover {
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        #generateBtn {
            background-color: #4a90e2;
            color: white;
        }

        #generateBtn:hover {
            background-color: #3a7bc8;
        }

        #downloadBtn {
            background-color: #34a853;
            color: white;
            display: none;
        }

        #downloadBtn:hover {
            background-color: #2d9248;
        }

        .qr-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            padding: 20px;
            border-radius: 8px;
            background-color: #f9f9f9;
        }

        #qrcode {
            margin-bottom: 15px;
        }

        .error {
            color: #ea4335;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
            display: none;
        }

        @media (max-width: 480px) {
            .container {
                padding: 20px;
            }

            .button-group {
                flex-direction: column;
            }
        }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension. 


document.addEventListener('DOMContentLoaded', function() {
            const qrInput = document.getElementById('qrInput');
            const generateBtn = document.getElementById('generateBtn');
            const downloadBtn = document.getElementById('downloadBtn');
            const qrContainer = document.getElementById('qrcode');
            const errorMsg = document.getElementById('errorMsg');
            const containerDiv = document.getElementById('qrContainer');
            
            let qrCode = null;
            
            generateBtn.addEventListener('click', generateQRCode);
            downloadBtn.addEventListener('click', downloadQRCode);
            
            function generateQRCode() {
                const inputText = qrInput.value.trim();
                
                if (!inputText) {
                    errorMsg.style.display = 'block';
                    containerDiv.style.display = 'none';
                    downloadBtn.style.display = 'none';
                    return;
                }
                
                errorMsg.style.display = 'none';
                containerDiv.style.display = 'flex';
                downloadBtn.style.display = 'inline-block';
                
                // Clear previous QR code
                qrContainer.innerHTML = '';
                
                // Generate new QR code
                qrCode = new QRCode(qrContainer, {
                    text: inputText,
                    width: 200,
                    height: 200,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
            }
            
            function downloadQRCode() {
                if (!qrContainer.hasChildNodes()) return;
                
                const canvas = qrContainer.querySelector('canvas');
                if (!canvas) return;
                
                const link = document.createElement('a');
                link.download = 'qrcode.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            }
            
            // Generate QR code on Enter key press
            qrInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    generateQRCode();
                }
            });
        });
We hope you Like this Post Thanks for coming Here
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied