Skip to content

Instantly share code, notes, and snippets.

@dandgerson
Last active June 10, 2019 07:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dandgerson/aa51ad7afa280fdae1f077f20585c25e to your computer and use it in GitHub Desktop.
Save dandgerson/aa51ad7afa280fdae1f077f20585c25e to your computer and use it in GitHub Desktop.
Assignment: Animate sorting
<!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