problem to create a customize qr code generator when i generate qr code for vcard then it generate color qr code but when i generate qr code for url then it generate default qr code color (black and white) how i correct it

[Mackmaxx]

Select Topic Area

Show & Tell

Feature Area

Issues

Body

it is my qr.html page
`

<title>QR Code Generator</title>

<style>
    /* Your existing styles here */
    body {
font-family: Arial, sans-serif;

}

.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

form {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
}

input {
margin-bottom: 15px;
padding: 8px;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

#qrcode {
margin-top: 20px;
}

    /* Add a new style for hiding the URL form initially */
    #urlForm {
        display: none;
    }
</style>

QR Code Generator

    <!-- Buttons for switching between vCard and URL QR code generation -->
    <button onclick="showVCardForm()">vCard QR Code</button>
    <button onclick="showURLForm()">WebURL QR Code</button>

    <!-- vCard Form -->
    <form id="vCardForm">
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" required>

        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" required>

        <label for="company">Company:</label>
        <input type="text" id="company" required>

        <label for="designation">Designation:</label>
        <input type="text" id="designation" required>

        <label for="email">Email:</label>
        <input type="email" id="email" required>
        
        <label for="mobile">Mobile Number:</label>
        <input type="tel" id="mobile" required>

        <label for="address">Address:</label>
        <input type="text" id="address" required>

        <label for="notes">Notes:</label>
        <textarea id="notes"></textarea>

        <label for="qrColor">QR Code Color:</label>
        <input type="color" id="qrColor" value="#000000" required>
        
        <button type="button" onclick="generateVCardQR()">Generate QR Code</button>
        <button type="button" onclick="saveQRCode()">Save QR Code</button>
    </form>

    <!-- URL Form -->
    <form id="urlForm">
        <label for="urlInput">Website URL:</label>
        <input type="url" id="urlInput" required>

        <label for="qrColor">QR Code Color:</label>
        <input type="color" id="qrColor" value="#000000" required>
        <button type="button" onclick="generateURLQR()">Generate QR Code</button>
        <button type="button" onclick="saveQRCode()">Save QR Code</button>
    </form>

    <!-- Display area for QR codes -->
    <div id="qrcode"></div>
</div>

<!-- Include your existing script files -->
<script src="qrcode.min.js"></script>
<script src="script1.js"></script>

` it is my script1.js `var qrCodeInstance = null; document.getElementById('vCardForm').style.display = 'flex';

function showVCardForm() {
document.getElementById('vCardForm').style.display = 'flex';
document.getElementById('urlForm').style.display = 'none';
resetQRCodeInstance();
}

function showURLForm() {
document.getElementById('vCardForm').style.display = 'none';
document.getElementById('urlForm').style.display = 'flex';
resetQRCodeInstance();
}

function resetQRCodeInstance() {
qrCodeInstance = null;
document.getElementById('qrcode').innerHTML = ''; // Clear previous QR code
}

function generateVCardQR() {
var first_name = document.getElementById('first_name').value;
var last_name = document.getElementById('last_name').value;
var company = document.getElementById('company').value;
var designation = document.getElementById('designation').value;
var email = document.getElementById('email').value;
var mobile = document.getElementById('mobile').value;
var address = document.getElementById('address').value;
var notes = document.getElementById('notes').value;

// Check if all fields are filled
if (!first_name || !email || !address || !mobile || !company) {
    alert("Please fill in all fields before generating the QR code.");
    return;
}

// Check if the QR code instance already exists
if (!qrCodeInstance) {
    // Create a vCard string
    var vCardData = `BEGIN:VCARD\nVERSION:3.0\nFN:${first_name} ${last_name}\nORG:${company}\nTITLE:${designation}\nEMAIL:${email}\nADR:${address}\nTEL:${mobile}\nNOTE:${notes}\nEND:VCARD`;

    // Get the chosen color
    var color = document.getElementById('qrColor').value;

    // Encode the vCard data in QR Code with the specified color
    qrCodeInstance = new QRCode(document.getElementById("qrcode"), {
        text: vCardData || url,
        colorDark: color,
        width: 128,
        height: 128
    });
} else {
    alert("QR code has already been generated for the current input. Change input to generate a new QR code.");
}

}

var urlFormLastValue = ''; // Variable to store the last entered URL

function generateURLQR() {
var urlInput = document.getElementById("urlInput");
var url = urlInput.value;

// Ensure there is a valid URL
if (isValidURL(url)) {
    // Check if the URL input has changed
    if (url !== urlFormLastValue) {
        // Generate QR code only if the input has changed
        urlFormLastValue = url;

        // Get the chosen color
        var color = document.getElementById('qrColor').value;

        // Generate QR code with the specified color
        qrCodeInstance = new QRCode(document.getElementById("qrcode"), {
            text: url,
            colorDark: color,
            width: 128,
            height: 128
        });

    } else {
        alert("QR code has already been generated for the current input. Change input to generate a new QR code.");
    }
} else {
    alert("Please enter a valid URL");
}

}

function isValidURL(str) {
var pattern = new RegExp('^(https?:\/\/)?' + // protocol
'(((a-z\d)\.)+[a-z]{2,}|' + // domain name
'((\d{1,3}\.){3}\d{1,3}))' + // OR ip (v4) address
'(\:\d+)?(\/[-a-z\d%_.~+])' + // port and path
'(\?[;&a-z\d%_.~+=-])?' + // query string
'(\#[-a-z\d_]*)?$', 'i'); // fragment locator
return !!pattern.test(str);
}

function saveQRCode() {
// Get the QR code image as a data URL
var qrCodeImage = document.getElementById("qrcode").getElementsByTagName('img')[0].src;

// Fetch the image data
fetch(qrCodeImage)
    .then(response => response.blob())
    .then(blob => {
        // Create a Blob object and a link element
        var downloadLink = document.createElement("a");
        downloadLink.href = URL.createObjectURL(blob);
        downloadLink.download = "qrcode.png";

        // Append the link to the document
        document.body.appendChild(downloadLink);

        // Trigger a click on the link to initiate the download
        downloadLink.click();

        // Remove the link from the document
        document.body.removeChild(downloadLink);
    })
    .catch(error => console.error('Error fetching QR code image:', error));

}`

https://tallyprimeeducation.in/qrtest/Qrpage.html

Guidelines

• I have read the above statement and can confirm my post is relevant to the GitHub feature areas Issues and/or Projects.

[queenofcorgis]

Thanks for posting in the GitHub Community, @Mackmaxx !

We're happy you're here. You are more likely to get a useful response if you are posting your question in the applicable category, the Projects and Issues category is solely related to conversations around the GitHub products Issues and Projects.

We’ve moved your post to our Programming Help 🧑‍💻 category, which is more appropriate for this type of discussion.

Please review our guidelines about the Programming Help category for more information.