prosze pomóż w 3 i 4

// ### Punkt 2
// Przygotuj do pracy plik **app.js**. Dopisz event ```DomContentLoaded``` i sprawdź, czy działa (np. przez wyświetlenie w konsoli napisu "Działa").
// Następnie znajdź następujące elementy i zapisz je do zmiennych:
//
// 1. Guzik ```next```.
var next = document.getElementById('nextPicture');
console.log(next);
// 2. Guzik ```prev```.
var prev = document.getElementById('prevPicture');
console.log(prev);
// 3. Wszystkie elementy listy (zapisz do tablicy).
var list = document.querySelectorAll('ul li');
console.log(list);
//
// Dodaj też zmienną liczbową, która będzie określała indeks obrazka, który jest aktualnie widoczny (na początku będzie to pierwszy obrazek – czyli zmienna będzie wskazywała na indeks **0**).

// Wypisz zmienne w konsoli, żeby upewnić się, czy zawierają poprawne dane.
//
// ### Punkt 3
// Po dodaniu klasy ```slider``` zniknęły nam wszystkie obrazki. Dodaj do zerowego elementu naszej listy klasę ```visible```. Użyj odpowiednich zmiennych:
// * tablicy z elementami listy,
// * zmiennej, która określa widoczny element.
// Po wejściu na stronę pierwszy obrazek powinien być widoczny.
//

// ### Punkt 4
// Dodaj do guzików eventy reagujące na kliknięcie. Na początku mają tylko wypisywać w konsoli informacje o kliknięciu.