Ćwiczenie · Informatyka Ćwiczenie: Filtrowanie pozycji według maksymalnej ceny

Filtrowanie pozycji według maksymalnej ceny

Treść zadania

W cenniku mamy tablicę usług:
const uslugi = [
  { nazwa: "Wymiana opon", cena: 120 },
  { nazwa: "Mycie auta", cena: 40 },
  { nazwa: "Polerowanie", cena: 250 }
];

W dokumencie znajduje się pole <input type="number" id="maxCena" value="150">, przycisk <button id="btnFiltrujCene">Filtruj usługi</button> oraz lista <ul id="listaUslug"></ul>.
Po kliknięciu przycisku:
1. Wyczyść listę #listaUslug.innerHTML = ''.
2. Pobierz liczbę z pola parseInt().
3. Za pomocą filter() wybierz usługi o cena <= limit.
4. Dołącz każdą wybraną usługę jako <li>Nazwa - X zł</li> do listy.

Co będzie oceniane

  • Wyczyszczenie listy przed prezentacją.
  • Zastosowanie filter() z warunkiem cena <= limit.
  • Wygenerowanie 2 pozycji w liście dla limitu 150 zł.
  • Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.

Testy automatyczne (1)

  1. Filtrowanie usług do 150 zł — licznik #listaUslug li = 2; tekst #listaUslug li:first-child = Wymiana opon - 120 zł

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

const uslugi = [
  { nazwa: "Wymiana opon", cena: 120 },
  { nazwa: "Mycie auta", cena: 40 },
  { nazwa: "Polerowanie", cena: 250 }
];

// Filtruj usługi po cenie i generuj li w #listaUslug po kliknięciu #btnFiltrujCene

Wskazówki

Wskazówka 1

Połącz metodę filtrowania z późniejszą iteracją po uzyskanej podtablicy, tworząc elementy w drzewie DOM.

Wskazówka 2

Wyczyść kontener listy, pobierz limit cenowy, przefiltruj tablicę usług z warunkiem mniejsze bądź równe i dla każdego pasującego rekordu wygeneruj węzeł li w liście.