Pickle array generator

by tonytlwu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1>Pickle array generator</h1>
<p class="lead">Because life is great when you can have as many pickles as you want in your array.</p>
<p><label class="control-label">How many pickles do you want in your array?</label><br><input class="form-control" type="text" pattern="\d*" id="num" value="10" /></p>
<p id="submit-container"><input class="btn btn-primary" type="submit" id="generate" value="Generate!" /></p>
<pre id="debug"></pre>
</div>
</div>
</div>

CSS

body {
  overflow-x: hidden;
  background-color: mistyrose;
}

JavaScript

var numberOfPickles = 10;
var pickles = [];
var liveUpdate = false;

function generate() {
	numberOfPickles = parseInt(document.getElementById('num').value, 10);
  pickles = [];
  for (var i = 0; i < numberOfPickles; i++) {
    pickles.push('Pickle');
  }
	document.getElementById('debug').innerHTML = '(Array) ' + JSON.stringify(pickles, null, 2);
}

if (liveUpdate) {
	document.getElementById('num').addEventListener('input', generate, false);
	document.getElementById('submit-container').classList.add('hidden');
} else {
	document.getElementById('generate').addEventListener('click', generate, false);
}

generate();