How to add color and filename option

[EntOfMD]

Hello, I've tried to create a PR but I don't have permission to push. So if anyone is interested, I'll show you how to utilize the color options as well as give a custom name to the downloading image.

First, let's create some input fields under the <select></select> in index.html file.

Here's to choose the Dark color option: NOTE not using #ffffff as default value

        <div>
          <label for="color-dark">Select Dark color</label>
          <input
            id="color-dark"
            name="color-dark"
            type="color"
            class="w-1/5 border-2 border-gray-100 mr-2 focus:outline-none mb-5 mt-2"
            value="#1f1f1f"
          />
        </div>

Here's to add the Light color option: NOTE not using #000000 as default value

        <div>
          <label for="color-light">Select Light color</label>
          <input
            id="color-light"
            name="color-light"
            type="color"
            class="w-1/5 border-2 border-gray-100 mr-2 focus:outline-none mb-5"
            value="#e0e0e0"
          />
        </div>

and here is to add a custom file name

        <input
          id="filename"
          placeholder="Optional. Default filename is qrcode"
          type="text"
          class="w-full border-2 border-gray-200 rounded p-3 text-gray-dark mr-2 focus:outline-none mb-5"
        />

Here is the whole <form>

<form id="generate-form" class="mt-4">
            <input
              id="url"
              type="url"
              placeholder="Enter a URL"
              class="w-full border-2 border-gray-200 rounded p-3 text-grey-dark mr-2 focus:outline-none mb-5"
            />

            <select
              class="w-full border-2 border-gray-200 rounded p-3 text-grey-dark mr-2 focus:outline-none"
              name="size"
              id="size"
            >
              <option value="100">100x100</option>
              <option value="200">200x200</option>
              <option value="300" selected>300x300</option>
              <option value="400">400x400</option>
              <option value="500">500x500</option>
              <option value="600">600x600</option>
              <option value="700">700x700</option>
            </select>

            <div>
              <label for="color-dark">Select Dark color</label>
              <input
                id="color-dark"
                name="color-dark"
                type="color"
                class="w-1/5 border-2 border-gray-100 mr-2 focus:outline-none mb-5 mt-2"
                value="#1f1f1f"
              />
            </div>
            <div>
              <label for="color-light">Select Light color</label>
              <input
                id="color-light"
                name="color-light"
                type="color"
                class="w-1/5 border-2 border-gray-100 mr-2 focus:outline-none mb-5"
                value="#e0e0e0"
              />
            </div>

            <input
              id="filename"
              placeholder="Optional. Default filename is qrcode"
              type="text"
              class="w-full border-2 border-gray-200 rounded p-3 text-gray-dark mr-2 focus:outline-none mb-5"
            />
            <button
              class="bg-gray-600 rounded w-full text-white py-3 px-4 mt-5 hover:bg-black"
              type="submit"
            >
              Generate QR Code
            </button>
          </form>

After adding in the fields, let's finish it up with grabbing the values and passing them into the existing functions in js/script.js

The const generateQRCode should look like:
NOTE I'm returning the generateQRCode, which isn't wrong but just didn't want to assign the new QRCode and not use the variable.

// Generate QR code
const generateQRCode = (url, size, colorDark, colorLight) => {
  return (qrcode = new QRCode('qrcode', {
    text: url,
    width: size,
    height: size,
    colorDark: colorDark,
    colorLight: colorLight,
  }));
};

And to name the file something other than qrcode, here is how const createSaveBtn should look like:

// Create save button to download QR code as image
const createSaveBtn = (saveUrl, fileName) => {
  //filename validation
  if (fileName === '') {
    fileName = 'qrcode';
  }

  const link = document.createElement('a');
  link.id = 'save-link';
  link.classList =
    'bg-red-500 hover:bg-red-700 text-white font-bold py-2 rounded w-1/3 m-auto my-5';
  link.href = saveUrl;
  link.download = fileName;
  link.innerHTML = 'Save Image';
  document.getElementById('generated').appendChild(link);
};

To finish it off, const onGenerateSubmit should look like this:

// Button submit
const onGenerateSubmit = (e) => {
  e.preventDefault();

  clearUI();

  const url = document.getElementById('url').value;
  const size = document.getElementById('size').value;
  const cDark = document.getElementById('color-dark').value;
  const cLight = document.getElementById('color-light').value;
  const fileName = document.getElementById('filename').value;

  // Validate url
  if (url === '') {
    alert('Please enter a URL');
  } else {
    showSpinner();
    // Show spinner for 1 sec
    setTimeout(() => {
      hideSpinner();
      generateQRCode(url, size, cDark, cLight);

      // Generate the save button after the qr code image src is ready
      setTimeout(() => {
        // Get save url
        const saveUrl = qr.querySelector('img').src;
        // Create save button
        createSaveBtn(saveUrl, fileName);
      }, 50);
    }, 1000);
  }
};

Congrats! You are now able to customize even further now with a color wheel and custom file names!

[debanjo31]

Thanks

[binm7md-dev]

Thanks man