Your All-in-One Solution for Online Tools

Unlock productivity with our powerful suite of PDF, Image, Text, SEO, Developer, and Utility tools – all in one place, fast and free.

Explore All Tools

All Tools

Popular Tools

function renderQrCodeGenerator(targetElement) { targetElement.innerHTML = `
`; const qrText = targetElement.querySelector('#qr-text'); const generateBtn = targetElement.querySelector('#generate-qr-btn'); const qrcodeResult = targetElement.querySelector('#qrcode-result'); let qrcode = new QRCode(qrcodeResult, { text: qrText.value, width: 200, height: 200, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); generateBtn.addEventListener('click', () => { qrcodeResult.innerHTML = ''; // Clear previous QR qrcode = new QRCode(qrcodeResult, { text: qrText.value, width: 200, height: 200, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H }); // Simulate download for QR const dataUrl = qrcodeResult.querySelector('img') ? qrcodeResult.querySelector('img').src : ''; if (dataUrl) { const { container: progressBarContainer, bar: progressBar } = createProgressBar(); const downloadArea = createDownloadArea('qrcode.png', dataUrl); targetElement.appendChild(progressBarContainer); // Re-append as it might have been removed targetElement.appendChild(downloadArea); // Re-append simulateProcessing(progressBarContainer, progressBar, downloadArea); downloadArea.querySelector('.btn-primary').href = dataUrl; downloadArea.querySelector('.btn-primary').download = 'qrcode.png'; } }); // Hide file upload for this tool const dropZone = targetElement.querySelector('.drop-zone'); if (dropZone) dropZone.style.display = 'none'; } function renderRandomPasswordGenerator(targetElement) { targetElement.innerHTML = `
`; const lengthInput = targetElement.querySelector('#password-length'); const uppercaseCb = targetElement.querySelector('#include-uppercase'); const lowercaseCb = targetElement.querySelector('#include-lowercase'); const numbersCb = targetElement.querySelector('#include-numbers'); const symbolsCb = targetElement.querySelector('#include-symbols'); const generateBtn = targetElement.querySelector('#generate-password-btn'); const passwordInput = targetElement.querySelector('#generated-password'); const copyBtn = targetElement.querySelector('#copy-password-btn'); const generatePassword = () => { const length = parseInt(lengthInput.value); const includeUppercase = uppercaseCb.checked; const includeLowercase = lowercaseCb.checked; const includeNumbers = numbersCb.checked; const includeSymbols = symbolsCb.checked; const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz'; const numberChars = '0123456789'; const symbolChars = '!@#$%^&*()_+~`|}{[]:;?><,./-='; let availableChars = ''; if (includeUppercase) availableChars += uppercaseChars; if (includeLowercase) availableChars += lowercaseChars; if (includeNumbers) availableChars += numberChars; if (includeSymbols) availableChars += symbolChars; if (availableChars.length === 0) { passwordInput.value = 'Select at least one character type!'; return; } let password = ''; for (let i = 0; i < length; i++) { const randomIndex = Math.floor(Math.random() * availableChars.length); password += availableChars[randomIndex]; } passwordInput.value = password; }; generateBtn.addEventListener('click', generatePassword); copyBtn.addEventListener('click', () => { passwordInput.select(); document.execCommand('copy'); alert('Password copied to clipboard!'); }); generatePassword(); // Generate on load // Hide file upload for this tool const dropZone = targetElement.querySelector('.drop-zone'); if (dropZone) dropZone.style.display = 'none'; // Hide progress/download const progressBarContainer = targetElement.querySelector('.progress-bar-container'); if (progressBarContainer) progressBarContainer.style.display = 'none'; const downloadArea = targetElement.querySelector('.download-area'); if (downloadArea) downloadArea.style.display = 'none'; } function renderEditPdfTool(targetElement, handleFileProcessing) { // Remove the default dropzone as we're making a specific one const defaultDropZone = targetElement.querySelector('.drop-zone'); if (defaultDropZone) defaultDropZone.remove(); targetElement.innerHTML = `

Upload your PDF to Edit or Browse

Your PDF will appear here

`; const editorDropZone = targetElement.querySelector('#pdf-editor-drop-zone'); const pdfFileInput = editorDropZone.querySelector('input[type="file"]'); const pdfCanvasWrapper = targetElement.querySelector('#pdf-canvas-wrapper'); const addTextBtn = targetElement.querySelector('#add-text-btn'); const textInput = targetElement.querySelector('#editor-text-input'); const savePdfBtn = targetElement.querySelector('#save-pdf-btn'); const progressBarContainer = targetElement.querySelector('.progress-bar-container'); const progressBar = progressBarContainer.querySelector('.progress-bar'); const downloadArea = targetElement.querySelector('.download-area'); let currentPdfFile = null; editorDropZone.addEventListener('click', () => pdfFileInput.click()); pdfFileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) { currentPdfFile = e.target.files[0]; pdfCanvasWrapper.innerHTML = `

Loaded: ${currentPdfFile.name} (Simulated view)

`; // In a real scenario, use PDF.js to render PDF } }); editorDropZone.addEventListener('dragover', (e) => { e.preventDefault(); editorDropZone.classList.add('dragover'); }); editorDropZone.addEventListener('dragleave', () => editorDropZone.classList.remove('dragover')); editorDropZone.addEventListener('drop', (e) => { e.preventDefault(); editorDropZone.classList.remove('dragover'); if (e.dataTransfer.files.length > 0 && e.dataTransfer.files[0].type === 'application/pdf') { currentPdfFile = e.dataTransfer.files[0]; pdfCanvasWrapper.innerHTML = `

Loaded: ${currentPdfFile.name} (Simulated view)

`; } else { alert('Please drop a PDF file.'); } }); addTextBtn.addEventListener('click', () => { textInput.style.display = textInput.style.display === 'block' ? 'none' : 'block'; }); savePdfBtn.addEventListener('click', () => { if (!currentPdfFile) { alert('Please upload a PDF file first.'); return; } console.log('Simulating PDF save and download...'); // Simulate processing and download simulateProcessing(progressBarContainer, progressBar, downloadArea); const fakeBlob = new Blob([`Edited PDF content (simulated) from ${currentPdfFile.name}. Added text: "${textInput.value}"`], { type: 'application/pdf' }); const fileUrl = URL.createObjectURL(fakeBlob); downloadArea.querySelector('.btn-primary').href = fileUrl; downloadArea.querySelector('.btn-primary').download = `edited-${currentPdfFile.name}`; }); } function renderImageResizerTool(targetElement, handleFileProcessing) { // Re-use the existing dropzone for consistency targetElement.innerHTML = ` ${targetElement.innerHTML}
Image Preview

Image Preview

`; const resizeWidth = targetElement.querySelector('#resize-width'); const resizeHeight = targetElement.querySelector('#resize-height'); const resizeBtn = targetElement.querySelector('#resize-image-btn'); const imagePreviewDiv = targetElement.querySelector('#image-preview'); const imagePreviewImg = imagePreviewDiv.querySelector('img'); const imagePreviewText = imagePreviewDiv.querySelector('p'); let currentImageFile = null; const originalHandleFileProcessing = handleFileProcessing; // Store reference to original // Override handleFileProcessing to include image preview handleFileProcessing = (files) => { originalHandleFileProcessing(files); // Call original to show progress/download if (files.length > 0 && files[0].type.startsWith('image/')) { currentImageFile = files[0]; const reader = new FileReader(); reader.onload = (e) => { imagePreviewImg.src = e.target.result; imagePreviewImg.style.display = 'block'; imagePreviewText.style.display = 'none'; }; reader.readAsDataURL(currentImageFile); } else { imagePreviewImg.style.display = 'none'; imagePreviewText.style.display = 'block'; currentImageFile = null; } }; // Re-attach drop zone with new handler if needed, or ensure the initial one calls this. const dropZone = targetElement.querySelector('.drop-zone'); if(dropZone) { const fileInput = dropZone.querySelector('input[type="file"]'); fileInput.removeEventListener('change', (e) => originalHandleFileProcessing(e.target.files)); dropZone.removeEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); originalHandleFileProcessing(e.dataTransfer.files); }); fileInput.addEventListener('change', (e) => handleFileProcessing(e.target.files)); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); handleFileProcessing(e.dataTransfer.files); }); } resizeBtn.addEventListener('click', () => { if (!currentImageFile) { alert('Please upload an image first.'); return; } const width = parseInt(resizeWidth.value); const height = parseInt(resizeHeight.value); if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) { alert('Please enter valid width and height.'); return; } // Simulate client-side resizing const reader = new FileReader(); reader.onload = (e) => { const img = new Image(); img.onload = () => { const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, width, height); const resizedDataUrl = canvas.toDataURL(currentImageFile.type); // Keep original type imagePreviewImg.src = resizedDataUrl; // Update preview imagePreviewImg.style.display = 'block'; imagePreviewText.style.display = 'none'; // Show progress and enable download const progressBarContainer = targetElement.querySelector('.progress-bar-container'); const progressBar = progressBarContainer.querySelector('.progress-bar'); const downloadArea = targetElement.querySelector('.download-area'); simulateProcessing(progressBarContainer, progressBar, downloadArea); downloadArea.querySelector('.btn-primary').href = resizedDataUrl; downloadArea.querySelector('.btn-primary').download = `resized-${currentImageFile.name}`; }; img.src = e.target.result; }; reader.readAsDataURL(currentImageFile); }); } function renderTextTool(targetElement, toolId) { // Remove the default dropzone for text-only tools const defaultDropZone = targetElement.querySelector('.drop-zone'); if (defaultDropZone) defaultDropZone.remove(); // Hide progress/download as these are usually immediate results const progressBarContainer = targetElement.querySelector('.progress-bar-container'); if (progressBarContainer) progressBarContainer.style.display = 'none'; const downloadArea = targetElement.querySelector('.download-area'); if (downloadArea) downloadArea.style.display = 'none'; targetElement.innerHTML = `
Result will appear here.
`; const textInputArea = targetElement.querySelector('#text-input-area'); const processTextBtn = targetElement.querySelector('#process-text-btn'); const textResultArea = targetElement.querySelector('#text-result-area'); processTextBtn.addEventListener('click', () => { const text = textInputArea.value; let result = ''; switch (toolId) { case 'word-counter': result = `Words: ${text.split(/\s+/).filter(word => word.length > 0).length}`; break; case 'character-counter': result = `Characters (incl. spaces): ${text.length}\nCharacters (excl. spaces): ${text.replace(/\s/g, '').length}`; break; case 'case-converter': result = `Uppercase: ${text.toUpperCase()}\nLowercase: ${text.toLowerCase()}\nTitle Case: ${text.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase())}`; break; // Add more text tools here default: result = "Unknown text tool."; } textResultArea.textContent = result; }); } function renderJsonFormatter(targetElement) { const defaultDropZone = targetElement.querySelector('.drop-zone'); if (defaultDropZone) defaultDropZone.remove(); const progressBarContainer = targetElement.querySelector('.progress-bar-container'); if (progressBarContainer) progressBarContainer.style.display = 'none'; const downloadArea = targetElement.querySelector('.download-area'); if (downloadArea) downloadArea.style.display = 'none'; targetElement.innerHTML = `
`; const jsonInput = targetElement.querySelector('#json-input'); const formatBtn = targetElement.querySelector('#format-json-btn'); const minifyBtn = targetElement.querySelector('#minify-json-btn'); const jsonOutput = targetElement.querySelector('#json-output'); const copyOutputBtn = targetElement.querySelector('#copy-json-output'); formatBtn.addEventListener('click', () => { try { const parsedJson = JSON.parse(jsonInput.value); jsonOutput.value = JSON.stringify(parsedJson, null, 2); } catch (e) { jsonOutput.value = `Error: Invalid JSON\n${e.message}`; } }); minifyBtn.addEventListener('click', () => { try { const parsedJson = JSON.parse(jsonInput.value); jsonOutput.value = JSON.stringify(parsedJson); } catch (e) { jsonOutput.value = `Error: Invalid JSON\n${e.message}`; } }); copyOutputBtn.addEventListener('click', () => { jsonOutput.select(); document.execCommand('copy'); alert('JSON output copied to clipboard!'); }); } function renderBase64Tool(targetElement, toolId) { const defaultDropZone = targetElement.querySelector('.drop-zone'); if (defaultDropZone) defaultDropZone.remove(); const progressBarContainer = targetElement.querySelector('.progress-bar-container'); if (progressBarContainer) progressBarContainer.style.display = 'none'; const downloadArea = targetElement.querySelector('.download-area'); if (downloadArea) downloadArea.style.display = 'none'; const encodeDecodeBtnText = toolId === 'base64-encoder' ? 'Encode to Base64' : 'Decode from Base64'; targetElement.innerHTML = `
`; const base64Input = targetElement.querySelector('#base64-input'); const processBtn = targetElement.querySelector('#process-base64-btn'); const base64Output = targetElement.querySelector('#base64-output'); const copyOutputBtn = targetElement.querySelector('#copy-base64-output'); processBtn.addEventListener('click', () => { const text = base64Input.value; let result = ''; try { if (toolId === 'base64-encoder') { result = btoa(text); // Encode } else { result = atob(text); // Decode } } catch (e) { result = `Error: Invalid Base64 string or encoding issue.\n${e.message}`; } base64Output.value = result; }); copyOutputBtn.addEventListener('click', () => { base64Output.select(); document.execCommand('copy'); alert('Output copied to clipboard!'); }); } function renderUrlTool(targetElement, toolId) { const defaultDropZone = targetElement.querySelector('.drop-zone'); if (defaultDropZone) defaultDropZone.remove(); const progressBarContainer = targetElement.querySelector('.progress-bar-container'); if (progressBarContainer) progressBarContainer.style.display = 'none'; const downloadArea = targetElement.querySelector('.download-area'); if (downloadArea) downloadArea.style.display = 'none'; const encodeDecodeBtnText = toolId === 'url-encoder' ? 'Encode URL' : 'Decode URL'; targetElement.innerHTML = `
`; const urlInput = targetElement.querySelector('#url-input'); const processBtn = targetElement.querySelector('#process-url-btn'); const urlOutput = targetElement.querySelector('#url-output'); const copyOutputBtn = targetElement.querySelector('#copy-url-output'); processBtn.addEventListener('click', () => { const text = urlInput.value; let result = ''; try { if (toolId === 'url-encoder') { result = encodeURIComponent(text); } else { result = decodeURIComponent(text); } } catch (e) { result = `Error: Invalid URL string or encoding issue.\n${e.message}`; } urlOutput.value = result; }); copyOutputBtn.addEventListener('click', () => { urlOutput.select(); document.execCommand('copy'); alert('Output copied to clipboard!'); }); } function renderMetaTagGenerator(targetElement) { const defaultDropZone = targetElement.querySelector('.drop-zone'); if (defaultDropZone) defaultDropZone.remove(); const progressBarContainer = targetElement.querySelector('.progress-bar-container'); if (progressBarContainer) progressBarContainer.style.display = 'none'; const downloadArea = targetElement.querySelector('.download-area'); if (downloadArea) downloadArea.style.display = 'none'; targetElement.innerHTML = `
`; const metaTitle = targetElement.querySelector('#meta-title'); const metaDescription = targetElement.querySelector('#meta-description'); const metaKeywords = targetElement.querySelector('#meta-keywords'); const metaAuthor = targetElement.querySelector('#meta-author'); const generateBtn = targetElement.querySelector('#generate-meta-btn'); const metaOutput = targetElement.querySelector('#meta-output'); const copyOutputBtn = targetElement.querySelector('#copy-meta-output'); generateBtn.addEventListener('click', () => { let tags = ''; if (metaTitle.value) tags += `${metaTitle.value}\n`; if (metaDescription.value) tags += `\n`; if (metaKeywords.value) tags += `\n`; if (metaAuthor.value) tags += `\n`; tags += `\n`; tags += ``; metaOutput.value = tags.trim(); }); copyOutputBtn.addEventListener('click', () => { metaOutput.select(); document.execCommand('copy'); alert('Meta tags copied to clipboard!'); }); } function renderSlugGenerator(targetElement) { const defaultDropZone = targetElement.querySelector('.drop-zone'); if (defaultDropZone) defaultDropZone.remove(); const progressBarContainer = targetElement.querySelector('.progress-bar-container'); if (progressBarContainer) progressBarContainer.style.display = 'none'; const downloadArea = targetElement.querySelector('.download-area'); if (downloadArea) downloadArea.style.display = 'none'; targetElement.innerHTML = `
`; const textInput = targetElement.querySelector('#text-to-slug'); const generateBtn = targetElement.querySelector('#generate-slug-btn'); const slugOutput = targetElement.querySelector('#generated-slug'); const copyBtn = targetElement.querySelector('#copy-slug-btn'); generateBtn.addEventListener('click', () => { const text = textInput.value; const slug = text .toLowerCase() .replace(/[^a-z0-9\s-]/g, '') // Remove non-alphanumeric chars, except spaces and hyphens .trim() .replace(/\s+/g, '-') // Replace spaces with single hyphens .replace(/-+/g, '-'); // Replace multiple hyphens with single hyphen slugOutput.value = slug; }); copyBtn.addEventListener('click', () => { slugOutput.select(); document.execCommand('copy'); alert('Slug copied to clipboard!'); }); } // --- Event Listeners --- document.addEventListener('DOMContentLoaded', () => { filterAndSearchTools(); populateCategories(); renderToolCards(getPopularTools(), popularToolsGrid); // Render popular tools toolSearchInput.addEventListener('input', filterAndSearchTools); backToHomeBtn.addEventListener('click', showHomeSection); menuToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); menuToggle.classList.toggle('active'); }); navItems.forEach(item => { item.addEventListener('click', (e) => { e.preventDefault(); navLinks.classList.remove('active'); menuToggle.classList.remove('active'); const target = e.target.getAttribute('data-nav-target'); if (target === 'home') { showHomeSection(); window.scrollTo({ top: 0, behavior: 'smooth' }); } else if (target === 'tools') { showHomeSection(); // Ensure home is visible for tools section document.getElementById('tools-section-anchor').scrollIntoView({ behavior: 'smooth' }); } else { // For 'about' and 'contact', we'll simulate by just scrolling to footer showHomeSection(); // Ensure home is visible document.querySelector('footer').scrollIntoView({ behavior: 'smooth' }); alert(`Navigating to ${target} section. (Content not implemented as separate page in this single-file demo)`); } }); }); homeLink.addEventListener('click', (e) => { e.preventDefault(); showHomeSection(); window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Dynamically load QRCode.js const qrcodeScript = document.createElement('script'); qrcodeScript.src = "https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"; document.body.appendChild(qrcodeScript); }); // Intersection Observer for scroll animations (optional, placeholder for now) const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 }; const sections = document.querySelectorAll('section'); const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } else { // Optional: reset when out of view // entry.target.style.opacity = '0'; // entry.target.style.transform = 'translateY(50px)'; } }); }, observerOptions); sections.forEach(section => { section.style.opacity = '0'; section.style.transform = 'translateY(50px)'; section.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out'; observer.observe(section); }); // Initial appearance for hero section document.querySelector('.hero').style.opacity = '1'; document.querySelector('.hero').style.transform = 'translateY(0)';