Skip to content

Improve QR generator UX #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fwextensions wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve QR generator UX #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 23 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
body { font-family: 'Roboto Flex', sans-serif; background: #fcfcfc; color: #0b0b0b; }
.outline-focus { outline: 3px solid #2A60AF; outline-offset: 4px; }
input:focus { outline: 3px solid #2A60AF; outline-offset: 4px; }
label:has(input[type="radio"]:focus-visible) { outline: 3px solid #2A60AF; outline-offset: 4px; }
</style>
</head>
<body>
Expand Down Expand Up @@ -169,6 +170,8 @@ <h2 class="font-body text-heading-sm text-neutral-900 mb-12">Preview</h2>
label.addEventListener('click', () => {
selectedSize = opt.value;
updateSizeStyles();
// Re-render immediately if a code has already been generated
if (currentDataUrl) generateQrCode();
});
sizeContainer.appendChild(label);
});
Expand All @@ -188,11 +191,11 @@ <h2 class="font-body text-heading-sm text-neutral-900 mb-12">Preview</h2>
});
}

// URL validation
// URL validation — https only
function isValidUrl(input) {
try {
const url = new URL(input);
return url.protocol === 'https:' || url.protocol === 'http:';
return url.protocol === 'https:';
} catch {
return false;
}
Expand All @@ -214,11 +217,24 @@ <h2 class="font-body text-heading-sm text-neutral-900 mb-12">Preview</h2>
document.getElementById('qr-url').removeAttribute('aria-describedby');
}

// Clear error on input
document.getElementById('qr-url').addEventListener('input', clearError);
// Clear error and hide preview on input change
document.getElementById('qr-url').addEventListener('input', () => {
clearError();
currentDataUrl = null;
document.getElementById('preview-section').classList.add('hidden');
});

// Submit on Enter if URL is valid
document.getElementById('qr-url').addEventListener('keydown', (e) => {
if (e.key === 'Enter' && isValidUrl(e.target.value.trim())) {
generateQrCode();
}
});

// Generate
document.getElementById('generate-btn').addEventListener('click', async () => {
document.getElementById('generate-btn').addEventListener('click', () => generateQrCode());

async function generateQrCode() {
const urlInput = document.getElementById('qr-url');
const trimmedUrl = urlInput.value.trim();

Expand All @@ -227,7 +243,7 @@ <h2 class="font-body text-heading-sm text-neutral-900 mb-12">Preview</h2>
return;
}
if (!isValidUrl(trimmedUrl)) {
showError('Enter a valid URL starting with https:// or http://.');
showError('Enter a valid URL starting with https://.');
return;
}

Expand Down Expand Up @@ -294,7 +310,7 @@ <h2 class="font-body text-heading-sm text-neutral-900 mb-12">Preview</h2>
btn.textContent = 'Generate QR code';
btn.disabled = false;
}
});
}

// Download
document.getElementById('download-btn').addEventListener('click', () => {
Expand Down