.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

const input = document.querySelector('input');
input.value = 'Hello';
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);

const code = '42';
const padded1 = code.padStart(5, '0');
const padded2 = code.padEnd(5, '0');
console.log(padded1, padded2);

:root {
  --primary: blue;
}
.button {
  background: var(--secondary, var(--primary));
}

const element = document.querySelector('.box');
element.classList.add('active', 'highlight');
const hasActive = element.classList.toggle('active');
console.log(hasActive, element.classList.contains('highlight'));

const arr = [5, 10, 15, 20, 25];
const chunk = arr.splice(2, 2, 100, 200);
console.log(arr.length, chunk.length);

.element {
  width: 200px;
  height: 200px;
  background: conic-gradient(red, yellow, green, blue, red);
}

const obj = { a: 1, b: 2 };
const proxy = new Proxy(obj, {
  get(target, prop) {
    return target[prop] * 2;
  }
});
console.log(proxy.a, obj.a);

const str = 'Hello World';
const replaced = str.replace(/o/g, '0');
console.log(replaced);

.parent {
  display: flex;
}
.child {
  flex: 1 0 auto;
}