Last active
June 10, 2019 07:54
-
-
Save dandgerson/aa51ad7afa280fdae1f077f20585c25e to your computer and use it in GitHub Desktop.
Assignment: Animate sorting
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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, shrink-to-fit=no"> | |
<title>Template project</title> | |
<!-- Bootstrap 4 CSS --> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> | |
<!-- Fonts --> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
<!-- Custom CSS --> | |
<link rel="stylesheet" href="css/main.css"> | |
</head> | |
<body> | |
<!--[if lt IE 7]> | |
<p class="browsehappy">Вы используете <strong>устаревший</strong> браузер. | |
Пожалуйста <a href="http://browsehappy.com/"><strong>обновите</strong></a> его.</p> | |
<![endif]--> | |
<div class="container"> | |
<div class="row"> | |
<div class="col"> | |
<h1>Задача JS – Анимированная сортировка</h1> | |
<h2>Формулировка задачи</h2> | |
<p>Необходимо «оживить», т.е. отобразить графически процесс сортировки целых чисел, чтобы пользователь мог воочию наблюдать как сортируются данные.</p> | |
<p>Предлагается на выбор два алгоритма которые очень легко представить визуально:</p> | |
<ol> | |
<li>Сортировка пузырьком – наглядное «всплытие» элементов в массиве.</li> | |
<li>Сортировка бинарным деревом - посторение дерева, а потом его обход в правильном порядке.</li> | |
</ol> | |
<p>Чем красивее будет представлен процесс, тем лучше, приветствуется использование CSS и картинок. Креатив также приветствуется. | |
Страничка также должна уметь генерировать себе наборы данных для сортировки и показывать их до и после сортировки. | |
</p> | |
<p> | |
На странице обязательно написать инструкцию как ей пользоваться. | |
</p> | |
<p> | |
Использование библиотек никак не ограничивается, плюсом будет использование jQuery. Именно ее мы активно используем. | |
</p> | |
<p> | |
Результатом должна быть html страница с JavaScript, CSS, картинками, открыв которую в браузере можно будет выполнять описанный сценарий. | |
Крайне желательно организовать html, js, css код по разным файлам. В js коде организовать работу с классами и оставить комментарии поясняющие что делается и зачем. | |
</p> | |
<h2>Требования</h2> | |
<ol> | |
<li>Отсутствие ошибок, результат четко соответствует заданию.</li> | |
<li>Отсутствует дублирующийся код</li> | |
<li>Краткость кода: чем меньше действий, тем лучше</li> | |
<li>Читабельность кода – осмысленные названия переменных, методов и классов</li> | |
<li>Структурированность кода - Форматирование отступы 3 символа</li> | |
<li>Понятность – наличие комментариев и пояснения в форме как этим пользоваться</li> | |
<li>Красивый внешний вид. Чем больше анимации, чем плавнее движения на экране, чем логичнее построен процесс – тем лучше.</li> | |
</ol> | |
</div> | |
</div> | |
</div> | |
<!-- jQuery first, then Tether, then Bootstrap 4 JS. --> | |
<script src="js/libs.min.js"></script> | |
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> | |
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> | |
<!-- JS Plugins --> | |
<script></script> | |
<!-- Custom JS --> | |
<script src="js/main.js"></script> | |
<!-- JQuery test script --> | |
<script> | |
if (typeof jQuery == "undefined") { | |
alert("jQuery is not installed!"); | |
} else { | |
alert("jQuery is installed correctly!"); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment