const user = document.getElementById("user");
const btn = document.getElementById("getcode");
const mount = document.getElementById("mount");
const api = "https://bonfirefetcher.herokuapp.com/";

let template = (title, solution) => {
		return `<h4>${title}</h1><pre><code class="javascript">${solution}</code></pre>`;
	}; // End of setting template

btn.addEventListener("click", () => {
	mount.innerHTML = "Waiting for the API to respond back...";
	
	
	let userName = user.value;
	
	$.getJSON(api+userName, function(data) {
		mount.innerHTML = "";
		
  	data.forEach((challenge) => {
			const name = challenge.title;
			const sol = challenge.solution;
			
			if(!/<\/\w+>/i.test(challenge.solution)) {
				mount.innerHTML += template(name, sol);
			}
		});
		
		let codeblocks = document.getElementsByTagName("code");
		
		for(let i = 0; i < codeblocks.length; i++) {
			hljs.highlightBlock(codeblocks[i]);
		}
	});
	
	user.value = "";
});