82 lines
2.7 KiB
HTML
82 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Mojifinder</title>
|
|
<style>
|
|
body {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
|
|
table {font-family: "Lucida Console", "Monaco", monospace;
|
|
text-align: left; min-width: 300px}
|
|
td.code {min-width: 40px; text-align: right;}
|
|
td.char {min-width: 50px; text-align: center;}
|
|
caption {background: lightgray; }
|
|
</style>
|
|
<script>
|
|
"use strict";
|
|
|
|
function appendCell(row, text, class_) {
|
|
let cell = document.createElement('td');
|
|
cell.appendChild(document.createTextNode(text));
|
|
if (class_ !== undefined) {
|
|
cell.setAttribute('class', class_);
|
|
}
|
|
row.appendChild(cell);
|
|
}
|
|
|
|
function fillTable(results) {
|
|
const table = document.querySelector('table');
|
|
while (table.lastElementChild.tagName === 'TR') {
|
|
table.removeChild(table.lastElementChild);
|
|
}
|
|
let count = 0;
|
|
results.forEach((item) => {
|
|
let row = document.createElement('tr');
|
|
let code = item.char.codePointAt(0);
|
|
let uCode = 'U+' + code.toString(16).toUpperCase().padStart(4, '0');
|
|
appendCell(row, uCode, 'code');
|
|
appendCell(row, item.char, 'char');
|
|
appendCell(row, item.name);
|
|
table.appendChild(row);
|
|
count++;
|
|
});
|
|
let plural = "s";
|
|
if (count===1) plural = "";
|
|
let msg = `${count} character${plural} found`;
|
|
document.querySelector('caption').textContent = msg;
|
|
}
|
|
|
|
async function fetchResults(query) {
|
|
let url = location.href.replace(location.search, '');
|
|
const response = await fetch(`${url}search?q=${query}`);
|
|
if (response.ok) {
|
|
return response.json();
|
|
} else {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
}
|
|
|
|
function updateTable(event) {
|
|
const input = document.getElementById('query');
|
|
fetchResults(input.value)
|
|
.then(fillTable)
|
|
.catch(error => console.log(error));
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
const input = document.getElementById('query');
|
|
input.addEventListener('change', updateTable);
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<input id="query" type="search" name="q" value="">
|
|
<button onClick="updateTable()">Search</button>
|
|
</div>
|
|
<table>
|
|
<caption></caption>
|
|
</table>
|
|
</body>
|
|
</html>
|