Feat/add load data via url (#3)

* Create branch in loading data via url

* Added methods renderUrl and complited this tiket!

Co-authored-by: MaxOvs <rock_maksimus@mail.ru>

src/cg-dropdown.js

@@ -12,6 +12,36 @@ export class DropDown {
     this.#initEvent();
   }
 
+  addItem(item) {
+    this.#items.push(item);
+    this.#render();
+  }
+
+  deleteItem(item) {
+    let index = this.#items.indexOf(item);
+
+    this.#items.splice(index, 1);
+
+    this.#render();
+  }
+
+  deleteItemAll() {
+    this.#items.splice(0, this.#items.length);
+    this.#render();
+  }
+
+  selectIndex(index) {
+    const options = this.#element.querySelectorAll('.list__item');
+
+    let select = options[index].innerText;
+
+    this.#render(select);
+  }
+
+  getElement(number) {
+    return this.#items[number];
+  }
+
   #init(options) {
     this.#options = options;
     const elem = document.querySelector(options.selector);
@@ -75,7 +105,7 @@ export class DropDown {
   }
 
   #render(select) {
-    const { items, styles } = this.#options;
+    const { items, styles, url } = this.#options;
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -85,7 +115,7 @@ export class DropDown {
     }
 
     this.#element.querySelector(this.#options.selector);
-    let ul = document.createElement('ul');
+    const ul = document.createElement('ul');
 
     if (styles) {
       const { list } = styles;
@@ -105,20 +135,60 @@ export class DropDown {
       this.#element.appendChild(ul);
     }
 
-    items.map((item) => {
+    if (!items) {
-      let li = document.createElement('li');
+      if (url) {
-
+        this.#renderUrl();
-      if (typeof item == 'object') {
-        const text = document.createTextNode(item.value);
-        li.classList.add('list__item');
-        li.appendChild(text);
-      } else {
-        const text = document.createTextNode(item);
-
-        li.classList.add('list__item');
-        li.appendChild(text);
       }
+    } else {
+      items.map((item) => {
+        let li = document.createElement('li');
 
+        if (typeof item == 'object') {
+          const text = document.createTextNode(item.title);
+
+          li.classList.add('list__item');
+          li.appendChild(text);
+        } else {
+          const text = document.createTextNode(item);
+
+          li.classList.add('list__item');
+          li.appendChild(text);
+        }
+
+        ul.appendChild(li);
+      });
+    }
+  }
+
+  async #renderUrl() {
+    const { url } = this.#options;
+
+    if (this.#items) {
+      return;
+    }
+
+    if (!url) {
+      return;
+    }
+
+    const response = await fetch(url);
+
+    const data = await response.json();
+
+    //ToDO: fix title(item.title!)
+    data.forEach((item, index) => {
+      const items = {
+        id: item.id,
+        title: item.name,
+        value: index,
+      };
+
+      const ul = this.#element.querySelector('.list');
+
+      const li = document.createElement('li');
+      const text = document.createTextNode(items.title);
+      li.classList.add('list__item');
+      li.appendChild(text);
       ul.appendChild(li);
     });
   }
@@ -226,36 +296,4 @@ export class DropDown {
     `;
     }
   }
-
-  addItem(item) {
-    this.#items.push(item);
-    this.#render();
-  }
-
-  deleteItem(item) {
-    let index = this.#items.indexOf(item);
-
-    this.#items.splice(index, 1);
-
-    this.#render();
-  }
-
-  deleteItemAll() {
-    this.#items.splice(0, this.#items.length);
-
-    console.log(this.#items);
-    this.#render();
-  }
-
-  selectIndex(index) {
-    const options = this.#element.querySelectorAll('.list__item');
-
-    let select = options[index].innerText;
-
-    this.#render(select);
-  }
-
-  getElement(number) {
-    return this.#items[number];
-  }
 }

src/index.js

@@ -35,39 +35,14 @@ const dropdown2 = new DropDown({
 });
 
 dropdown2.addItem('LADA');
-// dropdown.deleteItemAll();
-
-// dropdown2.deleteItem('MAN');
-// dropdown2.selectIndex(3);
 
+//ToDo: paste the desired url;
 const dropdown3 = new DropDown({
   selector: '.cg-dropdown3',
-  items: [
+  placeholder: 'URL',
-    {
+  url: 'http://jsonplaceholder.typicode.com/users',
-      id: '186',
-      value: 'A008',
-    },
-    {
-      id: '288',
-      value: 'BMW',
-    },
-    {
-      id: '355',
-      value: 'MAN',
-    },
-  ],
 });
 
-let a = dropdown3.getElement(0);
-console.log(a);
-
-let b = dropdown.getElement(0);
-console.log(b);
-
-// dropdown2.deleteItemAll();
-
-// dropdown2.deleteItem('MAN');
-
 // const dropdown3 = new DropDown({
 //   selector: '.cg-dropdown3',
 //   selected: '',

src/style/main.scss

@@ -93,3 +93,15 @@ body {
   display: block;
   opacity: 1;
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #d1d1d19d;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #4d4d4d;
+}