Added 2lcc

site/2lcc/main.js

@@ -0,0 +1,72 @@
+async function getCountryData() {
+    let countryData = await fetch(`cclist.json`);
+    let countryList = await countryData.json();
+
+    let countryTableBody = document.querySelector("#country-list tbody");
+    for (let co of countryList) {
+        let newTR = document.createElement("tr");
+        newTR.dataset["code"] = co.Code.toLowerCase();
+        newTR.dataset["name"] = co.Name.toLowerCase();
+        newTR.dataset["role"] = "country";
+
+        let newTD = document.createElement("td");
+        newTD.textContent = co.Code;
+        newTR.appendChild(newTD);
+
+        newTD = document.createElement("td");
+        newTD.textContent = co.Name;
+        newTR.appendChild(newTD);
+
+        countryTableBody.appendChild(newTR);
+    }
+};
+
+function applyFilter(fval) {
+    if (fval == "") {
+        document.querySelectorAll('tr[data-role="country"]').forEach((x) => {
+            x.classList.remove("hidden", "exact");
+        })
+    }
+    
+    const fvalLower = fval.toLowerCase();
+    
+    document.querySelectorAll('tr[data-role="country"]').forEach((x) => {
+        const matches = (x.dataset["code"].indexOf(fvalLower) != -1) ||
+            (x.dataset["name"].indexOf(fvalLower) != -1);
+        
+        if (!matches) {
+            x.classList.add("hidden");
+            x.classList.remove("exact");
+        } else {            
+            x.classList.remove("hidden");
+            
+            if ((x.dataset["code"] == fvalLower) || (x.dataset["name"] == fvalLower)) {
+                x.classList.add("exact");
+            } else {
+                x.classList.remove("exact");
+            }
+        }
+    })    
+}
+
+function setupCountryFilter() {
+    let lastFilterValue = "";
+    let filter = document.querySelector("#filter");
+    filter.addEventListener("keyup", (ev) => {
+        ev.preventDefault();
+
+        if (filter.value == lastFilterValue) {
+            return;
+        }
+        lastFilterValue = filter.value;
+
+        applyFilter(filter.value);
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    getCountryData();
+    setupCountryFilter();
+});
+
+