Search input reset

sass/style.scss

@@ -42,10 +42,7 @@ main.songs {
 		&.hidden { display: none }
 
 		&>* {
-			border: 0;
 			border-radius: .5em;
-			padding: .75em 1em;
-			font-size: 1em;
 			box-shadow: rgba(15, 17, 21, 0.5) 0px 3px 6px 0px;
 			background-color: #3b4252;
 			color: inherit;
@@ -56,8 +53,32 @@ main.songs {
 			}
 		}
 
-		input[type="text"] {
+		form {
 			grid-column: 1 / 3;
+			display: flex;
+			overflow: hidden;
+
+			input {
+				font-size: inherit;
+				border: 0;
+				background-color: inherit;
+				color: inherit;
+			}
+
+			input[type="search"] {
+				flex-grow: 1;
+				padding: .75em 1em;
+			}
+
+			input[type="reset"] {
+				cursor: pointer;
+				width: 3em;
+				padding: 0;
+				background-size: auto 1.5em;
+				background-position: center;
+				background-repeat: no-repeat;
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(160,163,170,1)'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 10.5858L14.8284 7.75736L16.2426 9.17157L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17157 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17157L9.17157 7.75736L12 10.5858Z'%3E%3C/path%3E%3C/svg%3E");
+			}
 		}
 
 		&>.button {
@@ -65,6 +86,7 @@ main.songs {
 			text-align: center;
 			cursor: pointer;
 			user-select: none;
+			padding: .75em 1em;
 
 			&.selected {
 				color: #fff;

static/js/filter.js

@@ -1,6 +1,7 @@
-const filters = document.querySelector(".filters");
-const buttons = Array.from(filters.querySelectorAll(".button"));
-const search = document.querySelector("input[type='text']");
+const filters  = document.querySelector(".filters");
+const buttons  = Array.from(filters.querySelectorAll(".button"));
+const search   = document.querySelector("input[type='search']");
+const form     = document.querySelector("form");
 const songList = document.querySelector(".song-list");
 
 let selectedCategory = null;
@@ -29,7 +30,9 @@ function filterSongs() {
 }
 
 // Event listeners
-search.addEventListener("keyup", filterSongs);
+search.addEventListener("input", filterSongs);
+// Filtering happens before the reset itself without this timeout
+form.addEventListener("reset", () => setTimeout(filterSongs, 0));
 buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));
 
 // Normalize song titles

templates/index.html

@@ -12,7 +12,10 @@
 {% block content %}
 	<main class="songs">
 		<section class="filters">
-			<input type="text" placeholder="Hledat">
+			<form>
+				<input type="search" placeholder="Hledat">
+				<input type="reset" value="">
+			</form>
 			<div class="button" data-category="classic">Classic</div>
 			<div class="button" data-category="mixtape">Mixtape</div>
 		</section>