Javascript

function query() {
var x = document.querySelectorAll(".query-p");
var y = document.getElementById("search");
var i;
    	for(i = 0; i < x.length; i++) {
		if(x[i].innerHTML.includes(y.value)) {x[i].style.display = 'block';} else {x[i].style.display = 'none';}
    	     console.log(x[i].innerHTML);
	}
}

function elm() {
save();
set();
}

function remove() {
if(e <= 0 || a <= 0 || h <= 0) {alert("Nothing left to delete.");} else {
e -= 1;
a -= 1;
h -= 1;
localStorage.setItem("e", e);
localStorage.setItem("a", a);
localStorage.setItem("h", h);
location.reload();
}
}

function deleteAll() {
localStorage.setItem("e", 0);
localStorage.setItem("a", 0);
localStorage.setItem("h", 0);
location.reload();
}

if(localStorage.getItem("e") == null || localStorage.getItem("e") == undefined) {
localStorage.setItem("e", 0);
var e = localStorage.getItem("e");
e = JSON.parse(e);
} else {
console.log(e);
var e = localStorage.getItem("e");
console.log(e);
e = JSON.parse(e);
console.log(e);
}

if(localStorage.getItem("h") == null || localStorage.getItem("h") == undefined) {
localStorage.setItem("h", 0);
var h = localStorage.getItem("h");
h = JSON.parse(h);
} else {
var h = localStorage.getItem("h");
h = JSON.parse(h);
}

if(localStorage.getItem("s") == null || localStorage.getItem("s") == undefined) {
localStorage.setItem("s", 1);
var s = localStorage.getItem("s");
s = JSON.parse(s);
} else {
var s = localStorage.getItem("s");
s = JSON.parse(s);
}

window.onload = function() {
	if(e > 0) {
	    for(h = 1; h <= e; h++) {
		var para1 = document.createElement("p");
		var para2 = document.createElement("pre");
		var element = document.getElementById("test-div");
		para1.setAttribute("id", "display-pre"+h);
		para1.setAttribute("class", "query-p");
		para2.setAttribute("id", "display-pre-a"+h);
		//para2.setAttribute("class", "show");
		element.insertBefore(para1, document.getElementById("child"));
		element.insertBefore(para2, document.getElementById("child"));
		document.getElementById("display-pre"+h).innerHTML = localStorage.getItem("display"+h);
		document.getElementById("display-pre-a"+h).innerHTML = localStorage.getItem("display-a"+h);
			$("#display-pre"+h).attr("data-id", "p"+h);
			$("#display-pre-a"+h).attr("data-id", "pre"+h);
		localStorage.setItem("h", h);
		h = localStorage.getItem("h");
	    }
	}
/*
	var p = 1;
	setInterval(function() {
	if(p <= document.querySelectorAll(".show").length) {
	document.getElementById("display-pre"+p).onclick = function() {
	console.log(p);
		if(document.getElementById("display-pre-a"+p).style.display == '') {document.getElementById("display-pre-a"+p).style.display = 'block';} else
		if(document.getElementById("display-pre-a"+p).style.display == 'block') {document.getElementById("display-pre-a"+p).style.display = 'none';}
	};
	p++;
	if(p > document.querySelectorAll(".show").length) {p = 1;}
	}
	}, 100);*/
}

document.onkeydown = checkKey;

function checkKey(e) {

	e = e || window.event;

	if(e.keyCode == '13') {
	    query();
	}
}

document.getElementById("search").value = "";
/*
document.getElementById("search").onblur=function() {
	textTransform();
}

function textTransform () {
var tgt = document.getElementById("search");
var capitalised = [];
var parts = tgt.value.split(" ");
for (var i=0;i<parts.length;i++) {
	capitalised.push(parts[i].substring(0,1).toUpperCase()+parts[i].substring(1));
}
tgt.value=capitalised.join(" ");
}
*/
if(localStorage.getItem("a") == null || localStorage.getItem("a") == undefined) {
localStorage.setItem("a", 0);
var a = localStorage.getItem("a");
a = JSON.parse(a);
} else {
var a = localStorage.getItem("a");
a = JSON.parse(a);
}

var cre = 0;
function newInput() {
if(cre == 0) {
a++;
var para1 = document.createElement("input");
var para2 = document.createElement("p");
var para3 = document.createElement("button");
var para4 = document.createElement("textarea");
var para5 = document.createElement("pre");
var para6 = document.createElement("br");
var element = document.getElementById("test-div");
para1.setAttribute("id", "textbox"+a);
para2.setAttribute("id", "display-pre"+a);
para2.setAttribute("class", "query-p");
para3.setAttribute("id", "save"+a);
para3.setAttribute("onclick", "elm()");
para4.setAttribute("id", "textarea"+a);
para5.setAttribute("id", "display-pre-a"+a);
para5.setAttribute("class", "show");
element.appendChild(para1);
element.appendChild(para2);
element.appendChild(para3);
element.appendChild(para6);
element.appendChild(para4);
element.appendChild(para5);
document.getElementById("save"+a).innerHTML = "Save";
$(function () {
	$("#display-pre"+a).attr("data-id", "p"+a);
	$("#display-pre-a"+a).attr("data-id", "pre"+a);
});
cre = 1;
a--;
} else {alert("You already have a new element.");}
}

function save() {
a++;
   localStorage.setItem("display"+a, document.getElementById("textbox"+a).value);
   localStorage.setItem("display-a"+a, document.getElementById("textarea"+a).value);
a--;
}
function set() {
a++;
document.getElementById("textbox"+a).style.display = 'none';
document.getElementById("save"+a).style.display = 'none';
document.getElementById("display-pre"+a).innerHTML = document.getElementById("textbox"+a).value;
document.getElementById("textarea"+a).style.display = 'none';
document.getElementById("display-pre-a"+a).innerHTML = document.getElementById("textarea"+a).value;
cre = 0;
e++;
console.log(e+","+localStorage.getItem("e"));
localStorage.setItem("e", e);
a = localStorage.getItem("e");
a = JSON.parse(e);
console.log(e+","+localStorage.getItem("e"));

localStorage.setItem("a", a);
a = localStorage.getItem("a");
a = JSON.parse(a);
}