.box {
  animation: slide 2s ease-in-out infinite alternate;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

const div = document.createElement('div');
div.dataset.userId = '123';
div.dataset.userName = 'Alice';
console.log(div.getAttribute('data-user-id'));

const arr = [10, 20, 30];
const [first, ...middle, last] = arr;
console.log(first, last);

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