Karta ćwiczenia laboratoryjnego

HTML5 CSS3 JavaScript jQuery Download jQuery Documentation W3Schools Bootstrap 4 W3Schools jQuery

📋 Informacje podstawowe

Pole Wartość
Przedmiot FrontEnd
Forma zajęć laboratorium
Ćwiczenie Lab. 2 / jQuery: HTML + CSS + JS + jQuery
Data 28.03.2026
Nazwisko i imię studenta ......................................................
Rok/semestr Rok 3, semestr 6 [studia niestacjonarne]
Ocena ocena cząstkowa
Uwagi do ćwiczenia brak

📝 Opis zadania laboratoryjnego

Stwórz stronę w HTML+CSS (Bootstrap+jQuery), która tworzy tygodniowy kalendarz (poniedziałek – niedziela) po kliknięciu na dane pole
z dniem tygodnia jest możliwość dodania wydarzenia. Wydarzenie ma wyświetlany tylko tytuł, natomiast opis rozwija się po kliknięciu.
Można rozszerzyć funkcjonalność kalendarza. Należy zadbać o responsywność (oraz WCAG2.1). Na stronie umieść przycisk zmieniający
widok na widok ciemny.

📦 Wymagania

Kod programu należy umieścić w polu Kod programu tego pliku. Plik .md należy dodać do projektu.

Całość należy spakować do formatu .zip:

WSZIB_R3IN_NazwiskoImie_FrontEnd_Lab2.zip

W miejscu NazwiskoImie należy wpisać swoje nazwisko i imię (uwaga na kolejność). Wynik pracy w formie archiwum zip powinien zawierająć:

Archiwum WSZIB_R3IN_NazwiskoImie_FrontEnd_lab2.zip należy uzupełnić o swoje dane w nazwie i przesłać poprzez:

Upload

🎯 Ogólny opis zadania

Używając HTML, CSS i JS zjQury stwórz swoją Web Kalendarz.

✅ Wymagania funkcjonalne

Kod wymagania Wymaganie Poziom
WF-01 Strona powinna wyświetlać tygodniowy kalendarz obejmujący dni od poniedziałku do niedzieli. wysoki
WF-02 Użytkownik po kliknięciu wybranego dnia tygodnia powinien mieć możliwość dodania wydarzenia. wysoki
WF-03 Każde wydarzenie powinno zawierać co najmniej tytuł i opis. wysoki
WF-04 W widoku kalendarza powinien być widoczny tytuł wydarzenia, a opis powinien rozwijać się po kliknięciu. wysoki
WF-05 Strona powinna zawierać przycisk przełączający motyw jasny/ciemny. wysoki
WF-06 Interfejs powinien wykorzystywać Bootstrap do budowy układu i stylowania komponentów. niski
WF-07 Interakcje użytkownika (np. dodawanie wydarzeń, rozwijanie opisu, zmiana motywu) powinny być obsłużone z użyciem jQuery. średni
WF-08 Użytkownik powienien mieć możliwość kasowania wydarzenia niski

🔧 Wymagania niefunkcjonalne

Kod wymagania Wymaganie Poziom
WNF-01 Kod HTML powinien być poprawny semantycznie i czytelnie sformatowany. średni
WNF-02 Kod CSS powinien być umieszczony w osobnym pliku. średni
WNF-03 Kod JavaScript powinien być umieszczony w osobnym pliku i podłączony do strony. średni
WNF-04 Strona powinna być responsywna i poprawnie wyświetlać się na komputerze oraz urządzeniach mobilnych. wysoki
WNF-05 Interfejs powinien być zgodny z WCAG 2.1 (czytelność, kontrast, dostępność klawiaturą i czytelne etykiety elementów interaktywnych). niski
WNF-06 Wygląd strony powinien być estetyczny i spójny wizualnie w obu motywach (jasnym i ciemnym). niski
WNF-07 Nazwy plików i struktura projektu powinny być uporządkowane i zgodne z wymaganiami oddania (HTML, CSS, JS oraz uzupełniony plik .md). wysoki

💻 KOD PROGRAMU - REALIZACJA

JavaScript (app.js)

// Wklej tutaj kod JavaScript

CSS (styles.css)

/* Wklej tutaj kod CSS */

HTML (index.html)

<!-- Wklej tutaj kod HTML -->

HTML (??????.html)

<!-- Wklej tutaj kod HTML -->