Online Secure Digital Vision Board Creator

Secure Digital Vision Board Creator

Visualize your dreams and goals by creating a personal vision board.

Your vision board is empty. Go to the 'Configuration' tab to add images and notes.

Vision Board Title

Board Items

Your vision board is empty. Go to the 'Configuration' tab to add items.

`; return; } let boardHTML = `

${boardTitle}

`; itemConfigs.forEach(config => { const type = config.querySelector('.item-type-select').value; if (type === 'image') { const url = config.querySelector('.item-content-input[type="text"]').value; if (url) { boardHTML += `

`; } } else { // note const text = config.querySelector('textarea').value; const colorClass = config.querySelector('.item-color-select').value; if (text) { boardHTML += `

${text}

`; } } }); boardHTML += '

'; visionBoardOutput.innerHTML = boardHTML; } async function downloadPDF() { const { jsPDF } = window.jspdf; const content = document.getElementById('pdf-content'); if (!content || document.querySelectorAll('.board-item-config').length === 0) { console.warn("No content to export."); return; } try { const canvas = await html2canvas(content, { scale: 2, backgroundColor: '#f9fafb', useCORS: true // Important for external images }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'l', // landscape unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const ratio = canvasWidth / canvasHeight; let imgWidth = pdfWidth - 20; // with margin let imgHeight = imgWidth / ratio; if (imgHeight > pdfHeight - 20) { imgHeight = pdfHeight - 20; imgWidth = imgHeight * ratio; } const x = (pdfWidth - imgWidth) / 2; const y = (pdfHeight - imgHeight) / 2; pdf.addImage(imgData, 'PNG', x, y, imgWidth, imgHeight); pdf.save('My-Vision-Board.pdf'); } catch (error) { console.error("Error generating PDF:", error); alert("Could not generate PDF. Some images might be protected by CORS policy."); } } // --- Event Listeners --- addItemBtn.addEventListener('click', addItemForm); downloadPdfBtn.addEventListener('click', downloadPDF); document.querySelectorAll('.board-item-config').forEach(attachItemTypeListener); // --- Initial Setup --- updateNavButtons(); generateVisionBoard(); // Manually trigger change event for pre-filled items to set correct initial state document.querySelectorAll('.item-type-select').forEach(select => { select.dispatchEvent(new Event('change')); }); });