@media (prefers-color-scheme: dark) {
  .card {
    background: #333;
    color: white;
  }
}

const arr = [1, 2, 3, 4];
const exists = arr.some(n => n > 5);
const allSmall = arr.every(n => n < 10);
console.log(exists || allSmall);

const prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 50);
console.log(total);

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