const textInput = document.querySelector(".textInput"); const btnSave = document.querySelector(".btnSave"); const notes = document.querySelector(".notes-container"); // Получаем кнопки const boldBtn = document.getElementById("boldBtn"); const italicBtn = document.getElementById("italicBtn"); const headerBtn = document.getElementById("headerBtn"); const listBtn = document.getElementById("listBtn"); const quoteBtn = document.getElementById("quoteBtn"); const codeBtn = document.getElementById("codeBtn"); const linkBtn = document.getElementById("linkBtn"); function getFormattedDateTime() { let now = new Date(); let day = String(now.getDate()).padStart(2, "0"); let month = String(now.getMonth() + 1).padStart(2, "0"); let year = now.getFullYear(); let hours = String(now.getHours()).padStart(2, "0"); let minutes = String(now.getMinutes()).padStart(2, "0"); return { date: `${day}.${month}.${year}`, time: `${hours}:${minutes}`, }; } // Сохранить заметки в localStorage function saveNotesToLocalStorage(notesArr) { localStorage.setItem("notes", JSON.stringify(notesArr)); } // Получить заметки из localStorage function getNotesFromLocalStorage() { return JSON.parse(localStorage.getItem("notes")) || []; } // Обновить функцию renderNotes function renderNotes() { const notesArr = getNotesFromLocalStorage(); notes.innerHTML = ""; // Очищаем контейнер перед рендерингом notesArr.forEach(function (content, index) { const noteHtml = `
${content.date} ${content.time}
Редактировать
Удалить
${marked.parse(content.content)}
`; notes.insertAdjacentHTML("afterbegin", noteHtml); }); deleteNote(); editNote(); } // Обновить функцию saveNote function saveNote() { btnSave.addEventListener("click", function () { if (textInput.value.trim() !== "") { let { date, time } = getFormattedDateTime(); const note = { content: textInput.value, date: date, time: time, }; const notesArr = getNotesFromLocalStorage(); notesArr.push(note); saveNotesToLocalStorage(notesArr); textInput.value = ""; textInput.style.height = "auto"; // Сбрасываем размер текстового поля renderNotes(); } }); } // Обновить функцию deleteNote function deleteNote() { document.querySelectorAll("#deleteBtn").forEach((btn) => { btn.addEventListener("click", function (event) { let index = event.target.dataset.index; const notesArr = getNotesFromLocalStorage(); notesArr.splice(index, 1); saveNotesToLocalStorage(notesArr); renderNotes(); }); }); } // Обновить функцию editNote function editNote() { document.querySelectorAll("#editBtn").forEach((btn) => { btn.addEventListener("click", function (event) { let index = event.target.dataset.index; let noteContainer = event.target.closest("#note"); let noteContent = noteContainer.querySelector(".textNote"); // Создаем textarea с уже существующим классом textInput let textarea = document.createElement("textarea"); textarea.classList.add("textInput"); textarea.value = noteContent.textContent; // Привязываем авторасширение к textarea для редактирования textarea.addEventListener("input", function () { autoExpandTextarea(textarea); }); autoExpandTextarea(textarea); // Кнопка сохранить let saveEditBtn = document.createElement("button"); saveEditBtn.textContent = "Сохранить"; saveEditBtn.classList.add("btnSave"); // Очищаем текущий контент и вставляем textarea и кнопку сохранить noteContent.innerHTML = ""; noteContent.appendChild(textarea); noteContent.appendChild(saveEditBtn); saveEditBtn.addEventListener("click", function () { if (textarea.value.trim() !== "") { let { date, time } = getFormattedDateTime(); const notesArr = getNotesFromLocalStorage(); notesArr[index] = { content: textarea.value, date: date, time: time, }; saveNotesToLocalStorage(notesArr); renderNotes(); } }); }); }); } // Функция для авторасширения текстового поля function autoExpandTextarea(textarea) { textarea.style.height = "auto"; textarea.style.height = textarea.scrollHeight + "px"; } // Привязываем авторасширение к текстовому полю для создания заметки textInput.addEventListener("input", function () { autoExpandTextarea(textInput); }); // Изначально запускаем для установки правильной высоты autoExpandTextarea(textInput); function insertMarkdown(tag) { const start = textInput.selectionStart; const end = textInput.selectionEnd; const text = textInput.value; const before = text.substring(0, start); const selected = text.substring(start, end); const after = text.substring(end); if (selected.startsWith(tag) && selected.endsWith(tag)) { // Если теги уже есть, удаляем их textInput.value = `${before}${selected.slice( tag.length, -tag.length )}${after}`; textInput.setSelectionRange(start, end - 2 * tag.length); } else if (selected.trim() === "") { // Если текст не выделен if (tag === "[Текст ссылки](URL)") { // Для ссылок создаем шаблон с двумя кавычками textInput.value = `${before}[Текст ссылки](URL)${after}`; const cursorPosition = start + 1; // Помещаем курсор внутрь текста ссылки textInput.setSelectionRange(cursorPosition, cursorPosition + 12); } else if (tag === "- " || tag === "> " || tag === "# ") { // Для списка, цитаты и заголовка помещаем курсор после `- `, `> ` или `# ` textInput.value = `${before}${tag}${after}`; const cursorPosition = start + tag.length; textInput.setSelectionRange(cursorPosition, cursorPosition); } else { // Для остальных типов создаем два тега textInput.value = `${before}${tag}${tag}${after}`; const cursorPosition = start + tag.length; textInput.setSelectionRange(cursorPosition, cursorPosition); } } else { // Если текст выделен if (tag === "[Текст ссылки](URL)") { // Для ссылок используем выделенный текст вместо "Текст ссылки" textInput.value = `${before}[${selected}](URL)${after}`; const cursorPosition = start + selected.length + 3; // Помещаем курсор в URL textInput.setSelectionRange(cursorPosition, cursorPosition + 3); } else if (tag === "- " || tag === "> " || tag === "# ") { // Для списка, цитаты и заголовка добавляем `- `, `> ` или `# ` перед выделенным текстом textInput.value = `${before}${tag}${selected}${after}`; const cursorPosition = start + tag.length + selected.length; textInput.setSelectionRange(cursorPosition, cursorPosition); } else { // Для остальных типов оборачиваем выделенный текст textInput.value = `${before}${tag}${selected}${tag}${after}`; const cursorPosition = start + tag.length + selected.length + tag.length; textInput.setSelectionRange(cursorPosition, cursorPosition); } } textInput.focus(); } // Обработчики для кнопок boldBtn.addEventListener("click", function () { insertMarkdown("**"); // Вставляем жирный текст }); italicBtn.addEventListener("click", function () { insertMarkdown("*"); // Вставляем курсив }); headerBtn.addEventListener("click", function () { insertMarkdown("# "); // Вставляем заголовок }); listBtn.addEventListener("click", function () { insertMarkdown("- "); // Вставляем элемент списка }); quoteBtn.addEventListener("click", function () { insertMarkdown("> "); // Вставляем цитату }); codeBtn.addEventListener("click", function () { insertMarkdown("`"); // Вставляем код }); linkBtn.addEventListener("click", function () { insertMarkdown("[Текст ссылки](URL)"); // Вставляем ссылку }); // Удалено дублирование добавления кнопок Markdown в окно сохранения заметки // Кнопки уже добавлены в HTML (index.html), поэтому их повторное создание не требуется renderNotes(); saveNote();