Initial commit

assets/css/main.css

@@ -0,0 +1,91 @@
+@font-face {
+    font-family: 'atkinson';
+    src: url('/fonts/AtkinsonHyperlegibleNext-Regular.otf') format('opentype');
+}
+
+:root {
+  --highlight-color: oklch(46.11% 0.198 298.4);
+}
+
+body {
+  color: #222;
+  font-family: atkinson, sans-serif;
+  line-height: 1.5;
+  margin-inline: auto;
+  padding-inline: 20px;
+  max-width: 600px;
+  width: auto;
+  font-size: 1.2rem;
+}
+
+h1 {
+  color: var(--highlight-color);
+}
+
+header {
+  text-align: center;
+}
+
+footer {
+  font-size: 0.9rem;
+  color: #777;
+}
+
+div.filter {
+  text-align: center;
+  margin-block-end: 20px;
+}
+
+input {
+  font-size: 1.2rem;
+}
+
+table {
+  margin-inline: auto;
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 400px;
+}
+
+table thead {
+  color: var(--highlight-color);
+}
+
+table thead th:nth-child(1) {
+  width: 80px;
+}
+
+table tbody td {
+  padding: 2px 8px;
+}
+
+table tbody td:nth-child(1) {
+  background-color: oklch(94.1% 0.046 305.24);
+  text-align: center;
+}
+
+table thead th {
+  border-bottom: 1px solid #222;
+  margin-bottom: 1rem;
+}
+
+table {
+  border-bottom: 1px solid #222;
+}
+
+footer {
+  text-align: center;
+}
+
+a {
+  color: #00e;
+  text-decoration: none;
+}
+
+.hidden {
+  display: none;
+}
+
+table tbody tr.exact td {
+  background: oklch(95% 0.07 92.39);
+}

assets/js/main.js

@@ -0,0 +1,42 @@
+let fitler = document.querySelector("#filter");
+let lastFilterValue = "";
+
+
+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");
+            }
+        }
+    })    
+}
+
+filter.addEventListener("keyup", (ev) => {
+    ev.preventDefault();
+    
+    if (filter.value == lastFilterValue) {
+        return;
+    }
+    lastFilterValue = filter.value;
+    
+    applyFilter(filter.value);
+})