Filtrowanie zleceń według statusu płatności

Treść zadania

W systemie mamy tablicę zleceń:
const zlecenia = [ { nr: 1, status: "oplacone" }, { nr: 2, status: "oczekuje" }, { nr: 3, status: "oplacone" } ];
W dokumencie umieszczono listę <select id="filtrStatus"><option value="oplacone">Opłacone</option><option value="oczekuje">Oczekujące</option></select>, przycisk <button id="btnFiltrujZlecenia">Filtruj</button> oraz listę <ul id="listaZlecen"></ul>.
Po kliknięciu przycisku:
1. Wyczyść #listaZlecen.innerHTML = ''.
2. Za pomocą filter() wybierz zlecenia o wybranym statusie.
3. Dla każdego stwórz <li>Zlecenie #nr (status)</li> i dodaj do listy.

Co będzie oceniane

Wyczyszczenie listy przed generowaniem.
Użycie metody filter() z kryterium wybranego statusu.
Dodanie 2 elementów li dla statusu 'oplacone'.
Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.

Testy automatyczne (1)

Filtrowanie zleceń o statusie 'oplacone' — licznik #listaZlecen li = 2; tekst #listaZlecen li:first-child = Zlecenie #1 (oplacone)

Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.

const zlecenia = [
  { nr: 1, status: "oplacone" },
  { nr: 2, status: "oczekuje" },
  { nr: 3, status: "oplacone" }
];

// Filtruj zlecenia po statusie i dodawaj li do #listaZlecen po kliknięciu #btnFiltrujZlecenia

Wskazówki

Wskazówka 1

Połącz filtrowanie obiektów po wartości wybranej w kontrolce select z dynamicznym generowaniem elementów w drzewie DOM.

Wskazówka 2

Zresetuj zawartość listy, pobierz żądany status ze znacznika select, przefiltruj tablicę zleceń i wygeneruj nowe elementy li dla każdego pasującego wpisu.