skylying/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Hello world</title>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<style type="text/css">
	.highlight {
		background: pink;
	}
</style>
<body>
<div class="container-fluid">
	<h1>Number Generator</h1>
	<form>
	  <div class="form-group">
	    <label for="guest-number">Number Of Guests</label>
	    <input type="number" class="form-control" id="guest-number" aria-describedby="emailHelp" placeholder="Number">
	  </div>
	  <button id="generate-btn" type="button" class="btn btn-primary">Generate</button>
	</form>

	<table class="table" id="table">
		<thead>
			<tr>
				<th>Gift Owner</th>
				<th>Random Number</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td class="highlight">57</td>
			</tr>
			<tr>
				<td>2</td>
				<td class="highlight">54</td>
			</tr>
		</tbody>
	</table>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		// Get guest number
		$('#generate-btn').on('click', function(){
			var guestNumber = $('#guest-number').val();
			GenerateTable(guestNumber);
		})

		function GenerateTable(number) {
			console.log(number);
			var rows = number;
			var guestArr = [];
			var randArr = [];
			for (var i = 1; i <= number; i++) {
				// Create array with random number
				randArr[i-1] = i;
			}
			//console.log(randArr);
			var randArrLength = randArr.length;
			var randArrClone = randArr.slice(0);
			$(randArr).each(function(key, ele){
				// Remove current guest number out
				randArrClone.splice( randArrClone.indexOf(ele), 1);
				console.log(randArrClone);
			})
		}

		function createTableRow() {

		}
	})
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hello world</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

	</head>
	<style type="text/css">
	.highlight {
	background: pink;
	}
	</style>
	<body>
	<div class="container-fluid">
	<h1>Number Generator</h1>
	<form>
	<div class="form-group">
	<label for="guest-number">Number Of Guests</label>
	<input type="number" class="form-control" id="guest-number" aria-describedby="emailHelp" placeholder="Number">
	</div>
	<button id="generate-btn" type="button" class="btn btn-primary">Generate</button>
	</form>

	<table class="table" id="table">
	<thead>
	<tr>
	<th>Gift Owner</th>
	<th>Random Number</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>1</td>
	<td class="highlight">57</td>
	</tr>
	<tr>
	<td>2</td>
	<td class="highlight">54</td>
	</tr>
	</tbody>
	</table>
	</div>
	<script type="text/javascript">
	$(document).ready(function(){
	// Get guest number
	$('#generate-btn').on('click', function(){
	var guestNumber = $('#guest-number').val();
	GenerateTable(guestNumber);
	})

	function GenerateTable(number) {
	console.log(number);
	var rows = number;
	var guestArr = [];
	var randArr = [];
	for (var i = 1; i <= number; i++) {
	// Create array with random number
	randArr[i-1] = i;
	}
	//console.log(randArr);
	var randArrLength = randArr.length;
	var randArrClone = randArr.slice(0);
	$(randArr).each(function(key, ele){
	// Remove current guest number out
	randArrClone.splice( randArrClone.indexOf(ele), 1);
	console.log(randArrClone);
	})
	}

	function createTableRow() {

	}
	})
	</script>
	</body>
	</html>