Ćwiczenie · Informatyka Ćwiczenie: Prezentacja listy tytułów metodą forEach

Prezentacja listy tytułów metodą forEach

Treść zadania

W skrypcie mamy tablicę książek:
const ksiazki = [
  { tytul: "Wiedźmin" },
  { tytul: "Solaris" },
  { tytul: "Lalka" }
];

W dokumencie znajduje się przycisk <button id="btnWyswietlKsiazki">Pokaż katalog</button> oraz lista <ul id="listaKsiazek"></ul>.
Po kliknięciu przycisku:
1. Wyczyść listę #listaKsiazek.innerHTML = ''.
2. Przejdź po tablicy za pomocą ksiazki.forEach(...), twórz element <li> z tytułem książki i dołączaj go do listy.

Co będzie oceniane

  • Wyczyszczenie listy przed generowaniem.
  • Użycie metody forEach do iteracji po obiektach.
  • Dodanie trzech elementów li z prawidłowymi tytułami.
  • Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.

Testy automatyczne (1)

  1. Wyświetlenie 3 pozycji z tablicy obiektów — licznik #listaKsiazek li = 3; tekst #listaKsiazek li:first-child = Wiedźmin; tekst #listaKsiazek li:last-child = Lalka

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

const ksiazki = [
  { tytul: "Wiedźmin" },
  { tytul: "Solaris" },
  { tytul: "Lalka" }
];

// Wygeneruj li w #listaKsiazek po kliknięciu #btnWyswietlKsiazki

Wskazówki

Wskazówka 1

Metoda forEach przyjmuje funkcję zwrotną, do której w każdym kroku przekazywany jest bieżący obiekt z tablicy.

Wskazówka 2

Wyczyść kontener listy, a w ciele funkcji przekazanej do forEach twórz za każdym razem element li, przypisuj do niego pole tytułu bieżącego obiektu i dołączaj do listy ul.