todos

  <div class="todo-input-section">
    <button id="toggle-all" class="toggle-all-btn">⌄</button>
    <input type="text" id="new-todo" placeholder="What needs to be done?" class="todo-input">
    <button id="add-todo" class="add-btn">Add</button>
  </div>

  <div class="todo-filters">
    <button id="filter-all" class="filter-btn active">All</button>
    <button id="filter-active" class="filter-btn">Active</button>
    <button id="filter-completed" class="filter-btn">Completed</button>
  </div>

  <ul id="todo-list" class="todo-list"></ul>

  <div class="todo-footer">
    <span id="items-left">0 items left</span>
    <button id="clear-completed" class="clear-btn" style="display: none;">Clear completed</button>
  </div>

  <div class="todo-stats">
    <span id="stats-text">0 Todos | 0 Renders | 0.00 ms</span>
  </div>
</div>