| Pole | Wartość |
|---|---|
| Przedmiot | FrontEnd |
| Forma zajęć | laboratorium |
| Ćwiczenie | Lab. 3 / React: HTML + CSS + React |
| Data | 09.05.2026 |
| Nazwisko i imię studenta 1 | ...................................................... |
| Nazwisko i imię studenta 2 | ...................................................... |
| Rok/semestr | Rok 3, semestr 6 [studia niestacjonarne] |
| Ocena | ocena cząstkowa |
| Uwagi do ćwiczenia | brak |
Ćwiczenie ZESPOŁOWE (2 osoby). Stwórz stronę w HTML+CSS+React komponent, który zawiera pojedynczą kartę produktu w sklepie internetowym. Karta powinna zawierać 3 zdjęcia, opis, cenę netto, ilość, oraz cenę brutto obliczaną automatycznie (23%). Karta powinna zawierać ocenę w skali od 0–5 (mogą być gwiazdki, kropki itp.). Na stronie pojawić się powinny minimum 3 produkty.
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_Nazwisko1Nazwisko2_FrontEnd_Lab3.zip
W miejscu Nazwisko1Nazwisko2 należy wpisać nazwiska obu srudentów(tek).
Wynik pracy w formie archiwum zip powinien zawierająć:
HTML zawierający style, js oraz plik(i) html.md.Archiwum WSZIB_R3IN_Nazwisko1Nazwisko2_FrontEnd_lab3.zip należy uzupełnić o swoje dane w nazwie i przesłać poprzez:
Używając HTML, CSS i React stwórz komponent karty produktu dla sklepu internetowego. Na stronie powinny pojawić się minimum 3 produkty prezentowane przy użyciu tego samego komponentu.
| Kod wymagania | Wymaganie | Poziom |
|---|---|---|
| WF-01 | Strona powinna wyświetlać minimum 3 karty produktów. | wysoki |
| WF-02 | Karta produktu powinna zawierać 3 zdjęcia produktu (np. galeria / slider). | wysoki |
| WF-03 | Karta produktu powinna zawierać opis tekstowy produktu. | wysoki |
| WF-04 | Karta produktu powinna wyświetlać cenę netto produktu. | wysoki |
| WF-05 | Karta produktu powinna umożliwiać wybór ilości produktu. | wysoki |
| WF-06 | Cena brutto powinna być obliczana automatycznie na podstawie ceny netto i stawki VAT 23%. | wysoki |
| WF-07 | Karta produktu powinna zawierać ocenę produktu w skali 0–5 (np. gwiazdki, kropki lub inny graficzny wskaźnik). | niski |
| WF-08 | Każdy produkt powinien być renderowany przy użyciu tego samego komponentu React. | średni |
| Kod wymagania | Wymaganie | Poziom |
|---|---|---|
| WNF-01 | Kod HTML powinien być poprawny semantycznie i czytelnie sformatowany. | średni |
| WNF-02 | Style CSS powinny być umieszczone w osobnym pliku lub bloku <style>. |
średni |
| WNF-03 | Logika komponentu powinna być zaimplementowana w React (JSX). | wysoki |
| WNF-04 | Strona powinna być responsywna i poprawnie wyświetlać się na komputerze oraz urządzeniach mobilnych. | wysoki |
| WNF-05 | Cena brutto powinna być aktualizowana dynamicznie przy zmianie ilości lub ceny netto. | średni |
| WNF-06 | Wygląd kart powinien być estetyczny i spójny wizualnie. | niski |
| WNF-07 | Nazwy plików i struktura projektu powinny być uporządkowane i zgodne z wymaganiami oddania (HTML, CSS, JS/JSX oraz uzupełniony plik .md). | wysoki |
// Wklej tutaj kod komponentu React (JSX)
/* Wklej tutaj kod CSS */
<!-- Wklej tutaj kod HTML -->