Update script.js

script.js

@@ -1,29 +1,144 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const translateButton = document.querySelector("#translate");
-    const textInput = document.querySelector("#text");
-    const fromInput = document.querySelector("#from");
-    const toInput = document.querySelector("#to");
+const languages = {
+    "auto": "Detect Language",
+    "af": "Afrikaans",
+    "sq": "Albanian",
+    "am": "Amharic",
+    "ar": "Arabic",
+    "hy": "Armenian",
+    "az": "Azerbaijani",
+    "eu": "Basque",
+    "bn": "Bengali",
+    "be": "Belarusian",
+    "bs": "Bosnian",
+    "bg": "Bulgarian",
+    "ca": "Catalan",
+    "ceb": "Cebuano",
+    "zh-CN": "Chinese (Simplified)",
+    "zh-TW": "Chinese (Traditional)",
+    "hr": "Croatian",
+    "cs": "Czech",
+    "da": "Danish",
+    "nl": "Dutch",
+    "en": "English",
+    "eo": "Esperanto",
+    "et": "Estonian",
+    "tl": "Filipino",
+    "fi": "Finnish",
+    "fr": "French",
+    "gl": "Galician",
+    "ka": "Georgian",
+    "de": "German",
+    "el": "Greek",
+    "gu": "Gujarati",
+    "ht": "Haitian Creole",
+    "ha": "Hausa",
+    "he": "Hebrew",
+    "hi": "Hindi",
+    "hu": "Hungarian",
+    "is": "Icelandic",
+    "id": "Indonesian",
+    "it": "Italian",
+    "ja": "Japanese",
+    "jw": "Javanese",
+    "kn": "Kannada",
+    "kk": "Kazakh",
+    "km": "Khmer",
+    "ko": "Korean",
+    "ku": "Kurdish (Kurmanji)",
+    "ky": "Kyrgyz",
+    "lo": "Lao",
+    "la": "Latin",
+    "lv": "Latvian",
+    "lt": "Lithuanian",
+    "lb": "Luxembourgish",
+    "mk": "Macedonian",
+    "ms": "Malay",
+    "ml": "Malayalam",
+    "mt": "Maltese",
+    "mi": "Maori",
+    "mr": "Marathi",
+    "mn": "Mongolian",
+    "my": "Myanmar (Burmese)",
+    "ne": "Nepali",
+    "no": "Norwegian",
+    "or": "Odia (Oriya)",
+    "ps": "Pashto",
+    "fa": "Persian",
+    "pl": "Polish",
+    "pt": "Portuguese",
+    "pa": "Punjabi",
+    "ro": "Romanian",
+    "ru": "Russian",
+    "sm": "Samoan",
+    "gd": "Scots Gaelic",
+    "sr": "Serbian",
+    "st": "Sesotho",
+    "sn": "Shona",
+    "sd": "Sindhi",
+    "si": "Sinhala",
+    "sk": "Slovak",
+    "sl": "Slovenian",
+    "so": "Somali",
+    "es": "Spanish",
+    "su": "Sundanese",
+    "sw": "Swahili",
+    "sv": "Swedish",
+    "tg": "Tajik",
+    "ta": "Tamil",
+    "te": "Telugu",
+    "th": "Thai",
+    "tr": "Turkish",
+    "uk": "Ukrainian",
+    "ur": "Urdu",
+    "uz": "Uzbek",
+    "vi": "Vietnamese",
+    "cy": "Welsh",
+    "xh": "Xhosa",
+    "yi": "Yiddish",
+    "yo": "Yoruba",
+    "zu": "Zulu"
+};
+
+// Populate language dropdowns
+const fromSelect = document.querySelector("#from");
+const toSelect = document.querySelector("#to");
+
+Object.entries(languages).forEach(([code, name]) => {
+    const optionFrom = document.createElement("option");
+    optionFrom.value = code;
+    optionFrom.textContent = name;
+    fromSelect.appendChild(optionFrom);
+
+    const optionTo = document.createElement("option");
+    optionTo.value = code;
+    optionTo.textContent = name;
+    toSelect.appendChild(optionTo);
+});
+
+// Set default values
+fromSelect.value = "auto";  // Auto-detect
+toSelect.value = "vi";  // Default to Vietnamese
+
+// Translation Function
+document.querySelector("#translate").addEventListener("click", () => {
+    const text = document.querySelector("#text").value;
+    const fromLang = fromSelect.value;
+    const toLang = toSelect.value;
     const resultDiv = document.querySelector("#result");
 
-    translateButton.addEventListener("click", () => {
-        const text = textInput.value;
-        const from = fromInput.value || "auto";
-        const to = toInput.value || "vi";
-
-        if (!text) {
-            resultDiv.textContent = "Please enter text to translate.";
-            return;
-        }
-
-        const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${from}&tl=${to}&dt=t&q=${encodeURIComponent(text)}`;
-
-        fetch(url)
-            .then(response => response.json())
-            .then(data => {
-                resultDiv.textContent = data[0].map(item => item[0]).join(" ");
-            })
-            .catch(error => {
-                resultDiv.textContent = "Error: " + error.message;
-            });
-    });
+    if (!text) {
+        resultDiv.textContent = "Please enter text to translate.";
+        return;
+    }
+
+    const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${fromLang}&tl=${toLang}&dt=t&q=${encodeURIComponent(text)}`;
+
+    fetch(url)
+        .then(response => response.json())
+        .then(data => {
+            resultDiv.textContent = data[0].map(item => item[0]).join(" ");
+        })
+        .catch(error => {
+            resultDiv.textContent = "Error: " + error.message;
+        });
 });