body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .editor-container { text-align: center; background-color: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .text-editor { width: 100%; height: 300px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; resize: none; } .btn { background-color: #007bff; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-top: 10px; } .btn:hover { background-color: #0056b3; } // Get the editor and download button elements const editor = document.getElementById('editor'); const downloadBtn = document.getElementById('download-btn'); const downloadLink = document.getElementById('download-link'); // Add event listener to the download button downloadBtn.addEventListener('click', () => { const content = editor.value; const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); downloadLink.href = url; downloadLink.download = 'edited_file.txt'; downloadLink.style.display = 'block'; }); // Clear the download link when the editor content changes editor.addEventListener('input', () => { downloadLink.style.display = 'none'; });