Fixed naming variables

src/cg-dropdown.js

@@ -95,9 +95,6 @@ export class DropDown {
       this.#open();
     });
 
-    this.#list = this.#element.querySelector('.list');
-    this.#caret = this.#element.querySelector('.caret');
-
     this.#items = [];
 
     if (multiselect) {
@@ -152,7 +149,7 @@ export class DropDown {
   }
 
   #render(select) {
-    const { styles, multiselect, multiselectTag } = this.#options;
+    const { styles, multiselect } = this.#options;
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -161,38 +158,38 @@ export class DropDown {
       this.#initSelected();
     }
 
-    const ul = document.createElement('ul');
+    const ulList = document.createElement('ul');
 
     if (styles) {
       const { list } = styles;
 
-      if (ul && list) {
+      if (ulList && list) {
         Object.entries(list).forEach(([key, value]) => {
-          ul.style[key] = value;
+          ulList.style[key] = value;
         });
       }
     }
 
-    ul.classList.add('list');
+    ulList.classList.add('list');
-    this.#element.appendChild(ul);
+    this.#element.appendChild(ulList);
 
     this.#items.forEach((dataItem) => {
-      const li = document.createElement('li');
+      const liItem = document.createElement('li');
 
-      li.classList.add('list__item');
+      liItem.classList.add('list__item');
 
       if (multiselect) {
         const checkBox = document.createElement('input');
         checkBox.type = 'checkbox';
         checkBox.setAttribute('id', `chbox-${dataItem.id}`);
 
-        li.appendChild(checkBox);
+        liItem.appendChild(checkBox);
       }
 
       let textNode = document.createTextNode(dataItem.title);
 
-      li.appendChild(textNode);
+      liItem.appendChild(textNode);
-      ul.appendChild(li);
+      ulList.appendChild(liItem);
     });
 
     this.#addOptionsBehaviour();
@@ -211,29 +208,29 @@ export class DropDown {
 
     const response = await fetch(url);
 
-    const data = await response.json();
+    const dataUrl = await response.json();
 
-    data.forEach((dataItem, index) => {
+    dataUrl.forEach((dataItem, index) => {
       const item = {
         id: dataItem.phone,
         title: dataItem.name,
         value: index,
       };
-      const ul = this.#element.querySelector('.list');
+      const ulUrl = this.#element.querySelector('.list');
-      const li = document.createElement('li');
+      const liUrl = document.createElement('li');
-      const text = document.createTextNode(item.title);
+      const textUrl = document.createTextNode(item.title);
 
       if (multiselect) {
         const checkBox = document.createElement('input');
         checkBox.type = 'checkbox';
 
         checkBox.setAttribute('id', `chbox-${item.id}`);
-        li.appendChild(checkBox);
+        liUrl.appendChild(checkBox);
       }
 
-      li.classList.add('list__item');
+      liUrl.classList.add('list__item');
-      li.appendChild(text);
+      liUrl.appendChild(textUrl);
-      ul.appendChild(li);
+      ulUrl.appendChild(liUrl);
 
       this.#items.push(item);
     });
@@ -287,25 +284,22 @@ export class DropDown {
             if (checkIndex === -1) {
               this.#indexes.push(index);
 
-              this.#selectedItems.push(item.title);
-
               select.innerText = '';
 
               if (multiselectTag) {
+                this.#selectedItems.push(item);
                 select.appendChild(ul);
 
-                ul.appendChild(
+                const data = {
-                  createBreadcrumb(
+                  option: this.#options,
-                    this.#options,
+                  element: this.#element,
-                    this.#element,
+                  indexes: this.#indexes,
-                    this.#indexes,
+                  selectedItems: this.#selectedItems,
-                    this.#selectedItems,
+                };
-                    item.title,
+
-                    index,
+                ul.appendChild(createBreadcrumb(data, item.title, index, item.id));
-                    item.id,
-                  ),
-                );
               } else {
+                this.#selectedItems.push(item.title);
                 select.innerText = this.#selectedItems;
               }
             } else {

src/components/create-element.js

@@ -1,10 +1,11 @@
-export function createBreadcrumb(options, element, indexes, selectedItems, value, index, id) {
+export function createBreadcrumb(data, title, index, id) {
-  const { placeholder } = options;
+  const { element, option, indexes, selectedItems } = data;
+  const { placeholder } = option;
 
   const selected = element.querySelector('.selected');
 
   const li = document.createElement('li');
-  const text = document.createTextNode(value);
+  const text = document.createTextNode(title);
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
   const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');