app.js with evaluateEmptyState

app.js

import { htmlToElement } from './utils';

export default class App {
  //...

  addNewItem(itemName) {
    //...

    const item = htmlToElement(`
    <li class="flex py-4 border-b border-gray-900 item"> <!-- add class 'item' -->
      //...
    </li>
    `);

    item.getElementsByClassName('delete-button')[0].addEventListener('click', () => this.deleteItem(item));

    this.listRoot.appendChild(item);
    this.evaluateEmptyState()
    this.input.value = '';
  }

  deleteItem(item) {
    item.remove();
    this.evaluateEmptyState();
  }

  evaluateEmptyState() {
    if (this.listRoot.getElementsByClassName('item').length === 0) {
      this.listRoot.appendChild(this.emptyState);
      return;
    }

    const emptyState = document.getElementById('empty-state');

    if (emptyState) {
      emptyState.remove();
    }
  }
}