Local Storage Text Editor

Local Storage Text Editor

Upload or Create New File

Your Files

Edit File

body { font-family: sans-serif; margin: 20px; } .upload-section, .file-list-section, .editor-section { margin-bottom: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 5px; } textarea { width: 100%; height: 300px; margin-bottom: 10px; box-sizing: border-box; } .editor-buttons button { margin-right: 10px; } document.addEventListener('DOMContentLoaded', function () { const fileUpload = document.getElementById('fileUpload'); const newFileNameInput = document.getElementById('newFileName'); const createFileButton = document.getElementById('createFile'); const fileList = document.getElementById('fileList'); const fileContentTextarea = document.getElementById('fileContent'); const saveFileButton = document.getElementById('saveFile'); const deleteFileButton = document.getElementById('deleteFile'); let currentFileName = ''; function displayFileList() { fileList.innerHTML = ''; for (let i = 0; i < localStorage.length; i++) { const fileName = localStorage.key(i); if (fileName.endsWith('.txt')) { const listItem = document.createElement('li'); listItem.textContent = fileName; listItem.addEventListener('click', function () { loadFile(fileName); }); fileList.appendChild(listItem); } } } function loadFile(fileName) { currentFileName = fileName; const content = localStorage.getItem(fileName); fileContentTextarea.value = content; document.querySelector('.editor-section h2').textContent = 'Edit File: ' + fileName; } function saveFile() { if (currentFileName) { localStorage.setItem(currentFileName, fileContentTextarea.value); alert('File saved!'); displayFileList(); } else { alert('No file loaded to save.'); } } function deleteFile() { if (currentFileName && confirm('Are you sure you want to delete ' + currentFileName + '?')) { localStorage.removeItem(currentFileName); fileContentTextarea.value = ''; currentFileName = ''; alert('File deleted!'); displayFileList(); document.querySelector('.editor-section h2').textContent = 'Edit File'; } } createFileButton.addEventListener('click', function() { let newFileName = newFileNameInput.value; if (!newFileName.endsWith('.txt')) { newFileName += '.txt'; } if (newFileName) { if (localStorage.getItem(newFileName)) { alert('File name already exists. Please choose a different name.'); } else { currentFileName = newFileName; fileContentTextarea.value = ''; document.querySelector('.editor-section h2').textContent = 'Edit File: ' + newFileName; displayFileList(); } } else { alert('Please enter a file name.'); } }); fileUpload.addEventListener('change', function (event) { const file = event.target.files[0]; if (file && file.name.endsWith('.txt')) { const reader = new FileReader(); reader.onload = function (event) { fileContentTextarea.value = event.target.result; currentFileName = file.name; document.querySelector('.editor-section h2').textContent = 'Edit File: ' + currentFileName; displayFileList(); }; reader.readAsText(file); } else { alert('Please select a .txt file.'); fileUpload.value = ''; // Reset file input } }); saveFileButton.addEventListener('click', saveFile); deleteFileButton.addEventListener('click', deleteFile); displayFileList(); });