CORS

ArkReCode/index.html

@@ -19,9 +19,7 @@
     <input type="text" id="charName" placeholder="Masukkan nama karakter...">
     <button onclick="fetchData()">Cari</button>
     <br>
-    <button class="chara" onclick="playVideo(this)">Edalia</button>
-    <button class="chara" onclick="playVideo(this)">Ermes</button>    
-    <div id="result"></div>
+    <div id="charButtons"></div>
   </div>
 
   <!-- Tempat Video Ditampilkan -->

ArkReCode/script.js

@@ -30,6 +30,27 @@ function playVideo(button) {
     // });
 }
 
+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);
+}
+
 function fetchData() {
     // Ambil elemen tombol karakter
     const input = document.getElementById("charName").value.trim();
@@ -53,7 +74,7 @@ function fetchData() {
 
         // Pilih URL video berdasarkan status tombol
         const newVideoURL = isSafe
-            ? `${baseURL}/video/${encodeURIComponent("Edalia Skill")}.mp4`
+            ? `${baseURL}/video/${encodeURIComponent("Ark ReCode - Edalia Skill")}.mp4`
             : `https://video.twimg.com/ext_tw_video/1892164405464629249/pu/vid/avc1/1280x720/cgW9XdNOX1DPI6Rq.mp4`;
 
         // Set dan muat ulang video
@@ -62,9 +83,7 @@ function fetchData() {
         video.play();
 
     } else {
-        const name = document.getElementById("charName").value;
-        showNotif(`Fungsi fetchData untuk karakter "${name}" belum diimplementasikan`);
-
+        showNotif(`Fungsi fetchData untuk karakter "${input}" belum diimplementasikan`);
     }
 }
 
@@ -74,33 +93,21 @@ window.onload = () => {
     .then(res => res.json())
     .then(data => {
       const container = document.getElementById("charButtons");
-      data.videos.forEach(name => {
+
+      // Urutkan nama-nama video secara alfabet
+      const sortedNames = data.videos.sort((a, b) => a.localeCompare(b));
+
+      sortedNames.forEach(name => {
         const btn = document.createElement("button");
         btn.textContent = name;
         btn.className = "chara";
-        btn.onclick = () => playVideo(name);
+        btn.onclick = function () {
+          playVideo(this);
+        };
         container.appendChild(btn);
       });
+    })
+    .catch(err => {
+      showNotif("Gagal ambil daftar karakter dari server");
     });
 };
-
-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);
-}