forked from SkillfactoryCoding/module11
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (110 loc) · 4.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>🍌Экзотические фрукты</title>
</head>
<body>
<main>
<!-- ПАНЕЛЬ УПРАВЛЕНИЯ -->
<section class="panel__wrapper">
<h2 class="wrapper__title">⚙️ Панель управления</h2>
<div class="panel__devtools">
<!-- TODO: при нажатии элементы массива перемешиваются в случайном порядке -->
<button class="shuffle__btn line">Перемешать</button>
<div class="line">
<!-- пользователь указывает нижнюю границу weight -->
<div>min weight:</div>
<input class="minweight__input" />
</div>
<div class="line">
<!-- пользователь указывает верхнюю границу weight -->
<div>max weight:</div>
<input class="maxweight__input" />
</div>
<!-- TODO: при нажатии элементы массива фильтруются в пределах [minweight, maxweight] -->
<button class="filter__btn line">Фильтровать</button>
<div class="line">
<span>Алгоритм сортировки:</span>
<!-- TODO: указывается название алгоритма сортировки -->
<span class="sort__kind"></span>
</div>
<div class="line">
<span>Время сортировки: </span>
<!-- TODO: выводится время сортировки -->
<span class="sort__time"></span>
</div>
<!-- TODO: при нажатии происходит смена алгоритма сортировки -->
<button class="sort__change__btn line">Сменить алгоритм сортировки</button>
<!-- TODO: при нажатии происходит сортировка и рассчет времени сортировки -->
<button class="sort__action__btn line">Сортировать</button>
<!-- пользователь указывает значения характеристик будущего фрукта -->
<div class="line">
<div>kind:</div>
<input class="kind__input" />
</div>
<div class="line">
<div>color:</div>
<input class="color__input" />
</div>
<div class="line">
<div>weight:</div>
<input class="weight__input" />
</div>
<!-- TODO: при нажатии новый фрукт добавляется в конец списка -->
<button class="add__action__btn line">Добавить фрукт</button>
</div>
</section>
<!-- СПИСОК ЭКЗОТИЧЕСКИХ ФРУКТОВ -->
<section class="fruits__wrapper">
<h2 class="wrapper__title">🥑 Список экзотических фруктов</h2>
<!-- TODO: формировать список динамически (то есть закоментированный код удалить) -->
<ul class="fruits__list">
<!-- <li class="fruit__item fruit_violet">
<div class="fruit__info">
<div>index: 0</div>
<div>kind: Мангустин</div>
<div>color: фиолетовый</div>
<div>weight (кг): 13</div>
</div>
</li>
<li class="fruit__item fruit_green">
<div class="fruit__info">
<div>index: 1</div>
<div>kind: Дуриан</div>
<div>color: зеленый</div>
<div>weight (кг): 35</div>
</div>
</li>
<li class="fruit__item fruit_carmazin">
<div class="fruit__info">
<div>index: 2</div>
<div>kind: Личи</div>
<div>color: розово-красный</div>
<div>weight (кг): 17</div>
</div>
</li>
<li class="fruit__item fruit_yellow">
<div class="fruit__info">
<div>index: 3</div>
<div>kind: Карамбола</div>
<div>color: Желтый</div>
<div>weight (кг): 28</div>
</div>
</li>
<li class="fruit__item fruit_lightbrown">
<div class="fruit__info">
<div>index: 4</div>
<div>kind: Тамаринд</div>
<div>color: светло-коричневый</div>
<div>weight (кг): 22</div>
</div>
</li> -->
</ul>
</section>
</main>
<script src="./js/index.js"></script>
</body>
</html>