Tabela aktywnych kont użytkowników

Treść zadania

W systemie mamy tablicę kont:
const konta = [ { login: "janek", aktywny: true }, { login: "stefan", aktywny: false }, { login: "olga", aktywny: true } ];
W dokumencie przygotowano tabelę <table><tbody id="tabelaKont"></tbody></table> oraz przycisk <button id="btnWyswietlAktywne">Pokaż aktywne</button>.
Po kliknięciu przycisku:
1. Wyczyść #tabelaKont.innerHTML = ''.
2. Przefiltruj konta, gdzie aktywny === true.
3. Dla każdego stwórz <tr><td>login</td></tr> i dodaj do #tabelaKont.

Co będzie oceniane

Wyczyszczenie #tabelaKont przed dodaniem.
Zastosowanie filter() z warunkiem k.aktywny === true.
Wstawienie 2 wierszy tr do tbody.
Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.

Testy automatyczne (1)

Wstawienie aktywnych użytkowników do tabeli — licznik #tabelaKont tr = 2; tekst #tabelaKont tr:first-child td = janek; tekst #tabelaKont tr:last-child td = olga

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

const konta = [
  { login: "janek", aktywny: true },
  { login: "stefan", aktywny: false },
  { login: "olga", aktywny: true }
];

// Wstaw wiersze aktywnych kont do #tabelaKont po kliknięciu #btnWyswietlAktywne

Wskazówki

Wskazówka 1

Przefiltruj tablicę logicznym warunkiem pola aktywny, a następnie utwórz odpowiednią strukturę znaczników tabeli.

Wskazówka 2

Zresetuj zawartość elementu tbody, wywołaj filter sprawdzając flagę aktywności i w pętli twórz elementy tr oraz td z nazwą konta, dołączając je do tabeli.