The cards:



The code:

The HTML

<!-- A button that when pressed will call the JavaScript function drawCards() -->
<button type="button" onclick="drawCards()">Draw cards</button>
<br>
<!-- Add the textbox, and give it the id input -->
<input type="number" id="input" placeholder="Number of cards..." max="52" min="1" />
<h1>The cards:<br></h1>
<!-- Create a p tag, and give it the variable output -->
<p id="output"></p>

The CSS

#input {
	width: 125px;
}

The JavaScript

<script>	
	function drawCards() {
		/* Store the input and output HTML tags in JavaScript variables */
		var output = document.getElementById("output");
		var input = document.getElementById("input").value;
		/* Parse the input value into a number. If not a number, then return NaN */
		if (parseFloat(input) !== NaN) {
			/* Parse the input into a number */
			input = parseFloat(input);
			/* If the input number is too big or too small */
			if (input < 1 || input > 53) {
				/* Reload the page if the number is too big / too small */
				location.reload();
			} else {
				/* Create the array that will hold all of the cards */
				var cards = [];
				/* Create the variable that will define where in the array the new card will go */
				var pos = 0;
				/* The for loops that generate the array of all of the different cards */
				/* The first for loop is responsible for generating the Aces, 2', 3's, all the way up to king, of which there are 13 kinds */
				for (var card = 1; card <= 13; card++) {
					/* The second for loop is responsible for generating the suit or the card, of which there are 4 suits */
					for (type = 1; type <= 4; type++) {
						/* Create the JavaScript variables that will contain the kind of card and the card suit */
						var cardKind, suit;
						
						/* Check which card the outer for loop specifies, and set the variable cardKind to the corresponding kind of card, of which the variable card defines */
						switch(card) {
							case 1:
								cardKind = "Ace";
								break;
							case 11:
								cardKind = "Jack";
								break;
							case 12:
								cardKind = "Queen";
								break;
							case 13:
								cardKind = "King";
								break;
							default:
								cardKind = card;
						}
						switch(type) {
							case 1:
								suit = " of Diamonds"
								break;
							case 2:
								suit = " of Spades";
								break;
							case 3:
								suit = " of Clovers";
								break;
							case 4:
								suit = " of Hearts";
						}
						/* Assembles the two variables into one */
						var cardType = cardKind + suit;
						/* Sets the pre-determined position in the cards array and puts the new card into it */
						cards[pos] = cardType;
						/* Adds 1 to the variable pos, so the next card goes in the next slot in the array. */
						pos++;
					}
				}
				
				/* That waas creating the deck of cards. Now it is time to shuffel them. */
				/* Create a JavaScript array called integer */
				var integer = [];
				
				/* Function to pick a random number between 0 and 51, and then rounding it ronRan: round Random*/
				function ronRan() {
					/* Pick and round a random number */
					var number = Math.round(Math.random() * 51);
					/* If the number is over 51 */
					if (number > 51) {
						/* Bring the number down to 51 */
						number = 51;
					}
					/* Return the rounded random number */
					return number;
				}
				
				/* Function to check if the number generated is a duplicate */
				function isDuplicate(number) {
					/* Check if the number is a duplicate. If the number is -1, then it isn't. */
					if (integer.indexOf(number) !== -1) {
						/* Number is not -1, and must keep checking. So, the funciton returns true */
							return true;
					} else if (integer.indexOf(number) === -1) {
						/* Number is -1, so the number is original. So, the function returns false */
						return false;
					}
				}
				/* Creates the JavaScript variables modInput and mdInput. modInput is used later in the script, and mdInput will be used now. */
				var modInput = input + 1, mdInput = input + 1;
				/* If input equals 51 or 51*/
				if (input === 51) {
					/* Take away 1 from mdInput */
					mdInput--;
				} else if (input === 52) {
					/* Thake away 2 from mdInput */
					mdInput -= 2;
				}
				
				/* Fill in the integers array with random non-repeating numbers, using a for statement, a do while statement, and the functions previously created */
				for (var i = 0; i < mdInput; i++) {
					/* Generate a random number */
					var nextInput = ronRan();
					/* If the number generated is a duplitate, then generate a new random number. Repeat until a number that isn't a duplicate gets generated */
					while(isDuplicate(nextInput)) {
						/* Generate a new random number */
						nextInput = ronRan();
					}
					/* Store the new number in the integer array in the next position. This is how the deck gets shuffled */
					integer[i] = nextInput;
				}
				
				/* If input is greater than or equal to 51 */
				if (input >= 51) {
					/* Generate the missing number */
					/* Generate a random number */
					var ranom = ronRan();
					/* Use that number to get a position in the integer array and store it in the variable called inp */
					var inp = integer[ranom];
					/* Then set that random position in the integer array to the card Ace of Diamonds */
					integer[ranom] = 0;
					/* Make the next spot in the integer array the card that the old spot had */
					integer[50] = inp;
					
					/* If input is equal to 52 */
					if (input === 52) {
						/* Repeat the same process, but with the card King of Hearts */
						var ranom2 = ronRan();
						var inp2 = integer[ranom2];
						integer[ranom2] = 51;
						integer[51] = inp2;
					}
				}
				
				/* Create the variables result and bin */
				var result, bin = 0;
				/* This for loop will use the numbers in the integer array to specify which card goes where, and displays it */
				for (var i = 0; i < input; i++) {
					/* If bin equals 0 or 1 */
					if (bin === 0) {
						/* Set the variable result to: 1. Ace of Diamonds */
						result = "1. " + cards[integer[0]];
						/* Set the variable bin to 1 */
						bin = 1;
					} else if (bin === 1) {
						/* Create the variable g and set it to 1 more than the variable i */
						var g = i + 1;
						/* Add a line break then the next card to the variable result */
						result += "<br>" + g + ". " + cards[integer[i]];
					}
				}
				/* Display the list of cards that were generated, shuffled, and assembled. */
				output.innerHTML = result;
			}
		} else {
			/* Display an error message telling the user to put in a number */
			output.innerHTML = "You must enter in a number";
		}
	}
</script>