added ui,ad and other area js files

Author: brainandbinary

1991/javascripts/ui.js

@@ -1,106 +1,79 @@
+// 1. Mark the function as ASYNC
+async function renderPlaylist() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const title = urlParams.get('title'); 
+    const topic = urlParams.get('topic'); 
+    
+    if(title) {
+        $('#title').text(title);
+    }
 
-// 2. The function to render the list
-function renderPlaylist() {
-	
-	
-
-	// 1. Get the query string (e.g., "?product=vanilla&id=42")
-	const queryString = window.location.search;
+    // 2. Map topics to their JSON files
+    const topicFiles = {
+        'listening': 'listening.json',
+        'reading': 'reading.json',
+        'writing': 'writing.json',
+        'speaking': 'speaking.json',
+        'basic-speaking': 'basic-speaking.json',
+        'basic-english': 'basic-english.json'
+    };
 
-	// 2. Create the URLSearchParams object
-	const urlParams = new URLSearchParams(queryString);
+    const fileName = topicFiles[topic];
+    if (!fileName) {
+        console.error("Topic not found");
+        return; 
+    }
 
-	// 3. Get specific values
-	const title = urlParams.get('title'); 
-	const topic = urlParams.get('topic'); 
-	const country = urlParams.get('cn');           
-	
-	
-	if(title){
-		$('#title').text(title);
-	}
-	
-	let url;
-	let tutorials=[];
- 
-   if(topic=='listening'){
-	   url = 'https://brainandbinary.github.io/1991/javascripts/listening.json';
-   }
-   
-   if(topic=='reading'){
-	   url = 'https://brainandbinary.github.io/1991/javascripts/reading.json';
-   }
-   
-   if(topic=='writing'){
-	   url = 'https://brainandbinary.github.io/1991/javascripts/writing.json';
-   }
-   
-   if(topic=='speaking'){
-	   url = 'https://brainandbinary.github.io/1991/javascripts/speaking.json';
-   }
-   
-   if(topic=='basic-speaking'){
-	   url = 'https://brainandbinary.github.io/1991/javascripts/basic-speaking.json';
-   }
- 
-   if(topic=='basic-english'){
-	   url = 'https://brainandbinary.github.io/1991/javascripts/basic-english.json';
-   }
- 
-   try{
-	    const response = await fetch(url);
-		// 1. 'data' will be the array [ {className: ...}, {className: ...} ]
-		tutorials = await response.json(); 
-   }catch(e){
-	   console.log(e)
-   }
-	
-	
-  const container = document.getElementById('list-wrapper');
-  
-  // Clear existing content (optional)
-  container.innerHTML = '';
+    // 3. Add cache busting version
+    const version = new Date().getTime();
+    const url = `https://brainandbinary.github.io/1991/javascripts/${fileName}?v=${version}`;
+    
+    let tutorials = [];
 
-  tutorials.forEach((item, index) => {
-    // Create the bar element
-    const bar = document.createElement('div');
-    bar.className = 'playlist-bar';
-    bar.style.cssText = `
-      display: flex;
-      align-items: center;
-      padding: 15px;
-      margin-bottom: 10px;
-      background-color: #2a2a2a;
-      color: white;
-      border-radius: 8px;
-      cursor: pointer;
-      transition: background 0.2s;
-      font-family: sans-serif;
-    `;
+    try {
+        // Now 'await' will work because the function is 'async'
+        const response = await fetch(url);
+        if (!response.ok) throw new Error("Network response was not ok");
+        tutorials = await response.json(); 
+    } catch(e) {
+        console.log("Fetch Error: ", e);
+    }
+    
+    const container = document.getElementById('list-wrapper');
+    if (!container) return;
+    
+    container.innerHTML = '';
 
-    // Inner HTML for the bar (Icon + Title)
-    bar.innerHTML = `
-      <span style="margin-right: 15px; opacity: 0.5;">${index + 1}</span>
-      <span style="flex-grow: 1; font-weight: 500;">${item.className}</span>
-      <span style="font-size: 0.8em; color: #4CAF50;">▶ Play</span>
-    `;
+    tutorials.forEach((item, index) => {
+        const bar = document.createElement('div');
+        bar.className = 'playlist-bar';
+        bar.style.cssText = `
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            margin-bottom: 10px;
+            background-color: #2a2a2a;
+            color: white;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s;
+            font-family: sans-serif;
+        `;
 
-    // Hover effect
-    bar.onmouseenter = () => bar.style.backgroundColor = '#383838';
-    bar.onmouseleave = () => bar.style.backgroundColor = '#2a2a2a';
+        bar.innerHTML = `
+            <span style="margin-right: 15px; opacity: 0.5;">${index + 1}</span>
+            <span style="flex-grow: 1; font-weight: 500;">${item.className}</span>
+            <span style="font-size: 0.8em; color: #4CAF50;">▶ Play</span>
+        `;
 
-    // Click event to load the video (e.g., into a main player area)
-    bar.onclick = () => {
-      console.log(`Loading: ${item.className}`);
-      // You could append item.youtubeIframe to a #video-display div here
-    };
+        bar.onclick = () => {
+            console.log(`Loading: ${item.className}`);
+            // If you have a video display area:
+            // $('#video-display').html(item.youtubeIframe);
+        };
 
-    container.appendChild(bar);
-  });
+        container.appendChild(bar);
+    });
 }
 
-
-document.addEventListener('DOMContentLoaded', renderPlaylist);
-	
-	
-
+document.addEventListener('DOMContentLoaded', renderPlaylist);