Проблема с jquery. шахматы

Пытаюсь написать шахматы на js, затык случился с момента, подключения библиотеки jQuery. Браузер Google, вот какую картинку выдает:

введите сюда описание изображения

С начала подумал (работаю в VScode) что надо бы подключить jquery code snippets, сделал, не помогло. Что можно сделать, желательно не меняя код, может что-то еще надо подключить или еще что?

Вот сам код

$(function () {
    $('.board').html('');
    $('.board').append('<div class="square white"></div>');
    $('.board').append('<div class="square black"></div>');
    console.log('chess');
})
        
.board {
    width: 160px;
    height: 160px;
    border: 20px solid #55cdef;
}
.square {
    float: left;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.black {
    background-color: #999;
}
.white {
    background-color: #eee;
}
.figure {
    font-size: 60px;
    cursor: pointer;
}
<!DOCTYPE HTML>
<html>
    <head>
        <title>Online chess</title>
        <link rel="stylesheet" type="text/css" href="chess.css" />
        <script>src="https://code.jquery.com/jquery-1.12.4.js"</script>
        <script>src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"</script>
        <script src="chess.js"></script>
    </head>
    <body>
        <div class="board">   
        </div>
    </body>
</html>


Ответы (0 шт):