salarcode/click-counter.html

## click-counter.html
<!DOCTYPE html>
<html>

<head>
	<title>Click Counter</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-family: "Segoe UI";
		}

		span {
			background-color: grey;
			border-radius: 15px;
		}

		button {
			background-color: #4CAF50;
			color: white;
			padding: 30px 35px;
			font-size: 16px;
			border: none;
			cursor: pointer;
			font-size: 2em;
		}

		a {
			color: #4CAF50;
			text-decoration: none;
		}

		#decrease {
			float: right;
		}

		button:hover {
			background-color: #3e8e41;
		}
	</style>
	<script>
		var i = 0

		function vibrateShort() {
			if (window.navigator["vibrate"])
				window.navigator.vibrate(50);
		}
		function vibrateLong() {
			if (window.navigator["vibrate"])
				window.navigator.vibrate(200);
		}

		function Count() {
			var text = "Counter : " + (i++ + 1);
			document.getElementById("divHeader").innerHTML = text;
			vibrateShort();
		}
		function Decrease() {
			var text = "Counter : " + (i-- - + 1);
			document.getElementById("divHeader").innerHTML = text;
			vibrateLong()
		}
		function Reset() {
			InsertElement("lstHistory", "li", "", "Count : " + i);
			document.getElementById("divHistory").style.display = '';

			i = -1;
			Count();
			vibrateLong();
		}
		function ClearHistory() {
			document.getElementById("lstHistory").innerHTML = '';
			document.getElementById("divHistory").style.display = 'none';
			vibrateLong();
		}
		function InsertElement(parentId, elementTag, elementId, html) {
			// Adds an element to the document
			var p = document.getElementById(parentId);
			var newElement = document.createElement(elementTag);
			newElement.setAttribute('id', elementId);
			newElement.innerHTML = html;
			p.prepend(newElement);
		}
	</script>
</head>

<body>
	<div align="center">
		<h1 id=divHeader>Click Counter</h1>
		<button id=btn onclick="Count()">Click Me!</button>
	</div>
	<hr>
	<a href="#" onclick="Reset();return false;">Reset!</a>
	<a href="#" onclick="Decrease();return false;" id="decrease">(-1)</a>
	<hr>
	<div id="divHistory" style="display:none">
		<ul id="lstHistory"></ul>
		<a href="#" onclick="ClearHistory();return false;">Clear History</a>

	</div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Click Counter</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	font-family: "Segoe UI";
	}

	span {
	background-color: grey;
	border-radius: 15px;
	}

	button {
	background-color: #4CAF50;
	color: white;
	padding: 30px 35px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	font-size: 2em;
	}

	a {
	color: #4CAF50;
	text-decoration: none;
	}

	#decrease {
	float: right;
	}

	button:hover {
	background-color: #3e8e41;
	}
	</style>
	<script>
	var i = 0

	function vibrateShort() {
	if (window.navigator["vibrate"])
	window.navigator.vibrate(50);
	}
	function vibrateLong() {
	if (window.navigator["vibrate"])
	window.navigator.vibrate(200);
	}

	function Count() {
	var text = "Counter : " + (i++ + 1);
	document.getElementById("divHeader").innerHTML = text;
	vibrateShort();
	}
	function Decrease() {
	var text = "Counter : " + (i-- - + 1);
	document.getElementById("divHeader").innerHTML = text;
	vibrateLong()
	}
	function Reset() {
	InsertElement("lstHistory", "li", "", "Count : " + i);
	document.getElementById("divHistory").style.display = '';

	i = -1;
	Count();
	vibrateLong();
	}
	function ClearHistory() {
	document.getElementById("lstHistory").innerHTML = '';
	document.getElementById("divHistory").style.display = 'none';
	vibrateLong();
	}
	function InsertElement(parentId, elementTag, elementId, html) {
	// Adds an element to the document
	var p = document.getElementById(parentId);
	var newElement = document.createElement(elementTag);
	newElement.setAttribute('id', elementId);
	newElement.innerHTML = html;
	p.prepend(newElement);
	}
	</script>
	</head>

	<body>
	<div align="center">
	<h1 id=divHeader>Click Counter</h1>
	<button id=btn onclick="Count()">Click Me!</button>
	</div>
	<hr>
	<a href="#" onclick="Reset();return false;">Reset!</a>
	<a href="#" onclick="Decrease();return false;" id="decrease">(-1)</a>
	<hr>
	<div id="divHistory" style="display:none">
	<ul id="lstHistory"></ul>
	<a href="#" onclick="ClearHistory();return false;">Clear History</a>

	</div>
	</body>

	</html>