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