refactor: use Bootstrap classes to create an alert message that does not interrupt rendering on delete

Author: XiaoQuark

debugging/book-library/index.html

@@ -69,6 +69,8 @@ <h1>Library</h1>
       </div>
     </div>
 
+    <div id="message-container"></div>
+
     <table class="table" id="display">
       <thead class="thead-dark">
         <tr>

debugging/book-library/script.js

@@ -93,7 +93,21 @@ function render() {
       const deletedBook = myLibrary[i].title;
       myLibrary.splice(i, 1);
       render();
-      alert(`You've deleted title: ${deletedBook}`);
+      showMessage(`You've deleted title: ${deletedBook}`);
     });
   }
+
+  function showMessage(message) {
+    const container = document.getElementById("message-container");
+    container.innerHTML = "";
+    const alert = document.createElement("div");
+    alert.className = "alert alert-warning alert-dismissible fade show";
+    alert.role = "alert";
+
+    alert.innerHTML = `${message} <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>`;
+
+    container.appendChild(alert);
+  }
 }