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>
|
||||
<ul>
|
||||
<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>
|
||||
</main>
|
||||
</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>
|
||||
<ul>
|
||||
<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>
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Reference in a new issue