fixed the delete button

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", () => {

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;

index.html

@@ -25,10 +25,7 @@
 				<button class="_delete-all">Delete all</button>
 
 				<!-- Appear when clicked. -->
-				<span class="_delete-choices hidden">
-					<span>Are you sure?</span>
-					<button class="yes-delete">Yes</button><button class="no-delete">No</button>
-				</span>
+				<button class="_delete-confirm">Click again to delete</button>
 				<!-- ------------------- -->
 
 				<button class="_save-to-local">Save to local</button>