Custom alerts using Notie

reservation.html

@@ -9,11 +9,16 @@
         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker-bulma.min.css">
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
     <link href="css/style.css" rel="stylesheet">
     <style>
         .room-image {
             max-width: 50%;
         }
+
+        .notie-container {
+            box-shadow: none;
+        }
     </style>
 </head>
 
@@ -80,6 +85,12 @@
         </div>
     </div>
 
+    <div class="row">
+        <div class="col">
+            <button id="dummy" class="btn btn-secondary mb-3">Dummy</button>
+        </div>
+    </div>
+
     <div class="row">
         <footer class="py-3 my-4">
             <ul class="nav justify-content-center border-bottom pb-3 mb-3">
@@ -93,15 +104,15 @@
         </footer>
     </div>
 
-    </div>
-
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
         crossorigin="anonymous"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
+    <script src="https://unpkg.com/notie"></script>
 
     <script>
+
         (() => {
             'use strict'
 
@@ -121,11 +132,26 @@
             })
         })()
 
+        // vanillajs-datepicker
         const elem = document.getElementById('reservation-dates');
         const rangepicker = new DateRangePicker(elem, {
             "format": "yyyy-mm-dd",
         });
 
+        // notie
+        function notify(msg, msgType) {
+            console.log("Test")
+            notie.alert({
+                type: msgType,
+                text: msg,
+            });
+        }
+
+        document.getElementById("dummy").addEventListener('click', () => {
+            console.log("Test1")
+            notify("This is a message", "success");
+        });
+
     </script>
 </body>