Тестовое задание:
Создать 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, хотя и движущаяся к закату.