kamontat/index.html

## index.html
<!DOCTYPE html>
<html lang='en'>

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>
    <!-- Optional theme -->
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' integrity='sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp' crossorigin='anonymous'>
    <!-- jquery of google CDN -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <title>Young Webmaster Camp</title>
</head>

<body>
    <style>
        body {
            padding-top: 52px;
        }

        #name {
            width: 100%;
            height: 100%;
            text-align: center;
            position: relative;
        }

        .header {
            font-size: 370%;
            color: white;
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
        }

        .info {
            font-size: 150%;
            text-shadow: 2px 2px 5px #757575;
            animation-name: loopColor;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .background {
            background: radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
            background-size: 16px 16px;
            filter: blur(10px);
            transition: all 0.5s ease-in-out;
        }

        .background:hover,
        .background.hover {
            filter: blur(0px);
        }

        @keyframes loopColor {
            0% {
                color: #ff0000;
            }
            25% {
                color: #f2ff00;
            }
            50% {
                color: #00ff40;
            }
            75% {
                color: #001aff;
            }
            100% {
                color: #cc00ff;
            }
        }
    </style>

    <script>
        let level = {
            easy: {
                start: 1,
                end: 10
            },
            medium: {
                start: 1,
                end: 20
            },
            hard: {
                start: 1,
                end: 40
            }
        }
        let correct = {
            text: 'Good Job ',
            type: 'success'
        };
        let wrong = {
            tooLow: 'Sorry, It\'s number is Too <b>Low</b> ',
            tooHigh: 'Sorry, It\'s number is Too <b>High</b> ',
            type: 'warning',
            time: 1500
        };
        let duplicate = {
            text: '<b>Already</b> Enter this number ',
            type: 'info',
            time: 1500
        };
        let outLength = {
            text: 'Number must in length ',
            type: 'warning',
            time: 1500
        };
        let alphabet = {
            text: 'Please Enter <b>Integer</b> only, <i>Alphabet</i> and <i>Decimal</i> are <code>NOT</code> Allow',
            type: 'danger',
            time: 1800
        };
        let restart = {
            text: '<b>Reset number</b>, Let play again',
            type: 'success',
            time: 1500
        };

        var timer;
        var inLv;

        var numGuess = 0; // how many time guessing number
        var rand = 0; // random number to guess in each turn
        var num = 0;

        // start the game
        (function($) {
            $(document).ready(function() {
                // hover on touch device
                $('.background').on('touchstart', function(e) {
                    'use strict'; //satisfy code inspectors
                    var link = $(this); //preselect the link
                    if (link.hasClass('hover')) {
                        return true;
                    } else {
                        link.addClass('hover');
                        $('a.background').not(this).removeClass('hover');
                        e.preventDefault();
                        return false; //extra, and to make sure the function has consistent return points
                    }
                });

                // main order
                $('#ywc').click(function() {
                    let text = $(this).text();
                    if (text.indexOf('Hide') !== -1) {
                        $('#name').hide();
                        $(this).text('Show')
                    } else {
                        $('#name').show();
                        $(this).text('Hide')
                    }
                });
                // start game event (click)
                $('#start').click(function(event) {
                    let buttonTitle = $('#start').text();
                    if (buttonTitle.indexOf('Play') !== -1) {
                        $('#howToModal').modal('show');
                        startGame();
                    } else {
                        end();
                    }
                });
                // reset button event (click)
                $('#resetBtn').click(function(event) {
                    resetEvent();
                });
                // submit button event (click)
                $('#submitBtn').click(function(event) {
                    submitEvent();
                });
                // submit data when enter key press
                $('#numberField').keydown(function(event) {
                    if (event.originalEvent.keyCode == 13) {
                        submitEvent();
                        return false;
                    }
                });
                // changing button label when shown
                $('#nav-number-collapse').on('shown.bs.collapse', function() {
                    $('#moreNumberBtn').text('Collapse');
                });
                // changing button label when collapse
                $('#nav-number-collapse').on('hidden.bs.collapse', function() {
                    $('#moreNumberBtn').text('More');
                });
            });
        }(jQuery));
        /* ------------------ game state ------------------ */
        function startGame() {
            $('#easyBtn').click(function(event) {
                inLv = level.easy;
                start();
            });
            $('#mediumBtn').click(function(event) {
                inLv = level.medium;
                start();
            });
            $('#hardBtn').click(function(event) {
                inLv = level.hard;
                start();
            });
        }

        function start() {
            rand = random(inLv.start, inLv.end);
            console.log(rand);
            // nav
            $('.navbar-fixed-bottom').fadeIn();
            // button change
            $('#start').text('Done');
            $('#start').removeClass('btn-info');
            $('#start').addClass('btn-danger');
            clearAllNumButton();
            addNumButton();
            collapse(false);
        }

        function end() {
            // nav
            $('.navbar-fixed-bottom').fadeOut();
            // button change
            $('#start').text('Play (again)');
            $('#start').removeClass('btn-danger');
            $('#start').addClass('btn-info');
            resetEvent();
            clearAllNumButton();
        }

        /* ------------------ Controller ------------------ */

        function addNumButton() {
            var ul = document.getElementById('headerList');

            for (num = inLv.start; num <= inLv.end; num += 5) {
                var li = document.createElement('li');
                li.setAttribute('id', 'list' + num);

                for (var i = 0; i < 5; i++) {
                    var text = i + num;
                    if (text < 10) text = '0' + text;

                    var btn = document.createElement('button');
                    var txtLb = document.createTextNode(text);
                    var id = 'button' + (i + num);
                    btn.appendChild(txtLb);
                    btn.setAttribute('id', id);
                    btn.setAttribute('type', 'button');
                    btn.setAttribute('class', 'btn btn-primary');
                    //add event listener
                    btn.addEventListener('click', function(event) {
                        submitEvent(event.target.id);
                    });

                    li.appendChild(btn);
                }
                ul.appendChild(li);
            }
        }

        function clearAllNumButton() {
            $('#headerList').empty();
        }

        function disableNumButton(disable) {
            for (num = inLv.start; num <= inLv.end; num++) {
                var id = 'button' + num;
                disableBy(id, disable);
                if (disable)
                    changeClassButton(id, 'danger');
                else
                    changeClassButton(id, 'primary');
            }
        }

        function clickedNumButton(id) {
            disableBy(id, true);
            changeClassButton(id, 'danger');
        }

        function changeClassButton(id, type) {
            $('#' + id).removeClass('btn-default');
            $('#' + id).removeClass('btn-primary');
            $('#' + id).removeClass('btn-success');
            $('#' + id).removeClass('btn-info');
            $('#' + id).removeClass('btn-warning');
            $('#' + id).removeClass('btn-danger');

            $('#' + id).addClass('btn-' + type);
        }

        function getField() {
            return $('#numberField').val();
        }

        function resetField() {
            $('#numberField').val('');
        }

        function collapse(hide) {
            if (hide) {
                $('#nav-number-collapse').collapse('hide');
            } else {
                $('#nav-number-collapse').collapse('show');
            }
            disableBy('moreNumberBtn', hide);
        }

        function alert(text, type) {
            $('#messageAlert').removeClass('alert-info');
            $('#messageAlert').removeClass('alert-warning');
            $('#messageAlert').removeClass('alert-success');
            $('#messageAlert').removeClass('alert-danger');

            $('#messageAlert').addClass('alert-' + type);
            $('#sr-hidden').text(type + ':');

            $('#messageAlert').html(text);
        }

        function showAlert(show, timeout) {
            if (show) {
                $('#messageAlert').show();
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                if (timeout) {
                    timer = setTimeout(function() {
                        showAlert(false);
                    }, timeout);
                }
            } else $('#messageAlert').hide();
        }

        function disableAll(disable) {
            disableBy('submitBtn', disable);
            disableBy('numberField', disable);
            disableNumButton(disable);
            collapse(disable);
        }

        function disableBy(id, disable) {
            if (disable) $('#' + id).attr('disabled', 'disabled');
            else $('#' + id).removeAttr('disabled');
        }

        function isDisable(id) {
            return $('#' + id)[0].disabled;
        }
        /* ------------------ Model ------------------ */
        function submitEvent(id) {
            if (isDisable('numberField')) return;
            var number;
            // get from input
            if (!id) {
                number = getField();
                resetField();

                id = 'button' + number;
                // get from button
            } else {
                number = $('#' + id).text();
            }
            // check length
            if (!isInLength(number)) {
                alert(outLength.text + '(' + inLv.start + '-' + inLv.end + ' inclusive)', outLength.type);
                showAlert(true, outLength.time);
                return;
            }
            // check number
            if (!isNumber(number)) {
                alert(alphabet.text, alphabet.type);
                showAlert(true, alphabet.time);
                return;
            }
            // check duplicate
            if (isDisable(id)) {
                alert(duplicate.text + '(' + number + ')', duplicate.type);
                showAlert(true, duplicate.time);
                collapse(false);
                return;
            }
            // increase turn
            numGuess++;
            clickedNumButton(id);
            // correct answer
            if (isSame(number)) {
                alert(correct.text + '(' + numGuess + ' turn)', correct.type);
                showAlert(true);
                disableAll(true);
                // wrong answer
            } else {
                if (low(number))
                    alert(wrong.tooLow, wrong.type);
                else
                    alert(wrong.tooHigh, wrong.type);
                showAlert(true, wrong.time);
            }
        }

        function resetEvent() {
            rand = random(inLv.start, inLv.end);
            numGuess = 0;
            console.log(rand);

            alert(restart.text, restart.type);
            showAlert(true, 1000);

            resetField();
            disableAll(false);
        }
        /* ------------------ API ------------------ */
        function random(min, max) {
            // swap
            if (min > max) {
                let temp = min;
                min = max;
                max = temp;
            }
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        function isInLength(number) {
            if (number > inLv.end || number < inLv.start) return false;
            return true;
        }

        function isSame(number) {
            return rand == number;
        }

        function isNumber(text) {
            return $.isNumeric(text) && text.indexOf('.') === -1;
        }

        function low(number) {
            return rand > number;
        }
    </script>

    <!-- top navbar -->
    <nav class='navbar navbar-default navbar-fixed-top'>
        <div class='container'>
            <!-- Button trigger modal -->
            <button type='button' class='btn btn-primary navbar-btn btn-xs btn-md btn-lg' data-toggle='modal' data-target='#infoModal'>
              Developer
            </button>
            <button id='ywc' type='button' class='btn btn-primary navbar-btn btn-xs btn-md btn-lg active' data-toggle='button' aria-pressed='true' autocomplete='off'>
              Hide
            </button>
            <button id='start' type='button' class='btn btn-info navbar-btn btn-xs btn-md btn-lg' data-target='#howToModal'>
              Play Game?
            </button>
        </div>
    </nav>

    <!-- event message -->
    <div id='messageAlert' class='alert alert-danger fade in' style='display: none;' role='alert'>
        <span id='sr-hidden' class='sr-only'>Message:</span>
    </div>

    <!-- center of page -->
    <div id='name'>
        <span class='header'>YWC</span><br>
        <div class='background'>
            <span class='info'><h5>This web for <b>Homework of Young Webmaster Camp 14</b> only</h5></span>
        </div>
    </div>

    <!-- bottom navbar -->
    <div class='navbar navbar-default navbar-fixed-bottom' style='display: none;'>
        <div class='container'>
            <form class='navbar-form navbar-left'>
                <div class='input-group'>
                    <input id='numberField' type='text' class='form-control' placeholder='Enter Number..'>
                    <span class='input-group-btn'>
                          <button id='submitBtn' type='button' class='btn btn-success'>Submit</button>
                          <button id='resetBtn' type='button' class='btn btn-danger'>Reset</button>
                        </span>
                </div>
                <button id='moreNumberBtn' class='btn btn-info' type='button' data-toggle='collapse' data-target='#nav-number-collapse' aria-expanded='false' aria-controls='nav-number-collapse'>
                    Collapse
                </button>
            </form>
        </div>
        <!-- number button (hidden) -->
        <div class='collapse' id='nav-number-collapse'>
            <ul id='headerList' class='list-inline'></ul>
        </div>
    </div>

    <!-- developer information Modal -->
    <div class='modal fade' id='infoModal' tabindex='-1' role='dialog'>
        <div class='modal-dialog' role='document'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <h3 class='modal-title'>Who is me?</h3>
                </div>
                <div class='modal-body'>
                    <dl class='dl-horizontal'>
                        <dt>Name:</dt>
                        <dd>Kamontat Chantrachirathumrong</dd>
                        <dt>Education:</dt>
                        <dd><i>Second(2nd) year</i> on Software and Knowledge Engineering</dd>
                        <dt>Ability:</dt>
                        <dd><code>Java</code> >> <code>Swift</code> > <code>JavaScript(Pure)</code> > <code>MIPS-Assembly</code> > <code>html</code> > <code>c++</code> = <code>python</code></dd>
                        <dt>Github:</dt>
                        <dd><a href='https://github.com/kamontat' target='_blank'>Github</a></dd>
                        <dt>Source Code</dt>
                        <dd>
                            <a href='https://gist.github.com/kamontat/82df4d93ff2fa418a9f2c6475b10ead6' target='_blank'>Source Code</a>
                        </dd>
                    </dl>
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- start Game Modal -->
    <div class='modal fade' id='howToModal' tabindex='-1' role='dialog'>
        <div class='modal-dialog' role='document'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <h3 class='modal-title'>This game call <b>Guessing Number</b></h3>
                </div>
                <div id='body' class='modal-body'>
                    <dl class='dl-horizontal'>
                        <dt>How To Play?</dt>
                        <dd>Easy game, you just guess some number in length belong your selected mode in less turn as you can</dd>
                        <dt>Easy Mode: </dt>
                        <dd><code>1</code> to <code>10</code></dd>
                        <dt>Medium Mode: </dt>
                        <dd><code>1</code> to <code>20</code></dd>
                        <dt>Hard Mode: </dt>
                        <dd><code>1</code> to <code>40</code></dd>
                    </dl>
                </div>
                <div class='modal-footer'>
                    <div>Selected Mode?</div>
                    <button id='easyBtn' type='button' class='btn btn-success' data-dismiss='modal'>Easy</button>
                    <button id='mediumBtn' type='button' class='btn btn-primary' data-dismiss='modal'>Medium</button>
                    <button id='hardBtn' type='button' class='btn btn-danger' data-dismiss='modal'>Hard</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Latest compiled and minified JavaScript -->
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous'></script>
</body>

</html>
	<!DOCTYPE html>
	<html lang='en'>

	<head>
	<!-- Latest compiled and minified CSS -->
	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>
	<!-- Optional theme -->
	<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' integrity='sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp' crossorigin='anonymous'>
	<!-- jquery of google CDN -->
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1'>

	<title>Young Webmaster Camp</title>
	</head>

	<body>
	<style>
	body {
	padding-top: 52px;
	}

	#name {
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
	}

	.header {
	font-size: 370%;
	color: white;
	text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
	}

	.info {
	font-size: 150%;
	text-shadow: 2px 2px 5px #757575;
	animation-name: loopColor;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	}

	.background {
	background: radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
	background-size: 16px 16px;
	filter: blur(10px);
	transition: all 0.5s ease-in-out;
	}

	.background:hover,
	.background.hover {
	filter: blur(0px);
	}

	@keyframes loopColor {
	0% {
	color: #ff0000;
	}
	25% {
	color: #f2ff00;
	}
	50% {
	color: #00ff40;
	}
	75% {
	color: #001aff;
	}
	100% {
	color: #cc00ff;
	}
	}
	</style>

	<script>
	let level = {
	easy: {
	start: 1,
	end: 10
	},
	medium: {
	start: 1,
	end: 20
	},
	hard: {
	start: 1,
	end: 40
	}
	}
	let correct = {
	text: 'Good Job ',
	type: 'success'
	};
	let wrong = {
	tooLow: 'Sorry, It\'s number is Too <b>Low</b> ',
	tooHigh: 'Sorry, It\'s number is Too <b>High</b> ',
	type: 'warning',
	time: 1500
	};
	let duplicate = {
	text: '<b>Already</b> Enter this number ',
	type: 'info',
	time: 1500
	};
	let outLength = {
	text: 'Number must in length ',
	type: 'warning',
	time: 1500
	};
	let alphabet = {
	text: 'Please Enter <b>Integer</b> only, <i>Alphabet</i> and <i>Decimal</i> are <code>NOT</code> Allow',
	type: 'danger',
	time: 1800
	};
	let restart = {
	text: '<b>Reset number</b>, Let play again',
	type: 'success',
	time: 1500
	};

	var timer;
	var inLv;

	var numGuess = 0; // how many time guessing number
	var rand = 0; // random number to guess in each turn
	var num = 0;

	// start the game
	(function($) {
	$(document).ready(function() {
	// hover on touch device
	$('.background').on('touchstart', function(e) {
	'use strict'; //satisfy code inspectors
	var link = $(this); //preselect the link
	if (link.hasClass('hover')) {
	return true;
	} else {
	link.addClass('hover');
	$('a.background').not(this).removeClass('hover');
	e.preventDefault();
	return false; //extra, and to make sure the function has consistent return points
	}
	});

	// main order
	$('#ywc').click(function() {
	let text = $(this).text();
	if (text.indexOf('Hide') !== -1) {
	$('#name').hide();
	$(this).text('Show')
	} else {
	$('#name').show();
	$(this).text('Hide')
	}
	});
	// start game event (click)
	$('#start').click(function(event) {
	let buttonTitle = $('#start').text();
	if (buttonTitle.indexOf('Play') !== -1) {
	$('#howToModal').modal('show');
	startGame();
	} else {
	end();
	}
	});
	// reset button event (click)
	$('#resetBtn').click(function(event) {
	resetEvent();
	});
	// submit button event (click)
	$('#submitBtn').click(function(event) {
	submitEvent();
	});
	// submit data when enter key press
	$('#numberField').keydown(function(event) {
	if (event.originalEvent.keyCode == 13) {
	submitEvent();
	return false;
	}
	});
	// changing button label when shown
	$('#nav-number-collapse').on('shown.bs.collapse', function() {
	$('#moreNumberBtn').text('Collapse');
	});
	// changing button label when collapse
	$('#nav-number-collapse').on('hidden.bs.collapse', function() {
	$('#moreNumberBtn').text('More');
	});
	});
	}(jQuery));
	/* ------------------ game state ------------------ */
	function startGame() {
	$('#easyBtn').click(function(event) {
	inLv = level.easy;
	start();
	});
	$('#mediumBtn').click(function(event) {
	inLv = level.medium;
	start();
	});
	$('#hardBtn').click(function(event) {
	inLv = level.hard;
	start();
	});
	}

	function start() {
	rand = random(inLv.start, inLv.end);
	console.log(rand);
	// nav
	$('.navbar-fixed-bottom').fadeIn();
	// button change
	$('#start').text('Done');
	$('#start').removeClass('btn-info');
	$('#start').addClass('btn-danger');
	clearAllNumButton();
	addNumButton();
	collapse(false);
	}

	function end() {
	// nav
	$('.navbar-fixed-bottom').fadeOut();
	// button change
	$('#start').text('Play (again)');
	$('#start').removeClass('btn-danger');
	$('#start').addClass('btn-info');
	resetEvent();
	clearAllNumButton();
	}

	/* ------------------ Controller ------------------ */

	function addNumButton() {
	var ul = document.getElementById('headerList');

	for (num = inLv.start; num <= inLv.end; num += 5) {
	var li = document.createElement('li');
	li.setAttribute('id', 'list' + num);

	for (var i = 0; i < 5; i++) {
	var text = i + num;
	if (text < 10) text = '0' + text;

	var btn = document.createElement('button');
	var txtLb = document.createTextNode(text);
	var id = 'button' + (i + num);
	btn.appendChild(txtLb);
	btn.setAttribute('id', id);
	btn.setAttribute('type', 'button');
	btn.setAttribute('class', 'btn btn-primary');
	//add event listener
	btn.addEventListener('click', function(event) {
	submitEvent(event.target.id);
	});

	li.appendChild(btn);
	}
	ul.appendChild(li);
	}
	}

	function clearAllNumButton() {
	$('#headerList').empty();
	}

	function disableNumButton(disable) {
	for (num = inLv.start; num <= inLv.end; num++) {
	var id = 'button' + num;
	disableBy(id, disable);
	if (disable)
	changeClassButton(id, 'danger');
	else
	changeClassButton(id, 'primary');
	}
	}

	function clickedNumButton(id) {
	disableBy(id, true);
	changeClassButton(id, 'danger');
	}

	function changeClassButton(id, type) {
	$('#' + id).removeClass('btn-default');
	$('#' + id).removeClass('btn-primary');
	$('#' + id).removeClass('btn-success');
	$('#' + id).removeClass('btn-info');
	$('#' + id).removeClass('btn-warning');
	$('#' + id).removeClass('btn-danger');

	$('#' + id).addClass('btn-' + type);
	}

	function getField() {
	return $('#numberField').val();
	}

	function resetField() {
	$('#numberField').val('');
	}

	function collapse(hide) {
	if (hide) {
	$('#nav-number-collapse').collapse('hide');
	} else {
	$('#nav-number-collapse').collapse('show');
	}
	disableBy('moreNumberBtn', hide);
	}

	function alert(text, type) {
	$('#messageAlert').removeClass('alert-info');
	$('#messageAlert').removeClass('alert-warning');
	$('#messageAlert').removeClass('alert-success');
	$('#messageAlert').removeClass('alert-danger');

	$('#messageAlert').addClass('alert-' + type);
	$('#sr-hidden').text(type + ':');

	$('#messageAlert').html(text);
	}

	function showAlert(show, timeout) {
	if (show) {
	$('#messageAlert').show();
	if (timer) {
	clearTimeout(timer);
	timer = null;
	}
	if (timeout) {
	timer = setTimeout(function() {
	showAlert(false);
	}, timeout);
	}
	} else $('#messageAlert').hide();
	}

	function disableAll(disable) {
	disableBy('submitBtn', disable);
	disableBy('numberField', disable);
	disableNumButton(disable);
	collapse(disable);
	}

	function disableBy(id, disable) {
	if (disable) $('#' + id).attr('disabled', 'disabled');
	else $('#' + id).removeAttr('disabled');
	}

	function isDisable(id) {
	return $('#' + id)[0].disabled;
	}
	/* ------------------ Model ------------------ */
	function submitEvent(id) {
	if (isDisable('numberField')) return;
	var number;
	// get from input
	if (!id) {
	number = getField();
	resetField();

	id = 'button' + number;
	// get from button
	} else {
	number = $('#' + id).text();
	}
	// check length
	if (!isInLength(number)) {
	alert(outLength.text + '(' + inLv.start + '-' + inLv.end + ' inclusive)', outLength.type);
	showAlert(true, outLength.time);
	return;
	}
	// check number
	if (!isNumber(number)) {
	alert(alphabet.text, alphabet.type);
	showAlert(true, alphabet.time);
	return;
	}
	// check duplicate
	if (isDisable(id)) {
	alert(duplicate.text + '(' + number + ')', duplicate.type);
	showAlert(true, duplicate.time);
	collapse(false);
	return;
	}
	// increase turn
	numGuess++;
	clickedNumButton(id);
	// correct answer
	if (isSame(number)) {
	alert(correct.text + '(' + numGuess + ' turn)', correct.type);
	showAlert(true);
	disableAll(true);
	// wrong answer
	} else {
	if (low(number))
	alert(wrong.tooLow, wrong.type);
	else
	alert(wrong.tooHigh, wrong.type);
	showAlert(true, wrong.time);
	}
	}

	function resetEvent() {
	rand = random(inLv.start, inLv.end);
	numGuess = 0;
	console.log(rand);

	alert(restart.text, restart.type);
	showAlert(true, 1000);

	resetField();
	disableAll(false);
	}
	/* ------------------ API ------------------ */
	function random(min, max) {
	// swap
	if (min > max) {
	let temp = min;
	min = max;
	max = temp;
	}
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	function isInLength(number) {
	if (number > inLv.end \|\| number < inLv.start) return false;
	return true;
	}

	function isSame(number) {
	return rand == number;
	}

	function isNumber(text) {
	return $.isNumeric(text) && text.indexOf('.') === -1;
	}

	function low(number) {
	return rand > number;
	}
	</script>

	<!-- top navbar -->
	<nav class='navbar navbar-default navbar-fixed-top'>
	<div class='container'>
	<!-- Button trigger modal -->
	<button type='button' class='btn btn-primary navbar-btn btn-xs btn-md btn-lg' data-toggle='modal' data-target='#infoModal'>
	Developer
	</button>
	<button id='ywc' type='button' class='btn btn-primary navbar-btn btn-xs btn-md btn-lg active' data-toggle='button' aria-pressed='true' autocomplete='off'>
	Hide
	</button>
	<button id='start' type='button' class='btn btn-info navbar-btn btn-xs btn-md btn-lg' data-target='#howToModal'>
	Play Game?
	</button>
	</div>
	</nav>

	<!-- event message -->
	<div id='messageAlert' class='alert alert-danger fade in' style='display: none;' role='alert'>
	<span id='sr-hidden' class='sr-only'>Message:</span>
	</div>

	<!-- center of page -->
	<div id='name'>
	<span class='header'>YWC</span><br>
	<div class='background'>
	<span class='info'><h5>This web for <b>Homework of Young Webmaster Camp 14</b> only</h5></span>
	</div>
	</div>

	<!-- bottom navbar -->
	<div class='navbar navbar-default navbar-fixed-bottom' style='display: none;'>
	<div class='container'>
	<form class='navbar-form navbar-left'>
	<div class='input-group'>
	<input id='numberField' type='text' class='form-control' placeholder='Enter Number..'>
	<span class='input-group-btn'>
	<button id='submitBtn' type='button' class='btn btn-success'>Submit</button>
	<button id='resetBtn' type='button' class='btn btn-danger'>Reset</button>
	</span>
	</div>
	<button id='moreNumberBtn' class='btn btn-info' type='button' data-toggle='collapse' data-target='#nav-number-collapse' aria-expanded='false' aria-controls='nav-number-collapse'>
	Collapse
	</button>
	</form>
	</div>
	<!-- number button (hidden) -->
	<div class='collapse' id='nav-number-collapse'>
	<ul id='headerList' class='list-inline'></ul>
	</div>
	</div>

	<!-- developer information Modal -->
	<div class='modal fade' id='infoModal' tabindex='-1' role='dialog'>
	<div class='modal-dialog' role='document'>
	<div class='modal-content'>
	<div class='modal-header'>
	<h3 class='modal-title'>Who is me?</h3>
	</div>
	<div class='modal-body'>
	<dl class='dl-horizontal'>
	<dt>Name:</dt>
	<dd>Kamontat Chantrachirathumrong</dd>
	<dt>Education:</dt>
	<dd><i>Second(2nd) year</i> on Software and Knowledge Engineering</dd>
	<dt>Ability:</dt>
	<dd><code>Java</code> >> <code>Swift</code> > <code>JavaScript(Pure)</code> > <code>MIPS-Assembly</code> > <code>html</code> > <code>c++</code> = <code>python</code></dd>
	<dt>Github:</dt>
	<dd><a href='https://github.com/kamontat' target='_blank'>Github</a></dd>
	<dt>Source Code</dt>
	<dd>
	<a href='https://gist.github.com/kamontat/82df4d93ff2fa418a9f2c6475b10ead6' target='_blank'>Source Code</a>
	</dd>
	</dl>
	</div>
	<div class='modal-footer'>
	<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
	</div>
	</div>
	</div>
	</div>

	<!-- start Game Modal -->
	<div class='modal fade' id='howToModal' tabindex='-1' role='dialog'>
	<div class='modal-dialog' role='document'>
	<div class='modal-content'>
	<div class='modal-header'>
	<h3 class='modal-title'>This game call <b>Guessing Number</b></h3>
	</div>
	<div id='body' class='modal-body'>
	<dl class='dl-horizontal'>
	<dt>How To Play?</dt>
	<dd>Easy game, you just guess some number in length belong your selected mode in less turn as you can</dd>
	<dt>Easy Mode: </dt>
	<dd><code>1</code> to <code>10</code></dd>
	<dt>Medium Mode: </dt>
	<dd><code>1</code> to <code>20</code></dd>
	<dt>Hard Mode: </dt>
	<dd><code>1</code> to <code>40</code></dd>
	</dl>
	</div>
	<div class='modal-footer'>
	<div>Selected Mode?</div>
	<button id='easyBtn' type='button' class='btn btn-success' data-dismiss='modal'>Easy</button>
	<button id='mediumBtn' type='button' class='btn btn-primary' data-dismiss='modal'>Medium</button>
	<button id='hardBtn' type='button' class='btn btn-danger' data-dismiss='modal'>Hard</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Latest compiled and minified JavaScript -->
	<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous'></script>
	</body>

	</html>