Пример выполнения тестового задания JS

Тестовое задание:

Создать HTML страницу с адаптивным дизайном под любое устройство. Можно использовать bootstrap.

По центру:

  • Заголовок «Олимпиада»
  • Поле ввода с лейблом «Участники», плейсхолдер «введите имена участников через запятую» (доступны только кириллические буквы и запятая)
  • Кнопка «Добавить» (должна реагировать не только на щелчок мышью, но и на нажатие enter)

При первом нажатии на кнопку должна появляться таблица с полями: id, имя, очки. Поле ввода «Участники» должно становиться пустым. Плейсхолдер при этом прежний.

  • id — это порядковый номер в списке участников, который ввёл пользователь.
  • очки для каждого участника сгеренировать рандомно.

Все столбцы таблицы должны быть сортируемыми при нажатии на заголовок столбца.

Если таблица уже отобразилась, то снова при нажатии на кнопку «Добавить» в таблицу должны добавляться участники, которых дописали.

Все ошибки пользователя при добавлении участников выводить через модальное окно с небольшим описанием, чтобы пользователь мог исправиться.

Пример выполнения данного тестового задания:

olimp.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Шаблон Bootstrap 101</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css" >
    </head>
    <body>
        <header>
            <div class="collapse bg-dark" id="navbarHeader">
                <div class="container">
                    <div class="row">
                    <div class="col-sm-8 col-md-7 py-4">
                        <h4 class="text-white">About</h4>
                        <p class="text-muted">This page made for add new sport unit</p>
                    </div>
                    <div class="col-sm-4 offset-md-1 py-4">
                        <h4 class="text-white">Contact</h4>
                        <ul class="list-unstyled">
                        <li><a href="http://ithazard.com" class="text-white">Dmitriy</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
            </div>
            <div class="navbar navbar-dark bg-dark box-shadow">
                <div class="container d-flex justify-content-between">
                    <a href="#" class="navbar-brand d-flex align-items-center"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
            </div>
        </header>
        <main role="main">
            <section class="jumbotron text-center">
                <div class="container">
                    <h1 class="jumbotron-heading">Олимпиада</h1>
                    <p>
                    <label class="lead text-muted">Участники</label>
                    <input type="text" onkeyup="validateInput( this );" class="col-md-4 input-name" placeholder="Введите имена участников через запятую">
                    <a href="#" onclick="addUser()" class="btn btn-primary addUser">Добавить</a>
                    </p>
                </div>
            </section>
            <div class="container user-table" style="display: none">
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th class="sort-id" onclick="sortColumn(0)">id</th>
                            <th class="sort-name" onclick="sortColumn(1)">Имя</th>
                            <th class="sort-result" onclick="sortColumn(2)">Очки</th>
                        </tr>
                    </thead>
                    <tbody class="user-item">
                    </tbody>
                </table>
            </div>
        </main>
        <!-- Модальное окно -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        Уважаемый пользователь, пожалуйста, используйте только символы кириллицы и знак запятой.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <footer class="text-muted">
        </footer>

        <script>
            $('.input-name').keyup(function(e) {
                if(e.which == 13) {
                    addUser();
                }
            });

            function addUser() {
                let elems;
                let inputName = $(".input-name").val().replace(/[^а-яА-ЯёЁ, -]/ig,'');
                let names = inputName.split(',');
                $(".user-table").css("display","block");
                $(".input-name").val('');
                for(let i = 0; i < names.length; i++){
                    if( !$(".checks").hasClass("number-user") ){
                        elems = 1;
                    }else{
                        elems = ($(".number-user").length) + 1;
                    }
                    let resultUser = Math.floor(11 + Math.random() * 80);
                    addUserItem(elems, names[i].trim(), resultUser);
                }
            }

            function addUserItem(elems, inputName, resultUser) {
                $(".user-item").append("<tr class=\"container-user\"><td class=\"number-user checks\">"+elems+"</td><td class=\"name-user\">"+
                inputName+"</td><td class=\"result-user\">"+resultUser+"</td></tr>");
            }

            function sortColumn(numColomn){
                let containerUser = $(".container-user");
                let containerTotal = containerUser.length;
                let usersStore = [];
                for(let i=0; i<containerTotal; i++){
                    usersStore.push(   [$(containerUser[i]).find( ".number-user" ).text(),
                                        $(containerUser[i]).find( ".name-user" ).text(),
                                        $(containerUser[i]).find( ".result-user" ).text()]);
                }
                $('.user-item').empty();
                if(numColomn === 0){
                    usersStore.sort(function(a,b){return a[0]-b[0];});
                } else{
                    usersStore.sort(function(a,b){
                        if (a[numColomn] < b[numColomn]){
                            return -1;
                        }else if (a[numColomn] > b[numColomn]) {
                            return  1;
                        }else{
                            return 0;
                        }
                    });
                }
                usersStore.join();
                for(let i=0; i<containerTotal; i++){
                    addUserItem(usersStore[i][0], usersStore[i][1], usersStore[i][2]);
                }
            }

            function validateInput( obj ) {
                if( /[^а-яА-ЯёЁ, -]/ig.test( $(".input-name").val() ) ) {
                    obj.value = obj.value.replace(/[^а-яА-ЯёЁ, -]/ig,'');
                    $('#myModal').modal('show');
                    $('#myModal').on('shown.bs.modal', function () {
                        $('.input-name').focus()
                    })
                }else {
                    $("#myModal").modal('hide');
                }
            }
        </script>
    </body>
</html>

css/style.css:

td,th { text-align: center }

th { cursor: pointer; }

Не знаю насколько корректно это тестовое задание характеризует JS разработчика, у меня на выполнение этого задания ушло пару-тройку часов. Мне кажется, важно обращать внимание не столько на скорость выполнения, сколько на соблюдение парадигм программирования, минимум — таких как DRY. Плюс наверно стоит сказать, что в данном примере используется не только чистый JS, но и библиотека JQuery, и как бы Мы к этой библиотеке ни относились, на текущую дату, это одна из самых распространенных библиотек в среде JS, хотя и движущаяся к закату.

Добавить комментарий