I want some tips on how to make my code better, more efficient, better coding practices, etc.Codepen/**     * Created by Alonski on 6/14/2016.     */        use strict;    $(function () {        console.log(Start);            // class gameItem {        //     constructor(x, y)        // }        let playerOneTurn = true;        let inTurn = false;        let firstGlyph = 0;        let secondGlyph = 0;        let lock = false;            const colorOrig = 'blue';        const numOfCols = 12;        const numOfRows = 4;        const glyphOrig = 'glyphicon-tree-deciduous';        const glyphs = [            'glyphicon-plane',            'glyphicon-fire',            'glyphicon-thumbs-up',            'glyphicon-gbp',            'glyphicon-phone',            'glyphicon-heart-empty',            'glyphicon-paperclip',            'glyphicon-earphone',            'glyphicon-education',            'glyphicon-king',            'glyphicon-queen',            'glyphicon-pawn',            'glyphicon-asterisk',            'glyphicon-plus',            'glyphicon-minus',            'glyphicon-euro',            'glyphicon-cloud',            'glyphicon-envelope',            'glyphicon-pencil',            'glyphicon-glass',            'glyphicon-music',            'glyphicon-search',            'glyphicon-heart',            'glyphicon-star',            'glyphicon-star-empty',            'glyphicon-user',            'glyphicon-film',            'glyphicon-th-large',            'glyphicon-th',            'glyphicon-th-list',            'glyphicon-ok',            'glyphicon-remove',            'glyphicon-zoom-in',            'glyphicon-zoom-out',            'glyphicon-off',            'glyphicon-signal',            'glyphicon-cog',            'glyphicon-trash',            'glyphicon-home',            'glyphicon-file',            'glyphicon-time',            'glyphicon-road',            'glyphicon-download-alt',            'glyphicon-download',            'glyphicon-upload',            'glyphicon-inbox',            'glyphicon-play-circle',            'glyphicon-repeat',            'glyphicon-refresh',            'glyphicon-list-alt',            'glyphicon-lock',            'glyphicon-flag',            'glyphicon-headphones',            'glyphicon-volume-off',            'glyphicon-volume-down',            'glyphicon-volume-up',            'glyphicon-qrcode',            'glyphicon-barcode',            'glyphicon-tag',            'glyphicon-tags',            'glyphicon-book',            'glyphicon-bookmark',            'glyphicon-print',            'glyphicon-camera',            'glyphicon-font',            'glyphicon-bold',            'glyphicon-italic',            'glyphicon-text-height',            'glyphicon-text-width',            'glyphicon-align-left',            'glyphicon-align-center',            'glyphicon-align-right',            'glyphicon-align-justify',            'glyphicon-list',            'glyphicon-indent-left',            'glyphicon-indent-right',            'glyphicon-facetime-video',            'glyphicon-picture',            'glyphicon-map-marker',            'glyphicon-adjust',            'glyphicon-tint',            'glyphicon-edit',            'glyphicon-share',            'glyphicon-check',            'glyphicon-move',            'glyphicon-step-backward',            'glyphicon-fast-backward',            'glyphicon-backward',            'glyphicon-play',            'glyphicon-pause',            'glyphicon-stop',            'glyphicon-forward',            'glyphicon-fast-forward',            'glyphicon-step-forward',            'glyphicon-eject',            'glyphicon-chevron-left',            'glyphicon-chevron-right',            'glyphicon-plus-sign',            'glyphicon-minus-sign',            'glyphicon-remove-sign',            'glyphicon-ok-sign',            'glyphicon-question-sign',            'glyphicon-info-sign',            'glyphicon-screenshot',            'glyphicon-remove-circle',            'glyphicon-ok-circle',            'glyphicon-ban-circle',            'glyphicon-arrow-left',            'glyphicon-arrow-right',            'glyphicon-arrow-up',            'glyphicon-arrow-down',            'glyphicon-share-alt',            'glyphicon-resize-full',            'glyphicon-resize-small',            'glyphicon-exclamation-sign',            'glyphicon-gift',            'glyphicon-leaf',            'glyphicon-fire',            'glyphicon-eye-open',            'glyphicon-eye-close',            'glyphicon-warning-sign',            'glyphicon-plane',            'glyphicon-calendar',            'glyphicon-random',            'glyphicon-comment',            'glyphicon-magnet',            'glyphicon-chevron-up',            'glyphicon-chevron-down',            'glyphicon-retweet',            'glyphicon-shopping-cart',            'glyphicon-folder-close',            'glyphicon-folder-open',            'glyphicon-resize-vertical',            'glyphicon-resize-horizontal',            'glyphicon-hdd',            'glyphicon-bullhorn',            'glyphicon-bell',            'glyphicon-certificate',            'glyphicon-thumbs-up',            'glyphicon-thumbs-down',            'glyphicon-hand-right',            'glyphicon-hand-left',            'glyphicon-hand-up',            'glyphicon-hand-down',            'glyphicon-circle-arrow-right',            'glyphicon-circle-arrow-left',            'glyphicon-circle-arrow-up',            'glyphicon-circle-arrow-down',            'glyphicon-globe',            'glyphicon-wrench',            'glyphicon-tasks',            'glyphicon-filter',            'glyphicon-briefcase',            'glyphicon-fullscreen',            'glyphicon-dashboard',            'glyphicon-paperclip',            'glyphicon-heart-empty',            'glyphicon-link',            'glyphicon-phone',            'glyphicon-pushpin',            'glyphicon-usd',            'glyphicon-gbp',            'glyphicon-sort',            'glyphicon-sort-by-alphabet',            'glyphicon-sort-by-alphabet-alt',            'glyphicon-sort-by-order',            'glyphicon-sort-by-order-alt',            'glyphicon-sort-by-attributes',            'glyphicon-sort-by-attributes-alt',            'glyphicon-unchecked',            'glyphicon-expand',            'glyphicon-collapse-down',            'glyphicon-collapse-up',            'glyphicon-log-in',            'glyphicon-flash',            'glyphicon-log-out',            'glyphicon-new-window',            'glyphicon-record',            'glyphicon-save',            'glyphicon-open',            'glyphicon-saved',            'glyphicon-import',            'glyphicon-export',            'glyphicon-send',            'glyphicon-floppy-disk',            'glyphicon-floppy-saved',            'glyphicon-floppy-remove',            'glyphicon-floppy-save',            'glyphicon-floppy-open',            'glyphicon-credit-card',            'glyphicon-transfer',            'glyphicon-cutlery',            'glyphicon-header',            'glyphicon-compressed',            'glyphicon-earphone',            'glyphicon-phone-alt',            'glyphicon-tower',            'glyphicon-stats',            'glyphicon-sd-video',            'glyphicon-hd-video',            'glyphicon-subtitles',            'glyphicon-sound-stereo',            'glyphicon-sound-dolby',            'glyphicon-sound-5-1',            'glyphicon-sound-6-1',            'glyphicon-sound-7-1',            'glyphicon-copyright-mark',            'glyphicon-registration-mark',            'glyphicon-cloud-download',            'glyphicon-cloud-upload',            'glyphicon-tree-conifer',            'glyphicon-cd',            'glyphicon-save-file',            'glyphicon-open-file',            'glyphicon-level-up',            'glyphicon-copy',            'glyphicon-paste',            'glyphicon-alert',            'glyphicon-equalizer',            'glyphicon-king',            'glyphicon-queen',            'glyphicon-pawn',            'glyphicon-bishop',            'glyphicon-knight',            'glyphicon-baby-formula',            'glyphicon-tent',            'glyphicon-blackboard',            'glyphicon-bed',            'glyphicon-apple',            'glyphicon-erase',            'glyphicon-hourglass',            'glyphicon-lamp',            'glyphicon-duplicate',            'glyphicon-piggy-bank',            'glyphicon-scissors',            'glyphicon-bitcoin',            'glyphicon-yen',            'glyphicon-ruble',            'glyphicon-scale',            'glyphicon-ice-lolly',            'glyphicon-ice-lolly-tasted',            'glyphicon-education',            'glyphicon-option-horizontal',            'glyphicon-option-vertical',            'glyphicon-menu-hamburger',            'glyphicon-modal-window',            'glyphicon-oil',            'glyphicon-grain',            'glyphicon-sunglasses',            'glyphicon-text-size',            'glyphicon-text-color',            'glyphicon-text-background',            'glyphicon-object-align-top',            'glyphicon-object-align-bottom',            'glyphicon-object-align-horizontal',            'glyphicon-object-align-left',            'glyphicon-object-align-vertical',            'glyphicon-object-align-right',            'glyphicon-triangle-right',            'glyphicon-triangle-left',            'glyphicon-triangle-bottom',            'glyphicon-triangle-top',            'glyphicon-superscript',            'glyphicon-subscript',            'glyphicon-menu-left',            'glyphicon-menu-right',            'glyphicon-menu-down',            'glyphicon-menu-up',        ];        const colors = [            'red',            'green',            'teal',            'black',            'darkmagenta',        ];        // let style='<div style=color:darkmagenta></div>';        Array.prototype.shuffle = function () {            let arr = this;            for (let i = 0; i < arr.length; i++) {                let randomNum = Math.floor(Math.random() * arr.length);                let temp = arr[i];                arr[i] = arr[randomNum];                arr[randomNum] = temp;            }            return arr;        };            function createRows(numOfRows) {            let oldGlyphs = glyphs.shuffle().splice(0, (numOfCols * numOfRows) / 2);            // let oldGlyphs = glyphs.shuffle();            let newGlyphs = [];            newGlyphs.push(...oldGlyphs);            for (let i = 0; i < ((numOfCols * numOfRows) / 2) - oldGlyphs.length; i++) {                newGlyphs.push(oldGlyphs[i]);            }            let randomGlyphs = newGlyphs;            randomGlyphs.forEach(function (element, index, array) {                let randomNum = Math.floor(Math.random() * colors.length);                array[index] = [element, colors[randomNum]];            });            randomGlyphs.push(...newGlyphs);            // console.log('To Flow:', randomGlyphs, Old:, glyphs);            // for (let i = 0; i < numOfRows - 1; i++) {            //     randomGlyphs.push(...oldGlyphs);            // }            // console.log('before random', randomGlyphs);                randomGlyphs.shuffle();            // randomGlyphs.push(...glyphs.shuffle());            // console.log('random', randomGlyphs);            // let randomGlyphs = glyphs;            // console.log(randomGlyphs);            while (randomGlyphs.length) {                let row = $('<div class=row></div>');                for (let i = 0; i < numOfCols; i++) {                    // console.log(`H: ${h} I: ${i}`);                    let cell = randomGlyphs.pop();                    let col = $(`<div class=col-xs-1><h1><span class=glyphicon ${glyphOrig} aria-hidden=true data-behind=${cell[0]} data-color=${cell[1]} style=color:blue></span></h1></div>`);                    col.appendTo(row);                }                row.appendTo('#gameGame div.container');            }        }            function changeUser() {            if (playerOneTurn) {                $('#player1').removeClass('label-success').addClass('label-danger');                $('#player2').removeClass('label-danger').addClass('label-success');            }            else {                $('#player1').removeClass('label-danger').addClass('label-success');                $('#player2').removeClass('label-success').addClass('label-danger');            }            playerOneTurn = !playerOneTurn;        }            function addUserScore() {            if (playerOneTurn) {                let player = $('#player1Score');                console.log(`Player 1 Score:${player.text()}`);                player.text(Number(player.text()) + 10);            }            else {                let player = $('#player2Score');                console.log(`Player 2 Score:${player.text()}`);                player.text(Number(player.text()) + 10);            }        }            function resetUserScore() {            $('#player1').removeClass('label-danger').addClass('label-success');            $('#player2').removeClass('label-success').addClass('label-danger');            $('#player1Score,#player2Score').text('0');        }            function resetVariables() {            playerOneTurn = true;            inTurn = false;            firstGlyph = 0;            secondGlyph = 0;        }            function resetGame() {            $('section#gameGame').children('div.container').children().remove();            $('#gameAlert').removeClass('alert-success alert-warning alert-danger').addClass('alert-info');            $('#gameAlert').text(`Hello! Match the Glyphs to win!`);            resetUserScore();            resetVariables();            createRows(numOfRows);            // createRow();        }            function checkEndGame() {            let player1Score = Number($('#player1Score').text());            let player2Score = Number($('#player2Score').text());            if (player1Score/10 + player2Score/10 >= (numOfCols * numOfRows) / 2) {                if (player1Score > player2Score) {                    $('#gameAlert').text(`Good Game! Player 1 Wins!`);                    $('#gameAlert').removeClass('alert-info alert-warning alert-danger').addClass('alert-success');                    // alert(`Good Game! Player 1 Wins!`);                }                else if (player1Score < player2Score) {                    $('#gameAlert').text(`Good Game! Player 2 Wins!`);                    $('#gameAlert').removeClass('alert-info alert-warning alert-danger').addClass('alert-success');                    // alert(`Good Game! Player 2 Wins!`);                }                else {                    $('#gameAlert').text(`Good Game! Its a Tie!`);                    $('#gameAlert').removeClass('alert-info alert-success alert-danger').addClass('alert-warning');                    // alert(`Good Game! Its a Tie!`);                }                // resetGame();            }            console.log(player1Score, player2Score);            // $('span.glyphicon-eye-open').each((index, element) => {            //     // console.log(index, $(element).data('behind'));            // });        }            $('#newGameButton').on('click', function () {            console.log(New Game);            resetGame();            });            $('div.container').on('click', '.' + glyphOrig, function () {            if (lock) {                return;            }            if (!inTurn) {                firstGlyph = $(this);                firstGlyph.removeClass(glyphOrig);                firstGlyph.addClass(firstGlyph.data('behind'));                firstGlyph.css('color', firstGlyph.data('color'));                inTurn = true;                console.log(firstGlyph.data('behind'), firstGlyph.data('color'));                return;            }                secondGlyph = $(this);            secondGlyph.removeClass(glyphOrig);            secondGlyph.addClass($(this).data('behind'));            secondGlyph.css('color', secondGlyph.data('color'));            lock = true;            window.setTimeout(function () {                inTurn = false;                lock = false;                if (firstGlyph.data('behind') === secondGlyph.data('behind') && firstGlyph.data('color') === secondGlyph.data('color')) {                    console.log(Correct!);                    firstGlyph.removeClass(firstGlyph.data('behind'));                    secondGlyph.removeClass(secondGlyph.data('behind'));                    // firstGlyph.remove();                    // secondGlyph.remove();                    addUserScore();                    checkEndGame();                } else {                    console.log(Not Correct!);                    changeUser();                    firstGlyph.removeClass(firstGlyph.data('behind'));                    firstGlyph.addClass(glyphOrig);                    firstGlyph.css('color', colorOrig);                    // firstGlyph.addClass(glyphOrig).slideUp(300).delay(800).fadeIn(400);                    secondGlyph.removeClass(secondGlyph.data('behind'));                    secondGlyph.addClass(glyphOrig);                    secondGlyph.css('color', colorOrig);                }            }, 500);            // console.log(secondGlyph.data('behind'));            // switch (inTurn) {            //     case tri:            //            //     case 1:            //            //     // case 2:            //     //     console.log(firstGlyph.data('behind'));            //     //     console.log(secondGlyph.data('behind'));            //     //     firstGlyph.removeClass(firstGlyph.data('behind'));            //     //     firstGlyph.addClass(glyphOrig);            //     //     secondGlyph.removeClass(secondGlyph.data('behind'));            //     //     secondGlyph.addClass(glyphOrig);            //     //     inTurn = 0;            //     //     break;            // }        });        // function updateTotal() {        //     // console.log($('ul.cart li.item').data('price'));        //     let total = 0;        //     $('ul.cart li.item').each((index, element) => {        //         // console.log(Logging, index, element);        //         // console.log(Price: , $(element).data('price'));        //         total += $(element).data('price') * Number($(element).children('span').text());        //     });        //     // console.log(`Total: ${total}`);        //     $(#total).text(`${total} Shmekels`);        // }        //        // $(ul.inventory).on('click', 'li', function () {        //     let el = $(this);        //     let elCart = 0;        //     let contains = false;        //     $('ul.cart li.item').each((index, element) => {        //         // console.log(`El ID: ${el.data('type')}, Element ID: ${$(element).data('type')}`);        //         if (el.data('type') === $(element).data('type')) {        //             contains = true;        //             elCart = $(element);        //             return false;        //             // console.log(Same id);        //         }        //         // console.log(Logging, index, element);        //         // console.log(this);        //         // console.log(element);        //         // console.log(`El: ${el} and Element: ${element}`);        //         // if ($('ul.cart').find(this).length > 0) {        //         //     contains = true;        //         //     console.log('Contains El');        //         // }        //     });        //     // let el_price = Number($(this).data('price'));        //     // $(#total).text(Number($(#total).text()) + el_price);        //     // el.slideToggle(fast, function () {        //     if (contains) {        //         // let numOfItem = Number($('ul.cart li.item span.badge').text());        //         let numOfItem = Number(elCart.children('span').text());        //         if (numOfItem >= 0) {        //             elCart.children('span').text((numOfItem + 1));        //         }        //         // elCart.append('<span class=badge>1</span>');        //         // console.log(Adding + to Current Element);        //     }        //     else {        //         let newEl = el.clone();        //         newEl.children('span').text('1');        //         // let newElButton = '<button type=button class=btn btn-sm btn-danger>Delete</button>';        //         newEl.append('<button type=button class=btn btn-danger data-type=delete><span class=glyphicon glyphicon-remove></span></button>');        //         newEl.append('<button type=button class=pull-right btn btn-warning data-type=minus><span class=glyphicon glyphicon-minus></span></button>');        //         newEl.prepend('<button type=button class=pull-right btn btn-success data-type=plus><span class=glyphicon glyphicon-plus></span></button>');        //         $('ul.cart').prepend(newEl);        //         // $('ul.cart').prepend(el.slideToggle());        //         // });        //     }        //     updateTotal();        //     // console.log($(this).text(), $(this).data('price'));        // });        //        // $('ul.cart').on('click', 'button', function () {        //     // console.log($(this));        //     let numOfItem = Number($(this).parent().children('span').text());        //     switch ($(this).data('type')) {        //         case('delete'):        //             $(this).parent().remove();        //             break;        //         case('plus'):        //             if (numOfItem >= 0) {        //                 $(this).parent().children('span').text((numOfItem + 1));        //             }        //             break;        //         case('minus'):        //             if (numOfItem > 1) {        //                 $(this).parent().children('span').text((numOfItem - 1));        //             }        //             else {        //                 $(this).parent().remove();        //             }        //             break;        //     }        //     updateTotal();        // });        //        // // $(ul.cart).on('click', 'li', function () {        // //     let el = $(this);        // //     // el.slideToggle(fast, function () {        // //     $('ul.inventory').prepend(el);        // //     // });        // //     // console.log($(this).text(), $(this).data('price'));        // //     updateTotal();        // // });    });    <!DOCTYPE html>    <html lang=en>    <head>        <meta charset=UTF-8>        <meta http-equiv=X-UA-Compatible content=IE=edge>        <meta name=viewport content=width=device-width, initial-scale=1>        <title>Memory Game</title>        <!--<style>-->        <!--p {-->        <!--color: black;-->        <!--}-->            <!--.error {-->        <!--border: 1px solid red;-->        <!--color: red;-->        <!--}-->        <!--</style>-->        <link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel=stylesheet>        <!--<link href=css/bootstrap-theme.min.css rel=stylesheet>-->        <!--<link href=https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.min.css rel=stylesheet/>-->        </head>    <body>    <section id=gameTop>        <div class=container>            <div class=row align=center>                <div class=col-xs-4><h3><span class=label label-success id=player1>Alon <span class=badge>Score:<span id=player1Score>0</span></span></span></h3></div>                <div class=col-xs-4><h1>Memory Game!</h1></div>                <div class=col-xs-4><h3><span class=label label-danger id=player2>Moral <span class=badge>Score:<span id=player2Score>0</span></span></span></h3></div>            </div>            <div class=alert alert-info text-center role=alert id=gameAlert>Hello! Match the Glyphs to win!</div>            <div align=center><button type=button class=btn btn-default id=newGameButton>New Game</button></div>        </div>    </section>    <section id=gameGame>        <div class=container>            <!--<div class=row>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-plane></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-fire></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-thumbs-up></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-gbp></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-phone></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-heart-empty></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-paperclip></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-earphone></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-education></span></h1></div>-->            <!--<div class=col-xs-1><h1><span class=glyphicon glyphicon-eye-open aria-hidden=true data-behind=glyphicon-king></span></h1></div>-->            <!--</div>-->            <!--<div class=row>-->            <!--<div class=col-md-6>-->            <!--<h1><span class=glyphicon glyphicon-shopping-cart aria-hidden=true></span><span class=glyphicon glyphicon-chevron-down aria-hidden=true></span>:</h1>-->            <!--<ul class=list-group inventory>-->            <!--<li class=item list-group-item data-price=5 data-type=inv1>Cheese 5 Shmekels<span class=badge></span></li>-->            <!--<li class=item list-group-item data-price=3 data-type=inv2>Milk 3 Shmekels<span class=badge></span></li>-->            <!--<li class=item list-group-item data-price=4 data-type=inv3>Taco 4 Shmekels<span class=badge></span></li>-->            <!--<li class=item list-group-item data-price=5 data-type=inv4>Meat 5 Shmekels<span class=badge></span></li>-->            <!--<li class=item list-group-item data-price=6 data-type=inv5>Tofu 6 Shmekels<span class=badge></span></li>-->            <!--</ul>-->            <!--</div>-->            <!--<div class=col-md-6>-->            <!--<h1><span class=glyphicon glyphicon-shopping-cart aria-hidden=true></span><span class=glyphicon glyphicon-chevron-up aria-hidden=true></span>:</h1>-->            <!--<ul class=list-group cart>-->            <!--<li class=list-group-item>Total: <span id=total>0 Shmekels</span></li>-->            <!--</ul>-->            <!--</div>-->            <!--</div>-->        </div>    </section>        <script src=https://code.jquery.com/jquery-2.2.4.min.js></script>    <script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>    <script src=memoryGame.js></script>    </body>    </html>
JavaScript / jQuery Memory Guessing Game
javascript;jquery;html5;ecmascript 6