Skip to content

Instantly share code, notes, and snippets.

@atleastimtrying

atleastimtrying/sorter.html

Created July 21, 2012 21:59
Show Gist options
  • Save atleastimtrying/3157340 to your computer and use it in GitHub Desktop.
Save atleastimtrying/3157340 to your computer and use it in GitHub Desktop.
Download ZIP
link sorter
Raw
sorter.html
<!DOCTYPE>
<html>
<head>
<title>Link sorter</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<style>
a, input{
margin:5px;
padding:10px;
font-family:sans-serif;
color:white;
border-radius:10px;
border:none;
outline:none;
display:inline-block;
background:rgba(0,0,0,0.7);
text-decoration:none;
box-shadow:2px 2px 3px rgba(0,0,0,0.3);
-webkit-transition:box-shadow 0.25s ease-out;
}
a:hover{
box-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
input{
font-size:30px;
padding:20px;
width:-webkit-calc(100% - 10px);
display:block;
}
.hidden{
display:none;
}
</style>
</head>
<body>
<input placeholder="search here" autofocus>
<a href='http://www.google.com'>google</a>
<a href='http://www.facebook.com'>facebook</a>
<a href='http://mail.google.com'>gmail</a>
<script>
document.querySelector('input').addEventListener('keyup', function(e){
var links = document.getElementsByTagName('a');
for(var i = 0, l = links.length; i < l; i++){
var link = links[i];
link.innerHTML.toLowerCase().indexOf(e.currentTarget.value.toLowerCase()) === -1 ? link.className = 'hidden' : link.className = '';
}
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment