const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits);

const person = {
name: "Alice",
age: 15,
city:"New York"
};
console.log(person);

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

const person = {};

// Add Properties
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

objectName.propertyName
objectName["propertyName"]

const person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
  };
  
  delete person.age;
  console.log(person);

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// `fullName` metodini chaqirish va uning natijasini konsolga chiqarish
console.log(person.fullName());

person.name = function () {
  return this.firstName + " " + this.lastName;
};

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  name: function () {
    return this.firstName + " " + this.lastName;
  }
};

// `name` metodini chaqirish va natijasini konsolga chiqarish
console.log(person.name());

//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);