html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<label><input class="check-box" type="checkbox"> Mango</label>
<label><input class="check-box" type="checkbox"> Banana</label>
<label><input class="check-box" type="checkbox"> Orange</label>
<label><input class="check-box" type="checkbox"> Foo</label>
<input type="text" id="search" placeholder="Try entering Mango">
<p id="text"></p>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
}
label {
display: block;
}
input[type="text"] {
display: block;
margin: 10px 0;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const searchItem = () => {
search.oninput = () => {
const labels = document.getElementsByTagName('label');
let count = 0;
for (let el of labels) {
if (el.innerText.indexOf
(search.value) > -1) {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
for (let el of labels) if (el.style.display === 'block') count++;
text.innerHTML = `${count} items found`;
}
}
onload = searchItem;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run