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

DOM

document.body.style.background = 'red'; // make the background red

setTimeout(() => document.body.style.background = '', 3000); // return back

const element = document.getElementById('myElement');
console.log(element.clientWidth);  // Elementning ko'rinadigan kengligi
console.log(element.clientHeight); // Elementning ko'rinadigan balandligi

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  alert( 'The time is 12:30' );
}

window.pageXOffset is an alias of window.scrollX.
window.pageYOffset is an alias of window.scrollY.

click – when the mouse clicks on an element (touchscreen devices generate it on a tap).
contextmenu – when the mouse right-clicks on an element.
mouseover / mouseout – when the mouse cursor comes over / leaves an element.
mousedown / mouseup – when the mouse button is pressed / released over an element.
mousemove – when the mouse is moved.

keydown va keyup - klaviatura tugmasi bosilganda va qo'yib yuborilganda.

<input type="button" id="button" value="Button">
<script>
  button.onclick = function() {
    alert('Click!');
  };
</script>

<input id="elem" type="button" value="Click me"/>
<script>
  function handler1() {
    alert('Thanks!');
  };
  function handler2() {
    alert('Thanks again!');
  }
  elem.onclick = () => alert("Hello");
  elem.addEventListener("click", handler1); // Thanks!
  elem.addEventListener("click", handler2); // Thanks again!
</script>

button.addEventListener("click", () => alert("1"));

button.removeEventListener("click", () => alert("1"));

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"
};