From 471ed6cd18dc8ebe50a352541fbbf90924b277f5 Mon Sep 17 00:00:00 2001
From: Mhanif26 <d1041231026@student.untan.ac.id>
Date: Fri, 5 Jun 2026 08:36:26 +0700
Subject: [PATCH] feat(m4n1fest): menerapkan clean code pada kode dan tambah
 komen untuk memudahkan pembacaan

---
 groups/M4N1FEST/index.html | 561 ++++++++++++++++++++++---------------
 1 file changed, 339 insertions(+), 222 deletions(-)

diff --git a/groups/M4N1FEST/index.html b/groups/M4N1FEST/index.html
index 2bdd916..49ed413 100644
--- a/groups/M4N1FEST/index.html
+++ b/groups/M4N1FEST/index.html
@@ -2532,13 +2532,15 @@
     </footer>
 
     <script>
+        // Manajemen Mega Menu Navigasi Desktop
         (function () {
             const menuItems = document.querySelectorAll('[data-menu]');
             const megaOverlay = document.getElementById('mega-overlay');
 
-            let activeMenu = null;
+            let activeMenuId = null; // Menyimpan ID menu yang sedang aktif/terbuka
 
-            const menuMap = {
+            // Pemetaan menu ke panel konten mega menu
+            const menuPanelMap = {
                 tentang: 'mega-tentang',
                 program: 'mega-program',
                 sdm: 'mega-sdm',
@@ -2547,98 +2549,127 @@
                 kontak: 'mega-kontak'
             };
 
-            function setButtonState(menuId) {
-                menuItems.forEach(item => {
-                    const isActive = item.getAttribute('data-menu') === menuId;
-                    const btn = item.querySelector('.nav-menu-btn');
-                    const chevron = item.querySelector('.fa-chevron-down');
+            // Mengubah status visual tombol navigasi berdasarkan menu aktif
+            function setMenuButtonState(menuId) {
+                menuItems.forEach(menuItemElement => {
+                    const isActive = menuItemElement.getAttribute('data-menu') === menuId;
+                    const buttonElement = menuItemElement.querySelector('.nav-menu-btn');
+                    const chevronIconElement = menuItemElement.querySelector('.fa-chevron-down');
 
-                    btn.classList.toggle('active', isActive);
-                    btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
-                    chevron.style.transform = isActive ? 'rotate(180deg)' : '';
+                    if (buttonElement) {
+                        buttonElement.classList.toggle('active', isActive);
+                        buttonElement.setAttribute('aria-expanded', isActive ? 'true' : 'false');
+                    }
+                    if (chevronIconElement) {
+                        chevronIconElement.style.transform = isActive ? 'rotate(180deg)' : '';
+                    }
                 });
             }
 
-            function closeMenus() {
-                Object.values(menuMap).forEach(panelId => {
-                    const panel = document.getElementById(panelId);
-                    if (panel) panel.classList.remove('active');
+            // Menutup semua panel mega menu yang sedang terbuka
+            function closeActiveMenus() {
+                Object.values(menuPanelMap).forEach(panelId => {
+                    const panelElement = document.getElementById(panelId);
+                    if (panelElement) {
+                        panelElement.classList.remove('active');
+                    }
                 });
 
-                megaOverlay.classList.remove('active');
-                setButtonState(null);
-                activeMenu = null;
+                if (megaOverlay) {
+                    megaOverlay.classList.remove('active');
+                }
+                setMenuButtonState(null);
+                activeMenuId = null;
             }
 
-            function openMenu(menuId) {
-                const targetPanel = document.getElementById(menuMap[menuId]);
-                if (!targetPanel) return;
+            // Membuka panel mega menu tertentu dan menutup yang lainnya
+            function openSelectedMenu(menuId) {
+                const targetPanelElement = document.getElementById(menuPanelMap[menuId]);
+                if (!targetPanelElement) return;
 
-                Object.values(menuMap).forEach(panelId => {
-                    const panel = document.getElementById(panelId);
-                    if (panel) panel.classList.remove('active');
+                Object.values(menuPanelMap).forEach(panelId => {
+                    const panelElement = document.getElementById(panelId);
+                    if (panelElement) {
+                        panelElement.classList.remove('active');
+                    }
                 });
 
-                targetPanel.classList.add('active');
-                megaOverlay.classList.add('active');
-                setButtonState(menuId);
-                activeMenu = menuId;
+                targetPanelElement.classList.add('active');
+                if (megaOverlay) {
+                    megaOverlay.classList.add('active');
+                }
+                setMenuButtonState(menuId);
+                activeMenuId = menuId;
             }
 
-            menuItems.forEach(item => {
-                const menuId = item.getAttribute('data-menu');
-                const button = item.querySelector('.nav-menu-btn');
+            // Menginisialisasi event listener untuk setiap tombol navigasi
+            menuItems.forEach(menuItemElement => {
+                const menuId = menuItemElement.getAttribute('data-menu');
+                const buttonElement = menuItemElement.querySelector('.nav-menu-btn');
+                if (!buttonElement) return;
 
-                button.setAttribute('aria-haspopup', 'true');
-                button.setAttribute('aria-expanded', 'false');
+                buttonElement.setAttribute('aria-haspopup', 'true');
+                buttonElement.setAttribute('aria-expanded', 'false');
 
-                button.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
+                buttonElement.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
 
-                    if (activeMenu === menuId) {
-                        closeMenus();
+                    if (activeMenuId === menuId) {
+                        closeActiveMenus();
                     } else {
-                        openMenu(menuId);
+                        openSelectedMenu(menuId);
                     }
                 });
             });
 
-            megaOverlay.addEventListener('click', closeMenus);
+            // Menutup menu ketika overlay (latar belakang redup) diklik
+            if (megaOverlay) {
+                megaOverlay.addEventListener('click', closeActiveMenus);
+            }
 
-            document.addEventListener('click', (e) => {
-                const clickedInsideNav = e.target.closest('#main-nav');
-                const clickedInsidePanel = e.target.closest('.mega-panel');
+            // Menutup menu jika klik dilakukan di luar area navigasi dan panel menu
+            document.addEventListener('click', (event) => {
+                const isClickInsideNav = event.target.closest('#main-nav');
+                const isClickInsidePanel = event.target.closest('.mega-panel');
 
-                if (!clickedInsideNav && !clickedInsidePanel && activeMenu) {
-                    closeMenus();
+                if (!isClickInsideNav && !isClickInsidePanel && activeMenuId) {
+                    closeActiveMenus();
                 }
             });
 
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && activeMenu) {
-                    closeMenus();
+            // Menutup menu jika menekan tombol Escape keyboard
+            document.addEventListener('keydown', (event) => {
+                if (event.key === 'Escape' && activeMenuId) {
+                    closeActiveMenus();
                 }
             });
         })();
     </script>
 
 <script>
+    // Manajemen Menu Navigasi Seluler (Mobile Menu)
     (function() {
-        const mobileBtn     = document.getElementById('mobile-menu-button');
-        const mobileMenu    = document.getElementById('mobile-menu');
-        const closeMobileBtn= document.getElementById('close-mobile-menu');
-        if (mobileBtn && mobileMenu) {
-            mobileBtn.addEventListener('click', function() {
-                const isOpen = !mobileMenu.classList.contains('-translate-x-full');
-                mobileMenu.classList.toggle('-translate-x-full');
-                mobileBtn.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenuPanel = document.getElementById('mobile-menu');
+        const closeMobileMenuButton = document.getElementById('close-mobile-menu');
+
+        // Menampilkan atau menyembunyikan menu seluler saat tombol menu diklik
+        if (mobileMenuButton && mobileMenuPanel) {
+            mobileMenuButton.addEventListener('click', () => {
+                const isHidden = mobileMenuPanel.classList.contains('-translate-x-full');
+                mobileMenuPanel.classList.toggle('-translate-x-full');
+                mobileMenuButton.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
             });
         }
-        if (closeMobileBtn && mobileMenu) {
-            closeMobileBtn.addEventListener('click', function() {
-                mobileMenu.classList.add('-translate-x-full');
-                if (mobileBtn) mobileBtn.setAttribute('aria-expanded', 'false');
+
+        // Menyembunyikan kembali menu seluler saat tombol silang (tutup) diklik
+        if (closeMobileMenuButton && mobileMenuPanel) {
+            closeMobileMenuButton.addEventListener('click', () => {
+                mobileMenuPanel.classList.add('-translate-x-full');
+                if (mobileMenuButton) {
+                    mobileMenuButton.setAttribute('aria-expanded', 'false');
+                }
             });
         }
     })();
@@ -2646,219 +2677,305 @@
 
 <!-- Scroll Reveal Observer & Chart.js Initialization -->
 <script>
-    /* ── IKA FORM SUBMIT ── */
-    // Silakan ganti URL di bawah dengan Web App URL (akhiran /exec) hasil Deploy project Apps Script Anda.
-    // Cara Deploy: di Apps Script editor -> Deploy -> New deployment -> Web app -> Who has access: Anyone.
+    // URL Web App Google Apps Script untuk penanganan pengiriman form IKA
     const IKA_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwrXG3YFu4PEY3Z3acYeFTLCozM6iERfA7_yWxXaiJn7ULwau5vTIpt0Zv04OziMit-/exec";
 
-    // Checkbox visual toggle
-    const consentCheck = document.getElementById('ika-consent');
-    if (consentCheck) {
-        consentCheck.addEventListener('change', function() {
-            const box = document.getElementById('ika-consent-box');
-            if (box) {
-                if (this.checked) {
-                    box.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none"
-                        stroke="#2352A0" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="20 6 9 17 4 12"/></svg>`;
-                } else {
-                    box.innerHTML = '';
-                }
+    // Efek visual checkbox kustom pada Form Persetujuan
+    const consentCheckbox = document.getElementById('ika-consent');
+    if (consentCheckbox) {
+        consentCheckbox.addEventListener('change', (event) => {
+            const consentBoxElement = document.getElementById('ika-consent-box');
+            if (!consentBoxElement) return;
+
+            const isChecked = event.target.checked;
+            if (isChecked) {
+                consentBoxElement.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none"
+                    stroke="#2352A0" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="20 6 9 17 4 12"/></svg>`;
+            } else {
+                consentBoxElement.innerHTML = '';
             }
         });
     }
 
-    async function submitIkaForm() {
-        const nama     = document.getElementById('ika-nama').value.trim();
-        const nim      = document.getElementById('ika-nim').value.trim();
-        const angkatan = document.getElementById('ika-angkatan').value.trim();
-        const hp       = document.getElementById('ika-hp').value.trim();
-        const email    = document.getElementById('ika-email').value.trim();
-        const status   = document.getElementById('ika-status').value;
-        const instansi = document.getElementById('ika-instansi').value.trim();
-        const skill1   = document.getElementById('ika-skill1').value;
-        const skill2   = document.getElementById('ika-skill2').value;
-        const skill3   = document.getElementById('ika-skill3').value;
-        const consent  = document.getElementById('ika-consent').checked;
+    // Mengumpulkan dan merapikan data masukan dari form
+    function getIkaFormData() {
+        return {
+            nama: document.getElementById('ika-nama').value.trim(),
+            nim: document.getElementById('ika-nim').value.trim(),
+            angkatan: document.getElementById('ika-angkatan').value.trim(),
+            hp: document.getElementById('ika-hp').value.trim(),
+            email: document.getElementById('ika-email').value.trim(),
+            status: document.getElementById('ika-status').value,
+            instansi: document.getElementById('ika-instansi').value.trim(),
+            skill1: document.getElementById('ika-skill1').value,
+            skill2: document.getElementById('ika-skill2').value,
+            skill3: document.getElementById('ika-skill3').value,
+            hasConsent: document.getElementById('ika-consent').checked
+        };
+    }
 
-        const msg = document.getElementById('ika-status-msg');
+    // Melakukan validasi pengisian field wajib dan persetujuan checkbox
+    function validateIkaFormData(formData) {
+        const hasRequiredFields = formData.nama && 
+                                  formData.angkatan && 
+                                  formData.hp && 
+                                  formData.email && 
+                                  formData.status && 
+                                  formData.skill1 && 
+                                  formData.hasConsent;
+        return !!hasRequiredFields;
+    }
 
-        // Validasi
-        if (!nama || !angkatan || !hp || !email || !status || !skill1 || !consent) {
-            msg.textContent = '⚠️ Lengkapi semua field wajib (*) dan centang persetujuan.';
-            msg.style.color = '#ef4444';
-            return;
-        }
-
-        const btn = document.getElementById('ika-submit-btn');
-        btn.disabled = true;
-        btn.textContent = 'Mengirim...';
-        msg.textContent = 'Sedang mengirim data...';
-        msg.style.color = '#9ca3af';
-
-        try {
-            const params = new URLSearchParams({
-                nama, nim, angkatan, noHp: hp,
-                email, status, instansi, skill1, skill2, skill3
-            });
-
-            await fetch(IKA_SCRIPT_URL + "?" + params.toString(), {
-                method: 'GET',
-                mode: 'no-cors',
-            });
-
-            msg.textContent = '✅ Data berhasil dikirim! Admin akan menghubungimu dalam 1–2 hari kerja.';
-            msg.style.color = '#16a34a';
-            btn.textContent = 'Terkirim ✓';
-            // Reset form
-            ['ika-nama','ika-nim','ika-angkatan','ika-hp','ika-email','ika-instansi']
-                .forEach(id => document.getElementById(id).value = '');
-            ['ika-status','ika-skill1','ika-skill2','ika-skill3']
-                .forEach(id => document.getElementById(id).selectedIndex = 0);
-            document.getElementById('ika-consent').checked = false;
-            const consentBox = document.getElementById('ika-consent-box');
-            if (consentBox) consentBox.innerHTML = '';
-
-        } catch (err) {
-            msg.textContent = '❌ Gagal mengirim. Coba lagi atau hubungi admin.';
-            msg.style.color = '#ef4444';
-            btn.disabled = false;
-            btn.textContent = 'Daftar Sekarang';
+    // Memperbarui pesan status pengiriman pada UI
+    function updateIkaFormStatusMessage(message, color) {
+        const statusMessageElement = document.getElementById('ika-status-msg');
+        if (statusMessageElement) {
+            statusMessageElement.textContent = message;
+            statusMessageElement.style.color = color;
         }
     }
 
-    /* ── SKILL DISTRIBUTION — Live fetch from Google Sheets (approved rows only) ── */
+    // Mengubah kondisi tombol kirim dan pesan selama proses mengunggah data
+    function setIkaFormLoadingState(isLoading) {
+        const submitButtonElement = document.getElementById('ika-submit-btn');
+        if (!submitButtonElement) return;
+
+        if (isLoading) {
+            submitButtonElement.disabled = true;
+            submitButtonElement.textContent = 'Mengirim...';
+            updateIkaFormStatusMessage('Sedang mengirim data...', '#9ca3af');
+        } else {
+            submitButtonElement.disabled = false;
+            submitButtonElement.textContent = 'Daftar Sekarang';
+        }
+    }
+
+    // Mengirimkan data form ke Google Apps Script via GET fetch (mode no-cors)
+    async function sendIkaFormData(formData) {
+        const params = new URLSearchParams({
+            nama: formData.nama,
+            nim: formData.nim,
+            angkatan: formData.angkatan,
+            noHp: formData.hp,
+            email: formData.email,
+            status: formData.status,
+            instansi: formData.instansi,
+            skill1: formData.skill1,
+            skill2: formData.skill2,
+            skill3: formData.skill3
+        });
+
+        const targetUrl = `${IKA_SCRIPT_URL}?${params.toString()}`;
+        await fetch(targetUrl, {
+            method: 'GET',
+            mode: 'no-cors'
+        });
+    }
+
+    // Mereset isian seluruh kolom formulir kembali ke kosong/awal
+    function resetIkaForm() {
+        const inputIds = ['ika-nama', 'ika-nim', 'ika-angkatan', 'ika-hp', 'ika-email', 'ika-instansi'];
+        inputIds.forEach(id => {
+            const inputElement = document.getElementById(id);
+            if (inputElement) inputElement.value = '';
+        });
+
+        const selectIds = ['ika-status', 'ika-skill1', 'ika-skill2', 'ika-skill3'];
+        selectIds.forEach(id => {
+            const selectElement = document.getElementById(id);
+            if (selectElement) selectElement.selectedIndex = 0;
+        });
+
+        const consentCheckbox = document.getElementById('ika-consent');
+        if (consentCheckbox) consentCheckbox.checked = false;
+
+        const consentBoxElement = document.getElementById('ika-consent-box');
+        if (consentBoxElement) consentBoxElement.innerHTML = '';
+    }
+
+    // Alur utama penanganan tombol submit pendaftaran IKA
+    async function submitIkaForm() {
+        const formData = getIkaFormData();
+        
+        const isValid = validateIkaFormData(formData);
+        if (!isValid) {
+            updateIkaFormStatusMessage('⚠️ Lengkapi semua field wajib (*) dan centang persetujuan.', '#ef4444');
+            return;
+        }
+
+        setIkaFormLoadingState(true);
+
+        try {
+            await sendIkaFormData(formData);
+            
+            updateIkaFormStatusMessage('✅ Data berhasil dikirim! Admin akan menghubungimu dalam 1–2 hari kerja.', '#16a34a');
+            
+            const submitButtonElement = document.getElementById('ika-submit-btn');
+            if (submitButtonElement) {
+                submitButtonElement.textContent = 'Terkirim ✓';
+            }
+            
+            resetIkaForm();
+        } catch (error) {
+            updateIkaFormStatusMessage('❌ Gagal mengirim. Coba lagi atau hubungi admin.', '#ef4444');
+            setIkaFormLoadingState(false);
+        }
+    }
+
+    // Manajemen Penarikan Data Keahlian Alumni dari Google Sheets secara Live
     (function fetchSkillData() {
         const SHEET_ID = '1mtVB1vLev-OWz6aTuuddGKPS8tCv8MJcGpzws8irpxk';
-        // Col I=Skill1, J=Skill2, K=Skill3, L=Approved (admin status)
         const query = encodeURIComponent("select I,J,K where lower(L)='approved'");
-        const url   = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&tq=${query}`;
+        const url = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&tq=${query}`;
 
-        // Map: skill label → bar id prefix (must match id="bar-XXX" and id="pct-XXX" in HTML)
+        // Pemetaan kategori keahlian ke ID element grafik di HTML
         const SKILL_MAP = {
-            'Web Development'      : 'web-development',
-            'Mobile Development'   : 'mobile-development',
+            'Web Development': 'web-development',
+            'Mobile Development': 'mobile-development',
             'Python / Data Science': 'python-data-science',
-            'UI/UX Design'         : 'uiux-design',
-            'Networking / DevOps'  : 'networking-devops',
-            'Cybersecurity'        : 'cybersecurity',
+            'UI/UX Design': 'uiux-design',
+            'Networking / DevOps': 'networking-devops',
+            'Cybersecurity': 'cybersecurity',
             'Machine Learning / AI': 'machine-learning-ai',
-            'Database'             : 'database',
+            'Database': 'database',
         };
 
-        const spinner  = document.getElementById('skill-note-spinner');
-        const noteText = document.getElementById('skill-note-text');
+        const spinnerElement = document.getElementById('skill-note-spinner');
+        const noteTextElement = document.getElementById('skill-note-text');
 
-        function setNote(text, spin, isCta) {
-            if (spinner)  spinner.style.animation = spin ? 'spin 1s linear infinite' : 'none';
-            if (!noteText) return;
-            if (isCta) {
-                noteText.innerHTML = text + ' <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>';
+        // Menampilkan catatan status di bawah grafik keahlian
+        function setSkillNote(text, shouldSpin, shouldShowCta) {
+            if (spinnerElement) {
+                spinnerElement.style.animation = shouldSpin ? 'spin 1s linear infinite' : 'none';
+            }
+            if (!noteTextElement) return;
+
+            if (shouldShowCta) {
+                noteTextElement.innerHTML = `${text} <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>`;
             } else {
-                noteText.textContent = text;
+                noteTextElement.textContent = text;
             }
         }
 
-        function normalizeSkill(val) {
-            if (!val) return null;
-            const s = val.toLowerCase().trim();
-            if (s.includes('web')) return 'Web Development';
-            if (s.includes('mobile')) return 'Mobile Development';
-            if (s.includes('python') || s.includes('data science') || s.includes('data science')) return 'Python / Data Science';
-            if (s.includes('ui') || s.includes('ux')) return 'UI/UX Design';
-            if (s.includes('network') || s.includes('devops')) return 'Networking / DevOps';
-            if (s.includes('cyber')) return 'Cybersecurity';
-            if (s.includes('machine') || s.includes('ai') || s.includes('artificial')) return 'Machine Learning / AI';
-            if (s.includes('database') || s.includes('db')) return 'Database';
+        // Menyaring dan mengelompokkan teks bebas ke kategori keahlian terstandar
+        function normalizeSkill(rawSkillText) {
+            if (!rawSkillText) return null;
+            const lowercasedSkill = rawSkillText.toLowerCase().trim();
+            if (lowercasedSkill.includes('web')) return 'Web Development';
+            if (lowercasedSkill.includes('mobile')) return 'Mobile Development';
+            if (lowercasedSkill.includes('python') || lowercasedSkill.includes('data science')) return 'Python / Data Science';
+            if (lowercasedSkill.includes('ui') || lowercasedSkill.includes('ux')) return 'UI/UX Design';
+            if (lowercasedSkill.includes('network') || lowercasedSkill.includes('devops')) return 'Networking / DevOps';
+            if (lowercasedSkill.includes('cyber')) return 'Cybersecurity';
+            if (lowercasedSkill.includes('machine') || lowercasedSkill.includes('ai') || lowercasedSkill.includes('artificial')) return 'Machine Learning / AI';
+            if (lowercasedSkill.includes('database') || lowercasedSkill.includes('db')) return 'Database';
             return null;
         }
 
+        // Memotong pembungkus JSONP Google Sheets agar diperoleh array baris murni
+        function parseGoogleSheetsJson(responseText) {
+            const sanitizedText = responseText.replace(/^[^{]+/, '').replace(/[);]+$/, '');
+            const parsedData = JSON.parse(sanitizedText);
+            return (parsedData.table && parsedData.table.rows) ? parsedData.table.rows : [];
+        }
+
+        // Menghitung kemunculan setiap kategori keahlian dari data Sheets
+        function calculateSkillCounts(rows) {
+            const counts = {};
+            rows.forEach(row => {
+                [0, 1, 2].forEach(colIndex => {
+                    const cell = row.c && row.c[colIndex];
+                    const rawValue = cell && cell.v ? String(cell.v).trim() : '';
+                    const normalized = normalizeSkill(rawValue);
+                    if (normalized) {
+                        counts[normalized] = (counts[normalized] || 0) + 1;
+                    }
+                });
+            });
+            return counts;
+        }
+
+        // Memperbarui lebar progress bar keahlian dan persentase teks di UI
+        function updateSkillBarsUI(counts) {
+            const totalMentions = Object.values(counts).reduce((sum, count) => sum + count, 0);
+            const maxCount = Math.max(...Object.values(counts), 0);
+
+            Object.entries(SKILL_MAP).forEach(([label, idKey]) => {
+                const count = counts[label] || 0;
+                const percentage = totalMentions > 0 ? Math.round((count / totalMentions) * 100) : 0;
+                const barPercentage = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
+
+                const barElement = document.getElementById(`bar-${idKey}`);
+                const percentElement = document.getElementById(`pct-${idKey}`);
+                
+                if (barElement) barElement.style.width = `${barPercentage}%`;
+                if (percentElement) percentElement.textContent = count > 0 ? `${percentage}%` : '—';
+            });
+        }
+
+        // Melakukan fetch data live dari spreadsheet
         fetch(url)
-            .then(res => res.text())
-            .then(raw => {
-                const json = JSON.parse(raw.replace(/^[^{]+/, '').replace(/[);]+$/, ''));
-                const rows = (json.table && json.table.rows) ? json.table.rows : [];
+            .then(response => response.text())
+            .then(responseText => {
+                const rows = parseGoogleSheetsJson(responseText);
 
                 if (rows.length === 0) {
-                    setNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
+                    setSkillNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
                     return;
                 }
 
-                // Count normalized skill mentions
-                const counts = {};
-                rows.forEach(row => {
-                    [0, 1, 2].forEach(colIdx => {
-                        const cell = row.c && row.c[colIdx];
-                        const val  = cell && cell.v ? String(cell.v).trim() : '';
-                        const normalized = normalizeSkill(val);
-                        if (normalized) {
-                            counts[normalized] = (counts[normalized] || 0) + 1;
-                        }
-                    });
-                });
-
-                const totalMentions = Object.values(counts).reduce((s, c) => s + c, 0);
-                const maxCount      = Math.max(...Object.values(counts), 0);
-
-                // Update bars for predefined skills
-                Object.entries(SKILL_MAP).forEach(([label, idKey]) => {
-                    const count  = counts[label] || 0;
-                    const pct    = totalMentions > 0 ? Math.round((count / totalMentions) * 100) : 0;
-                    const barPct = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
-
-                    const barEl = document.getElementById('bar-' + idKey);
-                    const pctEl = document.getElementById('pct-' + idKey);
-                    if (barEl) barEl.style.width = barPct + '%';
-                    if (pctEl) pctEl.textContent  = count > 0 ? pct + '%' : '—';
-                });
-
-                setNote(`Data dari ${rows.length} alumni yang diverifikasi.`, false, false);
+                const counts = calculateSkillCounts(rows);
+                updateSkillBarsUI(counts);
+                setSkillNote(`Data dari ${rows.length} alumni yang diverifikasi.`, false, false);
             })
             .catch(() => {
-                setNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
+                setSkillNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
             });
     })();
 
-    /* ── REVEAL ON SCROLL ── */
-    const ro = new IntersectionObserver(
+    // Observer Efek Muncul Perlahan saat Pengguliran Halaman (Scroll Reveal)
+    const revealObserver = new IntersectionObserver(
         (entries) => {
-            entries.forEach((e) => {
-                if (e.isIntersecting) e.target.classList.add("in");
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("in");
+                }
             });
         },
-        { threshold: 0.08 },
+        { threshold: 0.08 }
     );
-    document.querySelectorAll(".rv").forEach((el) => ro.observe(el));
+    document.querySelectorAll(".rv").forEach((el) => revealObserver.observe(el));
 
-    /* ── FAQ TOGGLE ── */
+    // Menampilkan atau menyembunyikan panel jawaban FAQ
     function toggleFaq(item) {
         item.classList.toggle("open");
     }
 
-    /* ── CHART.JS WITH BILINGUAL SUPPORT ── */
-    window.addEventListener("load", function () {
+    // Inisialisasi Grafik Jumlah Kelulusan (Chart.js) dengan Dukungan Bilingual
+    window.addEventListener("load", () => {
         if (typeof Chart === "undefined") return;
-        const ctx = document.getElementById("kelulusanChart");
-        if (!ctx) return;
+        const chartCanvasElement = document.getElementById("kelulusanChart");
+        if (!chartCanvasElement) return;
 
-        const getChartLabels = (lang) => {
-            if (lang === 'en') {
-                return ['2022 Even', '2023 Odd', '2023 Even', '2024 Odd', '2024 Even'];
-            }
-            return ['2022 Genap', '2023 Ganjil', '2023 Genap', '2024 Ganjil', '2024 Genap'];
+        // Mengembalikan nama label kuartal berdasarkan pilihan bahasa aktif
+        const getChartLabels = (languageCode) => {
+            return languageCode === 'en'
+                ? ['2022 Even', '2023 Odd', '2023 Even', '2024 Odd', '2024 Even']
+                : ['2022 Genap', '2023 Ganjil', '2023 Genap', '2024 Ganjil', '2024 Genap'];
         };
 
-        const initialLang = typeof getLang === 'function' ? getLang() : 'id';
+        const initialLanguageCode = typeof getLang === 'function' ? getLang() : 'id';
 
-        window.kelulusanChartInstance = new Chart(ctx.getContext("2d"), {
+        window.kelulusanChartInstance = new Chart(chartCanvasElement.getContext("2d"), {
             type: "bar",
             data: {
-                labels: getChartLabels(initialLang),
+                labels: getChartLabels(initialLanguageCode),
                 datasets: [
                     {
-                        label: initialLang === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan',
+                        label: initialLanguageCode === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan',
                         data: [45, 27, 63, 27, 50],
-                        backgroundColor: "#299bc1", // sesuai dengan warna biru pada gambar
+                        backgroundColor: "#299bc1",
                         borderRadius: 0,
                         borderSkipped: false,
                     }
@@ -2881,9 +2998,9 @@
                         cornerRadius: 8,
                         callbacks: {
                             label: (context) => {
-                                const lang = typeof getLang === 'function' ? getLang() : 'id';
-                                const text = lang === 'en' ? 'Graduates' : 'Jumlah';
-                                const unit = lang === 'en' ? 'People' : 'Orang';
+                                const languageCode = typeof getLang === 'function' ? getLang() : 'id';
+                                const text = languageCode === 'en' ? 'Graduates' : 'Jumlah';
+                                const unit = languageCode === 'en' ? 'People' : 'Orang';
                                 return ` ${text}: ${context.raw} ${unit}`;
                             },
                         },
@@ -2914,12 +3031,12 @@
             },
         });
 
-        // Listen for languageChanged event to dynamically update the chart
-        document.addEventListener('languageChanged', (e) => {
-            const lang = e.detail.lang;
+        // Memperbarui grafik secara dinamis saat terjadi event pergantian bahasa
+        document.addEventListener('languageChanged', (event) => {
+            const languageCode = event.detail.lang;
             if (window.kelulusanChartInstance) {
-                window.kelulusanChartInstance.data.labels = getChartLabels(lang);
-                window.kelulusanChartInstance.data.datasets[0].label = lang === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan';
+                window.kelulusanChartInstance.data.labels = getChartLabels(languageCode);
+                window.kelulusanChartInstance.data.datasets[0].label = languageCode === 'en' ? 'Number of Graduates' : 'Jumlah Lulusan';
                 window.kelulusanChartInstance.update();
             }
         });