來實作一個優惠代碼

<h3>優惠代碼產生器</h3>
<div class="col-md-12">
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label" for="cou_name">活動名稱</label>
            <input type="text" name="cou_name" placeholder="活動名稱" class="form-control" />
            <div class="text-danger hidden" id="cou_name_msg">請輸入活動名稱</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label" for="cou_start">開始時間</label>
            <input type="text" name="cou_start" placeholder="開始時間" class="form-control" />
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label" for="cou_end">結束時間</label>
            <input type="text" name="cou_end" placeholder="結束時間" class="form-control" />
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label" for="">代碼數量</label>
            <input type="number" min="1" max="100000" name="cou_cnt" placeholder="代碼數量" class="form-control" />
            <div class="form-text" style="color: #2196f3;">最多100,000組</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label" for="">代碼長度</label>
            <input type="number" value="4" min="4" max="24" name="cou_len" placeholder="代碼長度" class="form-control" />
            <div class="form-text" style="color: #2196f3;">4到24之間</div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label" for="">Prefix代碼前綴</label>
            <input type="text" name="cou_prefix" placeholder="前綴" class="form-control" />
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="control-label" for="">Postfix代碼後綴</label>
            <input type="text" name="cou_postfix" placeholder="後綴" class="form-control" />
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label" for="">代碼樣式</label>
            <select class="form-control" name="cou_pattern">
                <option value="####">####</option>
                <option value="##-##">##-##</option>
            </select>
        </div>
    </div>
    <div class="col-md-12">
        <div class="form-group">
            <label class="control-label" for="">使用字元</label>
            <textarea class="form-control" name="chars-to-use">ABCDEFGHJKMNPRSTUVWXYabcdefghjkmnprstuvwxy23456789</textarea>
        </div>
    </div>
    <div class="col-md-9">
        <div class="form-group previewArea">
            <label class="control-label" for="">預覽結果</label>
            <div>Sey1xXUc</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <button type="button" class="btn btn-primary btn_gen_code" >產生代碼</button>
        </div>
    </div>
</div>

// 取得代碼數量, 代碼長度
$( 'input[name=cou_len], input[name=cou_prefix], input[name=cou_postfix]').blur( function () {
	if ( $(this).attr('name') == 'cou_len') {
        if (isNaN($(this).val())) $(this).val(4);
        if ($(this).val() > 24) $(this).val(24);
        if ($(this).val() < 4) $(this).val(4);
		// 設定產生的樣版
		setPattern( $(this).val()) ;
	}
	preview_code() ;
});
$( 'input[name=cou_prefix], input[name=cou_postfix]').keyup( function (e) {
	switch (e.keyCode) {
		case 8: // Backspace
		//console.log('backspace');
		case 9: // Tab
		case 13: // Enter
		case 37: // Left
		case 38: // Up
		case 39: // Right
		case 40: // Down
			break;
		default:
			setPattern( $('input[name=cou_len]').val()) ;
			preview_code();
			break;
	}
});
$( 'input[name=cou_len]').change( function () {
    setPattern( $(this).val()) ;
    preview_code() ;
});
$( 'select[name=cou_pattern]').change( function () {
	preview_code() ;
}) ;

// 設定可產生的樣版
function setPattern( len) {
    let facMaps = [] ;
	let pStr = '' ;
    for( i=2; i < len; i++) {
    	if ( len%i == 0) {
    		facMaps.push( i) ;
	    }
    }
    if ( facMaps.length == 0) {
	    $('select[name=cou_pattern]').find('option').remove() ;
    	pStr = '#'.repeat(len) ;
	    $('select[name=cou_pattern]').append( new Option( pStr, pStr)) ;
    } else {
	    $('select[name=cou_pattern]').find('option').remove() ;
	    pStr = '#'.repeat(len) ;
	    $('select[name=cou_pattern]').append( new Option( pStr, pStr)) ;
        for ( i = 0 ; i < facMaps.length ; i++) {
        	let mIdx = facMaps[i] ;
        	let mTime = len/mIdx ;
        	pStr = '' ;
        	for ( j = 0 ; j < mTime ; j++) {
        		if ( pStr == '') {
			        pStr += '#'.repeat(mIdx) ;
		        } else {
			        pStr += '-'+'#'.repeat(mIdx) ;
		        }
	        }
	        $('select[name=cou_pattern]').append( new Option( pStr, pStr)) ;
        }
    }
}
// generator
function preview_code() {
    let results = generator( 1) ;
	$('.previewArea div').html( results[0]) ;
}

function generator( num) {
	let use_words   = $('textarea[name=chars-to-use]').val() ;
    let cou_pattern = $('select[name=cou_pattern]').val() ;
    let cou_prefix  = $('input[name=cou_prefix]').val() ;
    let cou_postfix = $('input[name=cou_postfix]').val() ;
	const charactersLength = use_words.length;
    let res = '' ;
    let results = [] ;

	for ( let i = 0; i < num; i++ ) {
        for (let j = 0; j < cou_pattern.length; j++) {
            if ( cou_pattern[j] == '#'){
                res += use_words.charAt(Math.floor(Math.random() * charactersLength));
            } else {
                res += '-' ;
            }
        }
        results.push( cou_prefix + res + cou_postfix) ;
        res = '' ;
	}
    return results ;
}