From 72f112561821afd7b3110892025df9ae3d8c7aee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20M=C3=BCller?= <mail@mueller-martin.net>
Date: Thu, 13 Jul 2017 23:29:00 +0200
Subject: [PATCH] Add reset button for search

---
 static/main.css      |  9 +++++++++
 static/main.js       | 10 ++++++++++
 templates/index.html |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/static/main.css b/static/main.css
index b2ecfac..6934739 100644
--- a/static/main.css
+++ b/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;
 }
diff --git a/static/main.js b/static/main.js
index 1a55915..e2517e7 100644
--- a/static/main.js
+++ b/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() {
diff --git a/templates/index.html b/templates/index.html
index bb5419a..b36edb2 100644
--- a/templates/index.html
+++ b/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 %}