Add reset button for search

static/main.css

@@ -64,6 +64,15 @@ section {
 	width: 100%;
 }
 
+#reset {
+	font-size: 2em;
+	padding-left: 5px;
+}
+
+#reset:hover {
+	cursor: pointer;
+}
+
 .sound {
 	display: inline-block;
 }

static/main.js

@@ -42,6 +42,16 @@ ready(function() {
 			}
 		});
 	});
+
+	var reset = document.querySelector("#reset");
+
+	reset.addEventListener("click", function() {
+		var buttons = document.querySelectorAll(".sound");
+
+		buttons.forEach(function(item) {
+			item.style.display = "inline-block";
+		});
+	});
 });
 
 function hideSections() {

templates/index.html

@@ -13,7 +13,7 @@
 		</nav>
 		<content>
 			<section id="sounds">
-				<div><input type="text" id="search" /></div>
+				<div><input type="text" id="search" /><span id="reset">⨯</span></div>
 				{% for sound in sounds %}
 				<div class="sound"><a href="{{ '/play/' + sound }}">{{ sound.split('.', 1)[0] }}</a></div>
 				{% endfor %}