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

const timeoutId = setTimeout(() => console.log('Timeout'), 1000);
clearTimeout(timeoutId);
console.log('Done');

const weakMap = new WeakMap();
let obj = { name: 'Test' };
weakMap.set(obj, 'value');
obj = null;
console.log(weakMap.has(obj));

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}