Find
var details = document.getElementById("the-details"), // form
document.addEventListener('click', function(e){
if(!details.contains(e.target)){
details.removeAttribute('open')
}
})
html {
scroll-behavior: smooth;
}
nav {
top: 8vh;
width:100%;
border: 1px solid #ffe9e9;
background-color: #fffed6;
}
#the-reset { padding: 2px; }
#the-reset:hover { background-color: bisque; }
#the-list {
list-style: none;
margin: 0;
padding: 10px;
height:50vh;
overflow-y:scroll;
}
#the-list li {
padding: 1px;
}
#the-list li:hover { background: #fffed6; }
#the-list li.hide { display: none; }
header{
height: 20px;
padding: 0px;
background-color: #fffed6;
z-index: 99;
position: sticky;
top: 0;
}
a{
scroll-margin-top: 2rem;
}
Productions:
X
var filter = document.getElementById("the-filter"), // search box
list = document.querySelectorAll("#the-list li"); // all list items
update=function(){
let search = filter.value.toLowerCase();
for (let i of list) {
let item = i.innerHTML.toLowerCase();
if (item.indexOf(search) == -1) { i.classList.add("hide"); }
else { i.classList.remove("hide"); }
}
};
window.addEventListener("load", () => {filter.onkeyup =update;});