update

README.md

@@ -1 +1,16 @@
-🚀 Шаблон итоговой работы для модуля "Базовый JS. Циклы и массивы"
+# Домашняя работа
+
+## Описание заданий
+Динамически отображается исходный список фруктов. Элементы хранятся в формате JSON.
+
+→ Реализована возможность перемешивания всех элементов списка. То есть, если изначально все элементы выставлены в определенном порядке, то этот порядок должен быть нарушен. Если при перемешивании получившийся массив совпадает со старым. К примеру: [1, 0] => [1, 0]. Тогда выводится alert с предупреждением, что порядок не изменился.
+
+→ Добавлена фильтрация списка по полю weight в заданном диапазоне, включая концы.
+
+→ Добавлена возможность сортировки по полю color. Текущий алгоритм сортировки отражается напротив поля «Алгоритм сортировки» (по умолчанию "bubbleSort"), а время сортировки напротив поля «Время сортировки» (по умолчанию "-").
+
+Всего реализовано 2 алгоритма, которые меняются по кнопке «Сменить алгоритм сортировки»: "bubbleSort" и "quickSort".
+
+→ Написана функция comparationColor, чтобы абстрагировать логику сравнения элементов. 
+
+→ Реализована возможность добавлять новые фрукты. Если одно из полей пустое, фрукт не добавляется, выводится alert с предупреждением.

css/index.css

@@ -127,6 +127,10 @@ main {
   background: #cd853f;
 }
 
+.fruit_none {
+  background: #d79512;
+}
+
 .fruit__info {
   display: flex;
   justify-content: center;
@@ -135,4 +139,4 @@ main {
   background: #fff;
   height: 100%;
   padding: 10px;
-}
+}

index.html

@@ -122,4 +122,4 @@ <h2 class="wrapper__title">🥑 Список экзотических фрукт
 
     <script src="./js/index.js"></script>
   </body>
-</html>
+</html>

js/index.js

@@ -10,6 +10,9 @@ const kindInput = document.querySelector('.kind__input'); // поле с наз
 const colorInput = document.querySelector('.color__input'); // поле с названием цвета
 const weightInput = document.querySelector('.weight__input'); // поле с весом
 const addActionButton = document.querySelector('.add__action__btn'); // кнопка добавления
+const minWeight = document.querySelector('.minweight__input'); // поле с минимальным весом
+const maxWeight = document.querySelector('.maxweight__input'); // поле с максимальным весом
+
 
 // список фруктов в JSON формате
 let fruitsJSON = `[
@@ -29,10 +32,39 @@ let fruits = JSON.parse(fruitsJSON);
 const display = () => {
   // TODO: очищаем fruitsList от вложенных элементов,
   // чтобы заполнить актуальными данными из fruits
+  fruitsList.innerHTML = '';
 
   for (let i = 0; i < fruits.length; i++) {
-    // TODO: формируем новый элемент <li> при помощи document.createElement,
-    // и добавляем в конец списка fruitsList при помощи document.appendChild
+    console.log(fruits);
+    const newLi = document.createElement("li");
+    newLi.classList.add('fruit__item');
+    if (fruits[i].color == "фиолетовый") {
+      newLi.classList.add('fruit_violet');
+    } else
+      if (fruits[i].color == "зеленый") {
+        newLi.classList.add('fruit_green');
+      } else
+        if (fruits[i].color == "розово-красный") {
+          newLi.classList.add('fruit_carmazin');
+        } else
+          if (fruits[i].color == "желтый") {
+            newLi.classList.add('fruit_yellow');
+          } else
+            if (fruits[i].color == "светло-коричневый") {
+              newLi.classList.add('fruit_lightbrown');
+            } else
+              newLi.classList.add('fruit_none');
+    fruitsList.appendChild(newLi);     // добавляем в конец списка fruitsList при помощи document.appendChild
+
+    const div = document.createElement("div");
+    div.classList.add('fruit__info');
+    newLi.appendChild(div);  // добавляем div в родительский элемент li при помощи document.appendChild
+    div.innerHTML = `
+        <div>index: ${i + 1}</div>
+        <div>kind: ${fruits[i].kind}</div>
+        <div>color: ${fruits[i].color}</div>
+        <div>weight: ${fruits[i].weight}</div>
+        `;
   }
 };
 
@@ -49,18 +81,16 @@ const getRandomInt = (min, max) => {
 // перемешивание массива
 const shuffleFruits = () => {
   let result = [];
-
-  // ATTENTION: сейчас при клике вы запустите бесконечный цикл и браузер зависнет
+  let newFruits = [...fruits]; //Первоначальный масив для проверки на совпадение при перемешивании
   while (fruits.length > 0) {
-    // TODO: допишите функцию перемешивания массива
-    //
-    // Подсказка: находим случайный элемент из fruits, используя getRandomInt
-    // вырезаем его из fruits и вставляем в result.
-    // ex.: [1, 2, 3], [] => [1, 3], [2] => [3], [2, 1] => [], [2, 1, 3]
-    // (массив fruits будет уменьшатся, а result заполняться)
+    let randomFruit = getRandomInt(0, fruits.length - 1); //находим случайный элемент из fruits, используя getRandomInt
+    result.push(fruits[randomFruit]);  //вставляю рандомный элемент
+    fruits.splice(randomFruit, 1);  //вырезаю рандомный элемент
   }
-
   fruits = result;
+  if (fruits.every((el, index) => el === newFruits[index])) {
+    alert("Новый массив идентичен первоначальному. Перемешайте ещё раз!");
+  }
 };
 
 shuffleButton.addEventListener('click', () => {
@@ -72,9 +102,19 @@ shuffleButton.addEventListener('click', () => {
 
 // фильтрация массива
 const filterFruits = () => {
-  fruits.filter((item) => {
-    // TODO: допишите функцию
+  if (isNaN(maxWeight.value) || isNaN(minWeight.value) || maxWeight.value == '' || minWeight.value == '' || maxWeight.value < 0 || minWeight.value < 0) {
+    alert('Введите корректные значения веса');
+    minWeight.value = "";
+    maxWeight.value = "";
+    return fruits;
+  };
+  let result = fruits.filter((item) => {
+    if (parseInt(maxWeight.value) < parseInt(minWeight.value)) {
+      [maxWeight.value, minWeight.value] = [minWeight.value, maxWeight.value]; // Значения меняются местами если max меньше min.
+    }
+    return ((item.weight >= parseInt(minWeight.value)) && (item.weight <= parseInt(maxWeight.value)));
   });
+  fruits = result;
 };
 
 filterButton.addEventListener('click', () => {
@@ -88,24 +128,65 @@ let sortKind = 'bubbleSort'; // инициализация состояния в
 let sortTime = '-'; // инициализация состояния времени сортировки
 
 const comparationColor = (a, b) => {
-  // TODO: допишите функцию сравнения двух элементов по цвету
+  // функция сравнения двух элементов по цвету
+  const priority = ['желтый', 'зеленый', 'розово-красный', 'светло-коричневый', 'фиолетовый']
+  const priority1 = priority.indexOf(a.color);
+  const priority2 = priority.indexOf(b.color);
+  return priority1 > priority2;
 };
 
+
 const sortAPI = {
-  bubbleSort(arr, comparation) {
-    // TODO: допишите функцию сортировки пузырьком
+  bubbleSort(arr, comparationColor) {
+    // функция сортировки пузырьком
+    const n = arr.length;
+    // внешняя итерация по элементам
+    for (let i = 0; i < n - 1; i++) {
+      // внутренняя итерация для перестановки элемента в конец массива
+      for (let j = 0; j < n - 1 - i; j++) {
+        // сравниваем элементы
+        if (comparationColor(arr[j], arr[j + 1])) {
+          // делаем обмен элементов
+          let temp = arr[j + 1];
+          arr[j + 1] = arr[j];
+          arr[j] = temp;
+        }
+      }
+    }
+    return arr;
   },
 
-  quickSort(arr, comparation) {
-    // TODO: допишите функцию быстрой сортировки
+
+  // алгоритм быстрой сортировки
+  quickSort(arr, comparationColor) {
+    console.log(arr);
+    // Условие остановки, выхода из рекурсии, возвращем массив с 1 элементом
+    if (arr.length < 2) { return arr; }
+    // Выбираем опорный элемент
+    let pivot = arr[0];
+    // Определяем массивы для тех, что меньше и больше опорного
+    let left = [];
+    let right = [];
+    // Проходим циклом по всем элементам из массива и разносим их в массивы созданные ранее согласно условию, больше опорного - в правый, меньше - в левый  
+    for (let i = 1; i < arr.length; i++) {
+      if (comparationColor(pivot, arr[i])) {
+        left.push(arr[i]);
+      } else {
+        right.push(arr[i]);
+      }
+    }
+    arr = [...sortAPI.quickSort(left, comparationColor), pivot, ...sortAPI.quickSort(right, comparationColor)];
+    return arr;
   },
 
+
   // выполняет сортировку и производит замер времени
-  startSort(sort, arr, comparation) {
+  startSort(sort, fruits, comparationColor) {
     const start = new Date().getTime();
-    sort(arr, comparation);
+    const sorted = sort(fruits, comparationColor);
     const end = new Date().getTime();
     sortTime = `${end - start} ms`;
+    return sorted;
   },
 };
 
@@ -114,21 +195,40 @@ sortKindLabel.textContent = sortKind;
 sortTimeLabel.textContent = sortTime;
 
 sortChangeButton.addEventListener('click', () => {
-  // TODO: переключать значение sortKind между 'bubbleSort' / 'quickSort'
+  // переключатель значение sortKind между 'bubbleSort' / 'quickSort'
+  if (sortKind === 'bubbleSort') {
+    sortKind = 'quickSort';
+  } else sortKind = 'bubbleSort';
+  sortKindLabel.textContent = sortKind;
 });
 
 sortActionButton.addEventListener('click', () => {
-  // TODO: вывести в sortTimeLabel значение 'sorting...'
+  sortTimeLabel.textContent = 'sorting...';
   const sort = sortAPI[sortKind];
   sortAPI.startSort(sort, fruits, comparationColor);
+  fruits = sortAPI.quickSort(fruits, comparationColor);
   display();
-  // TODO: вывести в sortTimeLabel значение sortTime
+  sortTimeLabel.textContent = sortTime;
 });
 
 /*** ДОБАВИТЬ ФРУКТ ***/
 
 addActionButton.addEventListener('click', () => {
-  // TODO: создание и добавление нового фрукта в массив fruits
+  // создание и добавление нового фрукта в массив fruits
   // необходимые значения берем из kindInput, colorInput, weightInput
+  if (kindInput.value === "" || colorInput.value === "" || weightInput.value === "") {
+    alert('Заполните все поля!')
+  } else {
+    if ((weightInput.value < 0) || isNaN(weightInput.value)) {
+      alert('Введите корректное значение веса (целое положительное число)!')
+      weightInput.value = "";
+    } else {
+      fruits.push({ "kind": kindInput.value, "color": colorInput.value, "weight": weightInput.value });
+      display();
+      kindInput.value = "";
+      colorInput.value = "";
+      weightInput.value = "";
+    }
+  }
   display();
-});
+});