Lissette Lorenz

How does this even work???

Teaching

<div id=”category-list-container”>
  <p>Loading categories…</p>
</div>

<style>
  #category-list-container ul {
    list-style: none;
    padding: 0;
  }
  #category-list-container li {
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
  }
  #category-list-container a {
    text-decoration: none;
    font-weight: 600;
  }
  #category-list-container .cat-count {
    color: #777;
    font-weight: normal;
  }
</style>

<script>
  fetch(‘/wp-json/wp/v2/categories?per_page=100&orderby=name&order=asc&hide_empty=true’)
    .then(response => response.json())
    .then(categories => {
      const container = document.getElementById(‘category-list-container’);

      if (!categories.length) {
        container.innerHTML = ‘<p>No categories found.</p>’;
        return;
      }

      let html = ‘<ul>’;
      categories.forEach(cat => {
        html += `<li>