implement frog cache and search bar

fixes #64
This commit is contained in:
Stefan Riesenberger 2023-09-05 11:13:24 +02:00
parent f71668e3ff
commit 9a0b40aa48
1 changed files with 22 additions and 1 deletions

View File

@ -32,9 +32,13 @@
</head>
<body style="background-color:#292929;">
<script>
let frogs = null;
function set_all_format(){
let obj = document.getElementById("fileformat");
const frogs = document.getElementsByClassName("frog");
if (frogs == null){
frogs = document.getElementsByClassName("frog");
}
for (let i = 0; i < frogs.length; i++) {
let frog = frogs[i];
let val = frog.getAttribute("value");
@ -43,6 +47,22 @@
frog.href = url;
}
}
function search_frogs(searchObj){
if (frogs == null){
frogs = document.getElementsByClassName("frog");
}
let search_val = searchObj.value;
for (let i = 0; i < frogs.length; i++) {
let frog = frogs[i];
let val = frog.firstChild.getAttribute("title");
if (val.search(new RegExp(search_val+"", "i")) != -1) {
frog.removeAttribute("hidden");
}else{
frog.setAttribute("hidden","");
}
}
}
</script>
<header class="page-header" role="banner">
<h1 class="project-name">frog_emojis</h1>
@ -56,6 +76,7 @@
<option value="png/512">512px PNG</option>
<option value="png/1024">1024px PNG</option>
</select>
<input type="text" oninput="search_frogs(this)" placeholder="Search for frogs...">
</header>
<div id="mainholder" style="text-align:center"> <!-- It's like the hand holder but with frogs -->