class Slider {
  constructor({ slider, sliderline, prev, next, direction }) {
    this.slider = document.querySelector(slider);
    this.sliderLine = document.querySelector(sliderline);
    this.prev = document.querySelector(prev);
    this.next = document.querySelector(next);
    this.dir =
    this.dir = direction && direction.toUpperCase() === "Y" ? "Y" : "X";

    this.slides = [...this.sliderLine.children];
    this.sliderLine.style = `height:${this.heigth()}px; overflow: hidden`;
    this.active = 0;
    this.moveSize =
      this.dir == "X" ? this.sliderLine.clientWidth : this.heigth();

    this.slides.forEach((slide, i) => {
      if (this.active != i) {
        slide.style.transform = `translate${this.dir}(${this.moveSize}px)`;
      }
      if (i == this.slides.length - 1) {
        slide.style.transform = `translate${this.dir}(${-this.moveSize}px)`;
      }
    });
    this.next.addEventListener("click", () => this.move(this.next));
    this.prev.addEventListener("click", () => this.move(this.prev));
    
  }
  move(btn) {   
      const moveSlide = btn == this.next ? -this.moveSize : this.moveSize
      this.slides.forEach((slide,i) => {
          if(this.active != i){
              slide.style.transform = `translate${this.dir}(${-moveSlide}px)`
              slide.style.transition = '0s'
          }
      })
      this.slides[this.active].style.transform = `translate${this.dir}(${moveSlide}px)`;
      this.slides[this.active].style.transition = `1s`;
      this.changeActive(btn)
      this.slides[this.active].style.transform = `translate(0px)`;
      this.slides[this.active].style.transition = `1s`;
      
      
  }
  changeActive(btn){
    if (btn == this.prev) {
      this.active--
      if (this.active < 0) {
        this.active = this.slides.length -1
      }
    }else if(btn == this.next){
   this.active++
   if (this.active > this.slides.length -1) {
    this.active = 0
   }
    }
  }
  heigth() {
    const size = this.slides.map((slide) => slide.clientHeight);
    return Math.max(...size);
  }
}
new Slider({
  slider: ".slider",
  sliderline: ".slider__line",
  prev: ".slider__prev",
  next: ".slider__next",
  direction: "X",
});

function getter() {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(item => item.json())
    .then(item => console.log(item))
    .catch(error => console.log(error))
}
getter()

const statusFriend = 'succes'

const request = new Promise((resolve, reject) => {
    if (resolve === 'succes') {
        resolve()
    }else{
        reject()
    }
})

const sum = document.querySelector('#sum'),
  usd = document.querySelector('#usd')

sum.addEventListener('input', () => {
  const request = new XMLHttpRequest()

  request.open('GET', './js/current.json')
  request.setRequestHeader('Content-Type', 'application/json')
  request.send()

  request.addEventListener('load', () => {
    if (request.status === 200) {
      const data = JSON.parse(request.response)
      usd.value = (+sum.value / data.current.usd).toFixed(2)
    } else {
      usd.value = 'Something went wrong'
    }
  })
})

const box = document.querySelector(".box");

async function fetchUser() {
  try {
    let res = await fetch("https://jsonplaceholder.typicode.com/users");
    let resolve = await res.json();
    resolve.forEach((info) => {
    //   console.log(info);
      const card = document.createElement("div");
      card.classList.add("card");
    let h2 = document.createElement('h2')
    let tel = document.createElement('a')
    let city = document.createElement('p')
    h2.innerHTML = `name: ${info.name}`
      tel.innerHTML = `tel: ${info.phone}`
    tel.setAttribute('href', `tel:  ${info.phone}`)  
    city.innerHTML = `city: ${info.address.city}` 
     card.append(h2)
     card.append(tel)
     card.append(city)
       box.append(card)     
    });
  } catch (error) {
    console.error(error);
  }
}
fetchUser();

fetch('https://dummyjson.com/products')
.then(res => res.json())
.then(console.log);

Rasmni img.src orqali o‘rnatamiz.

img.src = product.thumbnail;

const title = document.createElement("h2");
title.textContent = product.title;

const price = document.createElement("p");
price.textContent = `Price: $${product.price}`;

const desc = document.createElement("p");
desc.textContent = product.description;

const box = document.querySelector(".box");

2. <div class="box"></div>