Notif

ArkReCode/script.js

@@ -62,7 +62,8 @@ function fetchData() {
 
     } else {
         const name = document.getElementById("charName").value;
-        alert(`Fungsi fetchData untuk karakter "${name}" belum diimplementasikan`);
+        showNotif(`Fungsi fetchData untuk karakter "${name}" belum diimplementasikan`);
+
     }
 }
 
@@ -81,3 +82,24 @@ window.onload = () => {
       });
     });
 };
+
+function showNotif(message, duration = 3000) {
+  const notif = document.createElement("div");
+  notif.className = "notif";
+  notif.textContent = message;
+
+  document.body.appendChild(notif);
+
+  // Trigger fade-in
+  requestAnimationFrame(() => {
+      notif.style.opacity = 1;
+  });
+
+  // Auto-hide
+  setTimeout(() => {
+      notif.style.opacity = 0;
+      setTimeout(() => {
+          notif.remove();
+      }, 500); // Tunggu animasi selesai
+  }, duration);
+}

ArkReCode/style.css

@@ -76,4 +76,21 @@ button:hover {
 .chara {
     display: none;
 }
-  
+
+.notif {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 193, 7, 0.9);
+    color: white;
+    padding: 12px 24px;
+    border-radius: 10px;
+    font-size: 16px;
+    text-align: center;
+    max-width: 80%;
+    z-index: 9999;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+}