WebMark Text Styler

Text Styler

Text Styler

0 characters
16px

Bold

`; const blob = new Blob([html], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'styled-text.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } // Event listeners elements.input.addEventListener('input', (e) => { state.text = e.target.value; updatePreviews(); elements.charCount.textContent = `${state.text.length} characters`; }); elements.themeToggle.addEventListener('click', () => { state.theme = state.theme === 'light' ? 'dark' : 'light'; document.body.dataset.theme = state.theme; elements.themeToggle.textContent = state.theme === 'light' ? '๐ŸŒ™' : 'โ˜€๏ธ'; }); // Initialize createStyleCards(); document.querySelectorAll('.style-card').forEach(card => { const copyBtn = card.querySelector('.copy-btn'); const preview = card.querySelector('.preview'); copyBtn.addEventListener('click', () => { const text = preview.textContent; navigator.clipboard.writeText(text); copyBtn.textContent = 'โœ“'; setTimeout(() => copyBtn.textContent = '๐Ÿ“‹', 1000); }); const saveBtn = card.querySelector('.save-btn'); saveBtn.addEventListener('click', () => { saveText(preview.textContent, `styled-text.txt`); }); const shareBtn = card.querySelector('.share-btn'); shareBtn.addEventListener('click', () => { shareText(preview.textContent); }); const exportHtmlBtn = card.querySelector('.export-html-btn'); exportHtmlBtn.addEventListener('click', () => { exportAsHTML(preview.textContent); }); const generateQrBtn = card.querySelector('.generate-qr-btn'); generateQrBtn.addEventListener('click', () => { generateQRCode(preview.textContent); }); const exportTxtBtn = card.querySelector('.export-txt-btn'); exportTxtBtn.addEventListener('click', () => { const blob = new Blob([card.querySelector('.preview').textContent], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${card.dataset.style}-text.txt`; a.click(); }); const exportPngBtn = card.querySelector('.export-png-btn'); exportPngBtn.addEventListener('click', () => { html2canvas(card.querySelector('.preview')).then(canvas => { const url = canvas.toDataURL(); const a = document.createElement('a'); a.href = url; a.download = `${card.dataset.style}-text.png`; a.click(); }); }); });