Shuffle and Deal

HTML

<h1>Shuffle and Deal</h1>

<button id="start-over" style="display:block;">Refresh to Reset</button>

<div style="float:left;padding:1em;">
<button id="shuffle-button">Shuffle</button>
<p id="deck-feedback"></p>
    <ul id="cards">
    <ul>
</div>

<div style="float:left; padding:1em;">
<input type="number" id="how-many-to-deal" placeholder="How Many?">
<button id="deal-button">Deal</button>
<p id="deal-feedback"></p>
    <ul id="hand-dealt">
    <ul>
</div>

JavaScript

var traditionalCards = [
    'Ten of Spades',
    'Jack of Spades',
    'Queen of Spades',
    'King of Spades' ],
   emmasAnimalCards = ['cats',
        'dogs',
        'bunnies',
        'zebras',
        'crows',
        'lions',
        'squirrels',
        'purple cats'],
    outOfCards = 'We\'re out of cards.';


function showDeck(deck){
    $.each(deck, function(i, value){
        appendCards(value); 
    });
}
  
function shuffle() {
    return (Math.round(Math.random()) - 0.5); 
}

function appendCards(value) {
    $('#cards').append('<li>' + value + '</li>'); 
}

function shuffleCards(deck) {
    var shuffledCards = deck.sort(shuffle);
    $.each(shuffledCards, function(index, value){
        appendCards(value);
    });
}

function deal(cards, howMany) {    
    var dealtCards = cards.splice(0, howMany);
    $.each(dealtCards, function(index, value){
        console.log(cards.length);
        $('#hand-dealt').append('<li>' + value + '</li>');
    });
    $('#cards').empty();
    $.each(cards, function(i, value){
        appendCards(value); 
    });  
    if (cards.length < howMany.length) {
        $('#deal-feedback').append(outOfCards);
        $('#deal-button, #shuffle-button').attr('disabled', true);
    }
}

$(function() {    
    var cards = traditionalCards;   
    showDeck(cards);
    $('#start-over').on('click', function () {
        document.location.reload(true)
    });
    $('#shuffle-button').on('click', function(){
        $('#shuffle-button').text('Shuffle Again');    
        $('#cards').empty();      
        shuffleCards(cards);        
    });
    $('#deal-button').on('click', function(){
        var n = $('#how-many-to-deal').val();    
        $('#deal-feedback').empty();
        if (n === '') {
            $('#deal-feedback').append('We need a number. Try again.');
        } else {
            deal(cards, n);    
            $('#deal-button').text('Deal Again');    
        }
    });
});