diff --git a/assets/scripts/script.js b/assets/scripts/script.js index ee0891b..9833bdf 100644 --- a/assets/scripts/script.js +++ b/assets/scripts/script.js @@ -4,31 +4,33 @@ const noteBody = document.querySelector(".__body textarea"); const selectAllButton = document.querySelector("._select-all"); const deleteAllButton = document.querySelector("._delete-all"); +const confirmDeleteButton = document.querySelector("._delete-confirm"); const saveToLocalButton = document.querySelector("._save-to-local"); function selectAll() { noteBody.select(); }; -function deleteAll() { - deleteChoices.classList.toggle("hidden"); +function showDeleteConfirm() { + confirmDeleteButton.style.display = "inline"; + deleteAllButton.style.display = "none"; - let yesDelete = document.querySelector(".yes-delete"); - let noDelete = document.querySelector(".no-delete"); + // setTimeout is leaving a little bug, but I will fix it later (maybe). + setTimeout(() => { + confirmDeleteButton.style.display = "none"; + deleteAllButton.style.display = "inline"; + }, 2500); +}; - yesDelete.addEventListener("click", () => { - deleteChoices.classList.add("hidden"); +function confirmDelete() { + confirmDeleteButton.style.display = "none"; + deleteAllButton.style.display = "inline"; - noteTitle.value = ""; - noteBody.value = ""; + noteTitle.value = ""; + noteBody.value = ""; - storage.saveData.saveTitle(); - storage.saveData.saveText(); - }); - - noDelete.addEventListener("click", () => { - deleteChoices.classList.add("hidden"); - }); + saveText(); + saveTitle(); }; function downloadNote() { @@ -72,7 +74,8 @@ noteTitle.addEventListener("input", saveTitle); noteBody.addEventListener("input", saveText); selectAllButton.addEventListener("click", selectAll); -deleteAllButton.addEventListener("click", deleteAll); +deleteAllButton.addEventListener("click", showDeleteConfirm); +confirmDeleteButton.addEventListener("click", confirmDelete); saveToLocalButton.addEventListener("click", downloadNote); document.addEventListener("DOMContentLoaded", () => { diff --git a/assets/styles/style.css b/assets/styles/style.css index 4e062b8..e13e6cb 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -93,17 +93,21 @@ main { border-right: var(--border-shorthand); } -.__function button:hover, -.__function button:focus { +.__function button:hover { color: var(--button-hover-color); background: var(--button-hover-backround); } -._delete-all { +._delete-all, +._delete-confirm { color: #fff; background: #fd6060; } +._delete-confirm { + display: none; +} + ._save-to-local { border-left: var(--border-shorthand) !important; margin-left: auto; diff --git a/index.html b/index.html index 63bc1ab..4158392 100644 --- a/index.html +++ b/index.html @@ -25,10 +25,7 @@ - +