Decor in categories, and testing methods

src/cg-dropdown.js

@@ -50,12 +50,14 @@ export class DropDown {
 
   selectIndex(index) {
     const options = this.#element.querySelectorAll('.list__item');
+    // const selected = this.#element.querySelector('.selected');
 
     if (index > options.length) {
       return;
     }
 
     const select = options[index].innerText;
+    // selected.innerText = select;
 
     this.#render(select);
   }
@@ -164,7 +166,6 @@ export class DropDown {
     } else {
       this.#initSelected();
     }
-
     const ulList = document.createElement('ul');
 
     if (styles) {
@@ -178,6 +179,7 @@ export class DropDown {
     }
 
     ulList.classList.add('list');
+
     this.#element.appendChild(ulList);
 
     this.#items.forEach((dataItem) => {
@@ -185,6 +187,7 @@ export class DropDown {
       const strongItem = document.createElement('strong');
 
       liItem.classList.add('list__item');
+      strongItem.classList.add('category');
 
       if (multiselect) {
         const checkBox = document.createElement('input');

src/index.js

@@ -101,10 +101,10 @@ const dropdown4 = new DropDown({
   multiselect: true,
   multiselectTag: true,
 });
-// dropdown4.selectIndex(5);
 
 // dropdown4.addItem('Харьков');
-// dropdown4.disabled(true);
+// dropdown4.deleteItemAll();
+// dropdown4.selectIndex(5);
 
 // const buttonOpen = document.querySelector('.button__open');
 // const buttonClose = document.querySelector('.button__close');

src/style/main.scss

@@ -146,6 +146,16 @@ body {
   }
 }
 
+.category {
+  height: 20px;
+  margin: 6px 5px 0 7px;
+  font-size: 17px;
+  border-bottom: 1px solid;
+
+  display: flex;
+  align-items: center;
+}
+
 input[type='checkbox'] {
   cursor: pointer;
   margin: 0 5px 0 0;
@@ -164,6 +174,7 @@ input[type='checkbox'] {
     background-color: #ffffff;
   }
 }
+
 .svg-icon path {
   color: black;
   stroke: currentcolor;
@@ -179,6 +190,10 @@ input[type='checkbox'] {
   transition: 0.5s;
   display: block;
   opacity: 1;
+
+  &_none {
+    opacity: 0 !important;
+  }
 }
 
 ::-webkit-scrollbar {