Added 2lcc
This commit is contained in:
parent
7073a2d3f2
commit
da72304428
1
site/2lcc/cclist.json
Normal file
1
site/2lcc/cclist.json
Normal file
File diff suppressed because one or more lines are too long
38
site/2lcc/index.html
Normal file
38
site/2lcc/index.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Clocks - Tools</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
||||||
|
>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="container">
|
||||||
|
<header>
|
||||||
|
<hgroup>
|
||||||
|
<h1>Two-letter Country Codes</h1>
|
||||||
|
<p>Browser for ISO 3166-1</p>
|
||||||
|
</hgroup>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="filter">
|
||||||
|
<input placeholder="Filter" id="filter">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id="country-list">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="code-column">Code</th>
|
||||||
|
<th>Country</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script src="main.js" type="module"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
72
site/2lcc/main.js
Normal file
72
site/2lcc/main.js
Normal file
|
|
@ -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();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
15
site/2lcc/style.css
Normal file
15
site/2lcc/style.css
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
table#country-list {
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#country-list th.code-column {
|
||||||
|
width: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#country-list tr.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#country-list tr.exact td {
|
||||||
|
background-color: rgb(237, 201, 241);
|
||||||
|
}
|
||||||
|
|
@ -20,7 +20,8 @@
|
||||||
<main>
|
<main>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/clocks/">Clocks</a></li>
|
<li><a href="/clocks/">Clocks</a></li>
|
||||||
<li><a href="/freelens-logo/">Freelens Logo maker</a></li>
|
<li><a href="/freelens-logo/">Freelens Logo Maker</a></li>
|
||||||
|
<li><a href="/2lcc/">Two-letter Country Codes</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
1
target/2lcc/cclist.json
Normal file
1
target/2lcc/cclist.json
Normal file
File diff suppressed because one or more lines are too long
38
target/2lcc/index.html
Normal file
38
target/2lcc/index.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Clocks - Tools</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
||||||
|
>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="container">
|
||||||
|
<header>
|
||||||
|
<hgroup>
|
||||||
|
<h1>Two-letter Country Codes</h1>
|
||||||
|
<p>Browser for ISO 3166-1</p>
|
||||||
|
</hgroup>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="filter">
|
||||||
|
<input placeholder="Filter" id="filter">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id="country-list">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="code-column">Code</th>
|
||||||
|
<th>Country</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script src="main.js" type="module"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
72
target/2lcc/main.js
Normal file
72
target/2lcc/main.js
Normal file
|
|
@ -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();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
15
target/2lcc/style.css
Normal file
15
target/2lcc/style.css
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
table#country-list {
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#country-list th.code-column {
|
||||||
|
width: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#country-list tr.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#country-list tr.exact td {
|
||||||
|
background-color: rgb(237, 201, 241);
|
||||||
|
}
|
||||||
|
|
@ -20,7 +20,8 @@
|
||||||
<main>
|
<main>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/clocks/">Clocks</a></li>
|
<li><a href="/clocks/">Clocks</a></li>
|
||||||
<li><a href="/freelens-logo/">Freelens Logo maker</a></li>
|
<li><a href="/freelens-logo/">Freelens Logo Maker</a></li>
|
||||||
|
<li><a href="/2lcc/">Two-letter Country Codes</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Binary file not shown.
Loading…
Reference in a new issue