//ORIENTED OPERATING PROGRAMMING

class Typing {
  constructor({el, interval, delay}){
    this.el = document.querySelector(el);
    this.interval = interval || 500 
    this.delay = delay == undefined ? 1000 : delay
    this.text = this.el.innerHTML.trim()
    this.el.innerHTML = ""
    setTimeout(() => this.write(i), this.delay);  
  }
  write(i = 0){
    this.el.innerHTML += this.text[i] 
    i++;
    if (i < this.text.length) {
      setTimeout(() => this.write(i), this.interval);      
    }

  }
}
new Typing({
    el: ".header__content h1" ,
    interval: 300,
    delay:1000
});

class WindowSize {
  constructor() {
    this.width = document.documentElement.clientWidth;
    this.height = document.documentElement.clientHeight;
  }
  
  updateSize() {
    this.width = document.documentElement.clientWidth;
    this.height = document.documentElement.clientHeight;
    console.log(`Yangi o'lchamlar: ${this.width}x${this.height}`);
  }
}

// Foydalanish
const windowSize = new WindowSize();
console.log(windowSize.width, windowSize.height);

// Oynani o'lchami o'zgarganda yangilash
window.addEventListener('resize', () => windowSize.updateSize());

class WindowDimensions {
  static getFullSize() {
    return {
      width: window.innerWidth,
      height: window.innerHeight
    };
  }
  
  static getViewportSize() {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };
  }
  
  static getScreenSize() {
    return {
      width: screen.width,
      height: screen.height
    };
  }
}

// Foydalanish
console.log(WindowDimensions.getFullSize());
console.log(WindowDimensions.getViewportSize());
console.log(WindowDimensions.getScreenSize());

class MouseTracker {
  constructor(element) {
    this.element = element || document;
    this.x = 0;
    this.y = 0;
    
    this.initEvents();
  }
  
  initEvents() {
    this.element.addEventListener('mousemove', (e) => this.handleMove(e));
    this.element.addEventListener('mouseover', (e) => this.handleOver(e));
    this.element.addEventListener('mouseout', (e) => this.handleOut(e));
  }
  
  handleMove(e) {
    this.x = e.clientX;
    this.y = e.clientY;
    console.log(`Mouse harakat: X=${this.x}, Y=${this.y}`);
  }
  
  handleOver(e) {
    console.log(`Mouse element ustida`, e.target);
  }
  
  handleOut(e) {
    console.log(`Mouse elementdan chiqdi`, e.target);
  }
}

// Foydalanish
const tracker = new MouseTracker();

// Maxsus element uchun
const myElement = document.getElementById('myElement');
const elementTracker = new MouseTracker(myElement);

class InteractiveWindow {
  constructor() {
    this.size = {
      width: 0,
      height: 0
    };
    this.mouse = {
      x: 0,
      y: 0,
      isOver: false
    };
    
    this.init();
  }
  
  init() {
    this.updateSize();
    window.addEventListener('resize', () => this.updateSize());
    
    document.addEventListener('mousemove', (e) => this.trackMouse(e));
    document.addEventListener('mouseover', () => this.mouse.isOver = true);
    document.addEventListener('mouseout', () => this.mouse.isOver = false);
  }
  
  updateSize() {
    this.size.width = window.innerWidth;
    this.size.height = window.innerHeight;
    console.log('Window size updated:', this.size);
  }
  
  trackMouse(e) {
    this.mouse.x = e.clientX;
    this.mouse.y = e.clientY;
    console.log('Mouse position:', this.mouse);
  }
  
  getRelativeMousePosition() {
    return {
      x: this.mouse.x / this.size.width,
      y: this.mouse.y / this.size.height
    };
  }
}

// Foydalanish
const interactiveWindow = new InteractiveWindow();

// Har 1 sekundda nisbiy pozitsiyani ko'rsatish
setInterval(() => {
  const relPos = interactiveWindow.getRelativeMousePosition();
  console.log('Nisbiy pozitsiya:', relPos);
}, 1000);

Page (Sahifa) o'lchamlari - Butun HTML dokumentining o'lchami (scroll qilinadigan qismi bilan)

Window (Oyna) o'lchamlari - Foydalanuvchi ko'radigan brauzer oynasining hozirgi o'lchami

// 1. window.innerWidth / window.innerHeight
// Brauzer oynasining ichki o'lchami (scroll barlarini hisobga olmaydi)
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

// 2. document.documentElement.clientWidth / clientHeight
// Viewport o'lchami (scroll barlarini hisobga oladi)
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;

// Butun sahifaning o'lchami (scroll qilinadigan qismi bilan)
const pageWidth = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;

color a

curl ascii.live/forrest

const body = document.querySelector('body'),
    eye = document.querySelectorAll('.eye');
body.addEventListener('mousemove', (e) => { //добавляем прослушиватель событий к элементу body, прослушивающий движение мыши.
    eye.forEach(el => { //Внутри функции прослушивателя событий мы перебираем каждый элемент глаза, используя  eye.forEach(el => {})
        const speed = el.getAttribute('speed')
            //Переменная "speed" содержит значение атрибута "speed" каждого элемента "eye". 
        const x = (window.innerWidth - e.pageX * speed) / 35
        const y = (window.innerHeight - e.pageY * speed) / 20
        el.style.transform = `translate(${-x}px,${-y}px)`
            //Затем мы изменяем стиль каждого элемента "eye", применяя к нему трансформацию.

    })
})

//смайл который будеть следить глазами за курсорам мыши

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'
    }
  })
})