Untitled

<html>
	<body align = "center" style = "background-color: lime">
		<h1>Problems Solved: </h1>
		<h2>A : <label id = "aC"></label></h2>
		<h2>B : <label id = "bC"></label></h2>
		<h2>C : <label id = "cC"></label></h2>
		<h2>D : <label id = "dC"></label></h2>
		<style>
			.button:focus {
				outline: none;
			}
		</style>
		<label style = "font-size: +30" id="count"></label><br><br>
		<button style = "font-size: +30; outline: none" id = "a" onclick = "counterFunca()">A</button>
		<button style = "font-size: +30" id = "b" onclick = "counterFuncb()">B</button>
		<button style = "font-size: +30" id = "c" onclick = "counterFuncc()">C</button>
		<button style = "font-size: +30" id = "d" onclick = "counterFuncd()">D</button>
		<button style = "font-size: +20" onclick = "resetFunc()">Reset Count</button>
		<script>
			acount = 0;
			bcount = 0;
			ccount = 0;
			dcount = 0;
			function counterFunca(){
				acount++;
				document.getElementById("aC").innerHTML = acount;
				const bt = document.getElementById("a");
				bt.style.backgroundColor = "lime";
			}

			function counterFuncb(){
				bcount++;
				document.getElementById("bC").innerHTML = bcount;
				const bt = document.getElementById("b");
				bt.style.backgroundColor = "lime";
			}

			function counterFuncc(){
				ccount++;
				document.getElementById("cC").innerHTML = ccount;
				const bt = document.getElementById("c");
				bt.style.backgroundColor = "lime";
			}

			function counterFuncd(){
				dcount++;
				document.getElementById("dC").innerHTML = dcount;
				const bt = document.getElementById("d");
				bt.style.backgroundColor = "lime";
			}
			function resetFunc() {
				acount = 0;
				bcount = 0;
				ccount = 0;
				dcount = 0;
				document.getElementById("aC").innerHTML = acount;
				document.getElementById("bC").innerHTML = bcount;
				document.getElementById("cC").innerHTML = ccount;
				document.getElementById("dC").innerHTML = dcount;
				document.reload();
			}
		</script>
	</body>
</html>