<h1>Einkaufszettel</h1>
  <ul id="todoList">
    <!-- Hier werden die Artikel angezeigt -->
  </ul>
  
  <input type="text" id="newItemInput" placeholder="Artikelname">
  <button onclick="addItem()">Artikel hinzufügen</button>
  <h2>Erledigte Artikel</h2>
  <ul id="completedList">
    <!-- Hier werden die erledigten Artikel angezeigt -->
  </ul>
  <script>
    // Artikel-Array für die Speicherung der Einträge
    var items = [];
    // Funktion zum Hinzufügen eines Artikels
    function addItem() {
      var newItemInput = document.getElementById('newItemInput');
      var itemName = newItemInput.value.trim();
      if (itemName !== '') {
        items.push({ name: itemName, completed: false });
        newItemInput.value = '';
        renderItems();
        saveItems();
      }
    }
    // Funktion zum Anzeigen der Artikel in den Listen
    function renderItems() {
      var todoList = document.getElementById('todoList');
      var completedList = document.getElementById('completedList');
      // Vor dem Rendern die Listen leeren
      todoList.innerHTML = '';
      completedList.innerHTML = '';
      items.forEach(function(item) {
        var li = document.createElement('li');
        li.textContent = item.name;
        if (item.completed) {
          // Artikel als erledigt markiert
          var undoButton = document.createElement('button');
          undoButton.textContent = 'Wiederherstellen';
          undoButton.addEventListener('click', function() {
            item.completed = false;
            renderItems();
            saveItems();
          });
          li.appendChild(undoButton);
          var deleteButton = document.createElement('button');
          deleteButton.textContent = 'Löschen';
          deleteButton.addEventListener('click', function() {
            var index = items.indexOf(item);
            if (index !== -1) {
              items.splice(index, 1);
              renderItems();
              saveItems();
            }
          });
          li.appendChild(deleteButton);
          completedList.appendChild(li);
        } else {
          // Artikel noch nicht erledigt
          var checkButton = document.createElement('button');
          checkButton.textContent = 'Erledigt';
          checkButton.addEventListener('click', function() {
            item.completed = true;
            renderItems();
            saveItems();
          });
          li.appendChild(checkButton);
          var editButton = document.createElement('button');
          editButton.textContent = 'Bearbeiten';
          editButton.addEventListener('click', function() {
            var newName = prompt('Artikelnamen bearbeiten', item.name);
            if (newName !== null) {
              item.name = newName.trim();
              renderItems();
              saveItems();
            }
          });
          li.appendChild(editButton);
          var deleteButton = document.createElement('button');
          deleteButton.textContent = 'Löschen';
          deleteButton.addEventListener('click', function() {
            var index = items.indexOf(item);
            if (index !== -1) {
              items.splice(index, 1);
              renderItems();
              saveItems();
            }
          });
          li.appendChild(deleteButton);
          todoList.appendChild(li);
        }
      });
    }
    // Funktion zum Speichern der Artikel im lokalen Speicher
    function saveItems() {
      localStorage.setItem('items', JSON.stringify(items));
    }
    // Funktion zum Laden der Artikel aus dem lokalen Speicher
    function loadItems() {
      var storedItems = localStorage.getItem('items');
      if (storedItems !== null) {
        items = JSON.parse(storedItems);
        renderItems();
      }
    }
    // Seite laden und Artikel aus dem Speicher anzeigen
    loadItems();
  </script>