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)
- 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.