Untitled

<!DOCTYPE html>
<html>
<head>
	<title>boodschappenlijst</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-6">
				<div class="input-group">
					<input type="text" class="form-control" id="Arrayadd" placeholder="nieuw product">
					<span class="input-group-btn">
						<button class="btn btn-primary" type="button" onclick="addIntoArray();">Toevoegen</button>
					</span>
					<button class="btn btn-primary" type="button" onclick="remove1();">verwijder bovenste</button>
					<button class="btn btn-primary" type="button" onclick="remove2();">verwijder onderste</button>
				</div>
			</div>
			<div class="col-6"><h1><b>Boodschappenlijstje</b></h1>

				<ol id="outputElement"></ol>
			</div>
		</div>
	</div>


	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
<script>
	var arrayTest = new Array();
	var output = document.getElementById("outputElement");
	var inputElement = document.getElementById("Arrayadd");

	function remove1() {
		arrayTest.splice(0, 1);
		showArray();
	}

	function remove2(){
		arrayTest.splice(-1, 1);
		showArray();
	}


	function addIntoArray() {
		if(inputElement.value != "") {
			arrayTest.push(inputElement.value);
			document.getElementById("Arrayadd").value = "";
			showArray();
		}
	}

	function showArray() {
		var outputVar = "";
		for(var i = 0; i < arrayTest.length; i++) {
			outputVar += "<li>"+arrayTest[i]+"</li>";
		}
		output.innerHTML = outputVar;
	}
</script>