soundboard/static/main.js

function ready(fn) {
	if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
		fn();
	} else {
		document.addEventListener("DOMContentLoaded", fn);
	}
}

ready(function() {
	hideSections();

	var sections = document.querySelectorAll("section");
	var nav = document.querySelectorAll("nav > a");

	sections[0].style.display = "block";

	nav.forEach(function(item) {
		item.onclick = function(e) {
			e.preventDefault();

			var target = e.target.href.split("#");
			var id = target[target.length - 1];

			hideSections();

			document.querySelector("#" + id).style.display = "block";
		};
	});

	var searchfield = document.querySelector("#search");

	searchfield.addEventListener("keyup", function() {
		console.log("Search!");

		var buttons = document.querySelectorAll(".sound");

		buttons.forEach(function(item) {
			item.style.display = "inline-block";
		});

		buttons.forEach(function(item) {
			var name = item.firstChild.innerHTML;
	
			if (name.toLowerCase().indexOf(searchfield.value.toLowerCase()) === -1) {
				item.style.display = "none";
			}
		});
	});

	var reset = document.querySelector("#reset");

	reset.addEventListener("click", function() {
		var buttons = document.querySelectorAll(".sound");

		buttons.forEach(function(item) {
			item.style.display = "inline-block";
		});

		searchfield.value = "";
	});
});

function hideSections() {
	var sections = document.querySelectorAll("section");

	sections.forEach(function(item, i) {
		item.style.display = "none";
	});
}