How do I fix this code block on squarespace?

Question

1.00/5 (3 votes)

See more:

So basically my idea is to make a generator, that generates a qr code, an image and some text all in one go. The problems only started when I wanted to add more customization to it such as, text & background color, borders and even positioning. I couldn't get any help from AI so if anyone is interested in helping it is much appreciated. Thanks.

Here is the code: (it's what chat gpt gave me)

!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom QR Code Generator</title>
  <!-- Include Bootstrap CSS for styling -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <!-- Include Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Jost', sans-serif;
      background-color: #f8f9fa;
      padding: 20px;
    }
    .form-container {
      max-width: 800px;
      margin: 0 auto;
      background-color: #ffffff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }
    .preview-container {
      margin-top: 30px;
      text-align: center;
    }
    .plastic-stand {
      background-color: #f0f0f0;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      max-width: 400px; /* Limit size of plastic stand */
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative; /* For text positioning */
    }
    .qr-code-preview {
      max-width: 200px; /* Limit size of QR code */
      max-height: 200px;
      display: block;
      margin-bottom: 10px;
      border: 1px solid #ccc; /* Default border */
    }
    .logo-preview {
      max-width: 150px;
      max-height: 150px;
      display: block;
      margin-top: 10px;
      border: 1px solid #ccc; /* Default border */
    }
    .text-container {
      position: absolute;
      bottom: 10px;
      width: 100%;
      text-align: center;
    }
    .text-preview {
      font-size: 14px;
      font-weight: bold;
      margin-top: 5px;
    }
  </style>
</head>
<body>

<div class="form-container">
  <h2 class="text-center mb-4">Generate Your Custom QR Code</h2>
  
  <form id="qr-form">
    <div class="form-group">
      <label for="business-link">Enter Your Business Link:</label>
      <input type="url" class="form-control" id="business-link" placeholder="https://example.com" required>
    </div>
    <div class="form-group">
      <label for="logo-upload">Upload Your Business Logo:</label>
      <input type="file" class="form-control-file" id="logo-upload" accept=".png, .jpg, .jpeg" required>
      <small id="file-name-help" class="form-text text-muted">File name will appear here after upload.</small>
    </div>
    <div class="form-group">
      <label for="text-input">Add Text (Optional):</label>
      <input type="text" class="form-control" id="text-input" placeholder="Your text">
    </div>
    <div class="form-group">
      <label for="text-color">Select Text Color:</label>
      <input type="color" class="form-control" id="text-color" value="#000000">
    </div>
    <div class="form-group">
      <label for="background-color">Select Background Color:</label>
      <input type="color" class="form-control" id="background-color" value="#ffffff">
    </div>
    <div class="form-group">
      <label for="qr-logo-placement">QR Code and Logo Placement:</label>
      <select class="form-control" id="qr-logo-placement">
        <option value="top">QR Code on Top, Logo Below</option>
        <option value="bottom">Logo on Top, QR Code Below</option>
      </select>
    </div>
    <div class="form-group">
      <label for="qr-border">QR Code Border:</label>
      <select class="form-control" id="qr-border">
        <option value="none">None</option>
        <option value="thin">Thin</option>
        <option value="medium">Medium</option>
        <option value="thick">Thick</option>
      </select>
    </div>
    <div class="form-group">
      <label for="logo-border">Logo Border:</label>
      <select class="form-control" id="logo-border">
        <option value="none">None</option>
        <option value="thin">Thin</option>
        <option value="medium">Medium</option>
        <option value="thick">Thick</option>
      </select>
    </div>
    <div class="form-group">
      <label for="font-family">Select Font Family:</label>
      <select class="form-control" id="font-family">
        <option value="Jost, sans-serif">Jost</option>
        <option value="Arial, sans-serif">Arial</option>
        <option value="Verdana, sans-serif">Verdana</option>
      </select>
    </div>
    <button type="submit" class="btn btn-primary btn-block mt-4">Generate QR Code</button>
  </form>

  <div class="preview-container mt-5" id="preview-container" style="display: none;">
    <h3 class="text-center mb-3">Preview on Plastic Stand</h3>
    <div id="plastic-stand-preview" class="plastic-stand">
      <div id="qr-code-container"></div>
      <div id="logo-container"></div>
      <div id="text-container" class="text-container">
        <span id="text-preview" class="text-preview"></span>
      </div>
    </div>
  </div>
</div>

<!-- Include jQuery for easier DOM manipulation -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Include Bootstrap JS for form validation and styling -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Include QR Code API JavaScript SDK -->
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator-sdk/lib/browser/qrcode.min.js"></script>

<script>
  // Handle form submission
  $('#qr-form').submit(function(event) {
    event.preventDefault();

    var businessLink = $('#business-link').val().trim();
    var logoFile = $('#logo-upload')[0].files[0];
    var qrLogoPlacement = $('#qr-logo-placement').val();
    var text = $('#text-input').val().trim();
    var textColor = $('#text-color').val();
    var backgroundColor = $('#background-color').val();
    var qrBorder = $('#qr-border').val();
    var logoBorder = $('#logo-border').val();
    var fontFamily = $('#font-family').val();

    // Validate input
    if (businessLink === '' || !isValidURL(businessLink)) {
      alert('Please enter a valid business link (URL).');
      return;
    }
    if (!logoFile) {
      alert('Please upload a logo file.');
      return;
    }

    // Display uploaded file name
    $('#file-name-help').text('Uploaded file: ' + logoFile.name);

    // Display preview container
    $('#preview-container').show();

    // Generate QR code
    generateQRCode(businessLink, qrBorder);

    // Display logo preview
    displayLogoPreview(logoFile, logoBorder);

    // Display text preview
    displayTextPreview(text, textColor, fontFamily);

    // Set background color and border styles
    setPlasticStandStyles(backgroundColor, qrLogoPlacement);
  });

  // Function to generate QR code
  function generateQRCode(businessLink, qrBorder) {
    var qrCode = new QRCode(document.getElementById('qr-code-container'), {
      width: 200,
      height: 200,
      correctLevel: QRCode.CorrectLevel.H
    });
    qrCode.makeCode(businessLink);

    // Adjust QR code border
    var qrImage = document.getElementById('qr-code-container').getElementsByTagName('img')[0];
    qrImage.style.border = getBorderStyle(qrBorder);
  }

  // Function to display logo preview
  function displayLogoPreview(logoFile, logoBorder) {
    var logoPreview = document.createElement('img');
    logoPreview.src = URL.createObjectURL(logoFile);
    logoPreview.className = 'logo-preview';

    var logoContainer = document.getElementById('logo-container');

    // Clear previous content
    logoContainer.innerHTML = '';
    logoContainer.appendChild(logoPreview);

    // Resize logo if necessary
    resizeImage(logoPreview, 150);

    // Adjust logo border
    logoPreview.style.border = getBorderStyle(logoBorder);
  }

  // Function to display text preview
  function displayTextPreview(text, textColor, fontFamily) {
    var textContainer = document.getElementById('text-container');
    var textPreview = document.getElementById('text-preview');

    if (text) {
      textContainer.style.display = 'block';
      textPreview.textContent = text;
      textPreview.style.color = textColor;
      textPreview.style.fontFamily = fontFamily;
    } else {
      textContainer.style.display = 'none';
    }
  }

  // Function to set plastic stand styles
  function setPlasticStandStyles(backgroundColor, qrLogoPlacement) {
    var plasticStand = document.getElementById('plastic-stand-preview');
    plasticStand.style.backgroundColor = backgroundColor;

    // Adjust placement based on selection
    if (qrLogoPlacement === 'bottom') {
      plasticStand.style.flexDirection = 'column-reverse';
    } else {
      plasticStand.style.flexDirection = 'column';
    }
  }

  // Function to validate URL
  function isValidURL(url) {
    var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
      '((([a-z\\d]([a-z\\d-]*[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(url);
  }

  // Function to resize image proportionally
  function resizeImage(image, maxSize) {
    var ratio = 1;
    if (image.width > maxSize || image.height > maxSize) {
      if (image.width > image.height) {
        ratio = maxSize / image.width;
      } else {
        ratio = maxSize / image.height;
      }
      image.width = image.width * ratio;
      image.height = image.height * ratio;
    }
  }

  // Function to get border style based on selection
  function getBorderStyle(borderOption) {
    switch (borderOption) {
      case 'thin':
        return '1px solid #000'; // Thin border
      case 'medium':
        return '2px solid #000'; // Medium border
      case 'thick':
        return '4px solid #000'; // Thick border
      default:
        return 'none'; // No border
    }
  }
</script>

</body>
</html>

What I have tried:

I tried AI but it always gave me the same errors and overall, didn't help.

Posted 2-Jul-24 0:57am

Jesus Berisha

Updated 2-Jul-24 8:27am

Andre Oosthuizen

v2

Add a Solution

Comments

Richard Deeming 2-Jul-24 8:33am

Dumping nearly 300 lines of unexplained AI-generated garbage and expecting someone else to "fix it" for you does not make a good question. Especially since you haven't told us what the problems are that you want to "fix"!

Treat this as a great learning opportunity: the code that AI tools spit out is often wrong. Sometimes it's obviously wrong; other times, there are subtle problems that might not be immediately obvious.

If you rely on these tools to write all your code for you, you won't learn anything, and you'll be stuck when the generated code fails to do what you want it to.

By all means, use AI-generated code as a starting point. But you need to read and understand what the code is doing, not just blindly copy/paste/run.

Jesus Berisha 3-Jul-24 4:41am

Awesome take! I appreciate it. And the problem was that the QR image didn't appear, only the text and image. It's almost like there is no space for it all or something.

Richard Deeming 3-Jul-24 5:19am

Well, the first problem is that the QR code library you're referencing doesn't exist on the CDN:
https://cdn.jsdelivr.net/npm/qrcode-generator-sdk/lib/browser/qrcode.min.js[^]
"Failed to fetch version info for qrcode-generator-sdk."

You'll either need to find the correct URL for that library, or find a different library.

When something doesn't work, it's always worth checking your browser's developer console for errors.

Jesus Berisha 3-Jul-24 5:29am

Thanks! I'll try it out.

Andre Oosthuizen 2-Jul-24 14:28pm

5'ed if this were the answer...

Andre Oosthuizen 2-Jul-24 14:32pm

@OP, I ran your code in fiddle and all seems to be well. You need to specify what you want this tons of code to do, what ir does not do and what are the errors if any...

Jesus Berisha 3-Jul-24 4:42am

The problem is that the QR image doesn't appear, only the text and image. It's almost like there is no space for it all or something. That's my theory at least. Not much involved in the programming world

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete O'Hanlon · Answer 1 · 2024-07-02T21:16:00

When you post a question here, you have to ask yourself if you have provided enough information for people to help you. When you say that you are getting errors, don't leave us to guess what errors you are actually facing. Tell us what the error actually is, and how we can recreate it. As we aren't sitting with you, we don't have access to you to ask questions, so it is your responsibility to provide this extra detail to us.

Click Improve Question at the bottom of your post and explain what error you are seeing, and how you trigger that error.