// Basic event listener
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Event type:', event.type);

// Array destructuring
const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers;
console.log(first, second); // 1 2

// Skip elements

// Sample data
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const users = [
  { id: 1, name: 'Alice', age: 25, active: true },
  { id: 2, name: 'Bob', age: 30, active: false },
  { id: 3, name: 'Charlie', age: 35, active: true },

// Creating a Promise
const myPromise = new Promise((resolve, reject) => {
  const success = true;

  setTimeout(() => {
    if (success) {

// Basic closure example
function outer() {
  const message = 'Hello from outer';

  function inner() {
    console.log(message); // Accesses outer variable

/* BEM - Block Element Modifier */

/* BLOCK - Independent component */
.card {
  padding: 1rem;
  border: 1px solid #ddd;

/* Container Queries */
.card-container {
  container-type: inline-size; /* Creates query container */
  container-name: card;
}

/* Interactive pseudo-classes */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:active { color: red; }
a:focus { outline: 2px solid orange; }

/* Basic transitions */
.button {
  background-color: blue;
  color: white;
  padding: 1rem 2rem;
  transition: background-color 0.3s ease;

// Theme switching with CSS variables
const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement;

// Load saved theme
const savedTheme = localStorage.getItem('theme') || 'light';

/* Mobile-first base styles (no media query needed) */
.container {
  width: 100%;
  padding: 1rem;
  margin: 0 auto;
}

/* Specificity: 0,0,0,1 - Element selector */
p {
  color: black;
}

/* Specificity: 0,0,1,0 - Class selector */