atleastimtrying/sorter.html

## 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>
	<!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>