# Karta ćwiczenia laboratoryjnego

[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML)
[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)
[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://react.dev/)
[![React Docs](https://img.shields.io/badge/React-Documentation-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://react.dev/learn)
[![W3Schools React](https://img.shields.io/badge/W3Schools-React-04AA6D?style=for-the-badge&logo=react&logoColor=white)](https://www.w3schools.com/react/default.asp)


## 📋 Informacje podstawowe

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

## 📝 Opis zadania laboratoryjnego
Ć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.

## 📦 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_Nazwisko1Nazwisko2_FrontEnd_Lab3.zip`

W miejscu `Nazwisko1Nazwisko2` należy wpisać nazwiska obu srudentów(tek). 
Wynik pracy w formie archiwum `zip` powinien zawierająć:
 - folder `HTML` zawierający style, js oraz plik(i) html 
 - uzupełniony ten plik tj.`.md`. 
 
 Archiwum `WSZIB_R3IN_Nazwisko1Nazwisko2_FrontEnd_lab3.zip` należy uzupełnić o swoje dane w nazwie i przesłać poprzez:

[![Upload](https://img.shields.io/badge/Upload-upload.pelo.com.pl-blue?style=for-the-badge&logo=upload&logoColor=white)](https://upload.pelo.com.pl)

## 🎯 Ogólny opis zadania

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.


## ✅ Wymagania funkcjonalne

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

## 🔧 Wymagania niefunkcjonalne

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


## <span style="color:red">💻 KOD PROGRAMU - REALIZACJA</span>

### React / JSX (ProductCard.jsx lub app.js)

```jsx
// Wklej tutaj kod komponentu React (JSX)
```

### CSS (styles.css)

```css
/* Wklej tutaj kod CSS */
```

### HTML (index.html)

```html
<!-- Wklej tutaj kod HTML -->
```