FinlayDaG33k/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
        <title>Button</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="main.js"></script>
	</head>
	<body>
    <!--opdracht met input field number-->
    <form id="inputCount">
      only numbers please :
      <input type="text" placeholder="type in a number" id="number_input" />
      <input type="submit" name="submit" value="submit" />
    </form>
    <div>
			<span id="currentCount">0</span>
		</div>
	</body>
</html>

## main.js
function countDown(val){
	if(!isNaN(val)){
		var val = parseInt(val); // parse the imput into an integer
		$('#currentCount').text(val); // set the text of the currentCount span.
		var counter = setInterval(function(){
			if(val > 0){
				$('#currentCount').text(val); // set the text of the currentCount span.
				val--; // decrease the val by 1
			}else if(val == 0){
				$('#currentCount').text("Countdown Complete"); // set the text of the currentCount span.
				clearInterval(counter); // Exit the setInterval loop
			}
		}, 1000);
	}else{
		$('#currentCount').text("Input is not an integer!"); // set the text of the currentCount span.
	}
}

$(function() {
	/*
		When the document is ready
		Equivalent to:
		$(document).ready(function(){});
	*/

	$("#inputCount").submit(function(event) {
		// Do this stuff when the form with id "inputCount" is submitted
		event.preventDefault(); // Prevent the form from doing it's normal action (thus prevent navigating away from the page).
		/*
			Difference between `var` and `let`: https://www.devbattles.com/en/sand/post-658-The+difference+between+let+and+var+in+JavaScript
		*/
		var input = $("#number_input").val(); // make the variable "input" with the content of the input devined with id "number_input".
		console.log(input);
		countDown(input); // Call the countdown function
	});
});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Button</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="main.js"></script>
	</head>
	<body>
	<!--opdracht met input field number-->
	<form id="inputCount">
	only numbers please :
	<input type="text" placeholder="type in a number" id="number_input" />
	<input type="submit" name="submit" value="submit" />
	</form>
	<div>
	<span id="currentCount">0</span>
	</div>
	</body>
	</html>
	function countDown(val){
	if(!isNaN(val)){
	var val = parseInt(val); // parse the imput into an integer
	$('#currentCount').text(val); // set the text of the currentCount span.
	var counter = setInterval(function(){
	if(val > 0){
	$('#currentCount').text(val); // set the text of the currentCount span.
	val--; // decrease the val by 1
	}else if(val == 0){
	$('#currentCount').text("Countdown Complete"); // set the text of the currentCount span.
	clearInterval(counter); // Exit the setInterval loop
	}
	}, 1000);
	}else{
	$('#currentCount').text("Input is not an integer!"); // set the text of the currentCount span.
	}
	}

	$(function() {
	/*
	When the document is ready
	Equivalent to:
	$(document).ready(function(){});
	*/

	$("#inputCount").submit(function(event) {
	// Do this stuff when the form with id "inputCount" is submitted
	event.preventDefault(); // Prevent the form from doing it's normal action (thus prevent navigating away from the page).
	/*
	Difference between `var` and `let`: https://www.devbattles.com/en/sand/post-658-The+difference+between+let+and+var+in+JavaScript
	*/
	var input = $("#number_input").val(); // make the variable "input" with the content of the input devined with id "number_input".
	console.log(input);
	countDown(input); // Call the countdown function
	});
	});