// HTML structure
<div class="gallery-filters">
  <button class="filter-btn active" data-filter="all">All</button>
  <button class="filter-btn" data-filter="nature">Nature</button>
  <button class="filter-btn" data-filter="architecture">Architecture</button>
  <button class="filter-btn" data-filter="people">People</button>
</div>

<div class="gallery">
  <div class="gallery-item" data-category="nature">
    <img src="nature1.jpg" alt="Forest">
    <h3>Forest</h3>
  </div>
  <div class="gallery-item" data-category="architecture">
    <img src="building1.jpg" alt="Modern Building">
    <h3>Modern Building</h3>
  </div>
  <!-- More gallery items... -->
</div>

// JavaScript
document.addEventListener('DOMContentLoaded', function() {
  const filterButtons = document.querySelectorAll('.filter-btn');
  const galleryItems = document.querySelectorAll('.gallery-item');
  
  // Add click event to filter buttons
  filterButtons.forEach(button => {
    button.addEventListener('click', function() {
      // Remove active class from all buttons
      filterButtons.forEach(btn => btn.classList.remove('active'));
      
      // Add active class to clicked button
      this.classList.add('active');
      
      // Get filter value
      const filterValue = this.getAttribute('data-filter');
      
      // Filter gallery items
      galleryItems.forEach(item => {
        if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    });
  });
});

// HTML
<form id="dynamic-form">
  <div id="fields-container">
    <div class="form-field">
      <input type="text" name="item[]" placeholder="Enter item">
      <button type="button" class="remove-field" disabled>Remove</button>
    </div>
  </div>
  <button type="button" id="add-field-btn">Add Another Item</button>
  <button type="submit">Submit</button>
</form>

// JavaScript
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('dynamic-form');
  const fieldsContainer = document.getElementById('fields-container');
  const addButton = document.getElementById('add-field-btn');
  
  // Add new field when button is clicked
  addButton.addEventListener('click', function() {
    // Create new field
    const newField = document.createElement('div');
    newField.className = 'form-field';
    
    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.name = 'item[]';
    newInput.placeholder = 'Enter item';
    
    const removeButton = document.createElement('button');
    removeButton.type = 'button';
    removeButton.className = 'remove-field';
    removeButton.textContent = 'Remove';
    
    // Add event listener to remove button
    removeButton.addEventListener('click', function() {
      fieldsContainer.removeChild(newField);
      updateRemoveButtons();
    });
    
    // Assemble and append the new field
    newField.appendChild(newInput);
    newField.appendChild(removeButton);
    fieldsContainer.appendChild(newField);
    
    // Update remove buttons
    updateRemoveButtons();
  });
  
  // Function to update remove buttons state
  function updateRemoveButtons() {
    const fields = fieldsContainer.querySelectorAll('.form-field');
    const removeButtons = fieldsContainer.querySelectorAll('.remove-field');
    
    // Disable remove buttons if only one field
    if (fields.length === 1) {
      removeButtons[0].disabled = true;
    } else {
      // Enable all remove buttons
      removeButtons.forEach(button => {
        button.disabled = false;
      });
    }
  }
  
  // Form submission
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    
    // Get all input values
    const inputs = form.querySelectorAll('input[name="item[]"]');
    const values = Array.from(inputs).map(input => input.value);
    
    console.log('Submitted values:', values);
    // Submit to server would go here
  });
});

// HTML
<div class="table-controls">
  <input type="text" id="table-search" placeholder="Search...">
</div>

<table id="data-table">
  <thead>
    <tr>
      <th data-sort="name">Name</th>
      <th data-sort="age">Age</th>
      <th data-sort="city">City</th>
    </tr>
  </thead>
  <tbody>
    <!-- Data rows will be inserted here -->
  </tbody>
</table>

// JavaScript
document.addEventListener('DOMContentLoaded', function() {
  // Sample data
  const people = [
    { id: 1, name: 'John Smith', age: 32, city: 'New York' },
    { id: 2, name: 'Jane Doe', age: 28, city: 'Los Angeles' },
    { id: 3, name: 'Bob Johnson', age: 45, city: 'Chicago' },
    { id: 4, name: 'Alice Williams', age: 24, city: 'Miami' }
    // More data...
  ];
  
  const table = document.getElementById('data-table');
  const tableBody = table.querySelector('tbody');
  const searchInput = document.getElementById('table-search');
  const sortHeaders = table.querySelectorAll('th[data-sort]');
  
  // Variables to track sort state
  let sortColumn = 'name';
  let sortDirection = 'asc';
  
  // Initial render
  renderTable(people);
  
  // Add search functionality
  searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const filteredData = people.filter(person => {
      return (
        person.name.toLowerCase().includes(searchTerm) ||
        person.city.toLowerCase().includes(searchTerm) ||
        person.age.toString().includes(searchTerm)
      );
    });
    renderTable(filteredData);
  });
  
  // Add sorting functionality
  sortHeaders.forEach(header => {
    header.addEventListener('click', function() {
      const column = this.getAttribute('data-sort');
      
      // Update sort direction
      if (sortColumn === column) {
        sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        sortColumn = column;
        sortDirection = 'asc';
      }
      
      // Update UI to show sort direction
      sortHeaders.forEach(h => h.classList.remove('sort-asc', 'sort-desc'));
      this.classList.add(`sort-${sortDirection}`);
      
      // Sort and render data
      const sortedData = [...people].sort((a, b) => {
        if (sortDirection === 'asc') {
          return a[column] > b[column] ? 1 : -1;
        } else {
          return a[column] < b[column] ? 1 : -1;
        }
      });
      
      renderTable(sortedData);
    });
  });
  
  // Function to render table
  function renderTable(data) {
    // Clear existing rows
    tableBody.innerHTML = '';
    
    // Create document fragment for better performance
    const fragment = document.createDocumentFragment();
    
    // Add data rows
    data.forEach(person => {
      const row = document.createElement('tr');
      
      const nameCell = document.createElement('td');
      nameCell.textContent = person.name;
      
      const ageCell = document.createElement('td');
      ageCell.textContent = person.age;
      
      const cityCell = document.createElement('td');
      cityCell.textContent = person.city;
      
      row.appendChild(nameCell);
      row.appendChild(ageCell);
      row.appendChild(cityCell);
      
      fragment.appendChild(row);
    });
    
    // Add to table in one operation
    tableBody.appendChild(fragment);
  }
});