<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Karta Produktu</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
display: flex;
justify-content: center;
padding: 20px;
}
#container {
display: flex;
gap: 30px;
}
form {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
min-width: 250px;
}
form input, form textarea, form select {
width: 100%;
margin: 6px 0;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
form button {
margin: 6px 2px;
padding: 8px 12px;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
#productCard {
width: 300px;
background: white;
border: 2px solid #ddd;
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: 0.3s;
}
#productCard.highlight {
border-color: gold;
box-shadow: 0 0 15px gold;
}
#productCard img {
width: 100%;
border-radius: 5px;
}
.category {
display: inline-block;
padding: 3px 8px;
border-radius: 5px;
font-size: 12px;
margin-top: 5px;
}
.electronics { background: lightblue; }
.clothes { background: lightgreen; }
.food { background: lightcoral; }
</style>
</head>
<body>
<div id="container">
<!-- Formularz -->
<form id="productForm">
<h3>Formularz produktu</h3>
<input type="text" id="nameInput" placeholder="Nazwa produktu" required>
<textarea id="descInput" placeholder="Opis produktu"></textarea>
<input type="text" id="priceInput" placeholder="Cena (PLN)">
<input type="text" id="imgInput" placeholder="URL obrazka">
<select id="catInput">
<option value="">-- wybierz kategorię --</option>
<option value="electronics">Elektronika</option>
<option value="clothes">Ubrania</option>
<option value="food">Jedzenie</option>
</select>
<div>
<button type="button" onclick="updateProduct()">Aktualizuj</button>
<button type="button" onclick="highlightProduct()">Podświetl</button>
<button type="button" onclick="removeHighlight()">Usuń podświetlenie</button>
<button type="button" onclick="clearProduct()">Wyczyść</button>
</div>
</form>
<!-- Karta produktu -->
<div id="productCard">
<img id="productImg" src="https://via.placeholder.com/300x200" alt="Produkt">
<h2 id="productName">Nazwa produktu</h2>
<p id="productDesc">Opis produktu pojawi się tutaj...</p>
<p id="productPrice">Cena: -- PLN</p>
<span id="productCategory" class="category">Kategoria</span>
</div>
</div>
<script>
// 1. Aktualizacja produktu
function updateProduct() {
const name = document.getElementById("nameInput").value;
const desc = document.getElementById("descInput").value;
const price = document.getElementById("priceInput").value;
const imgUrl = document.getElementById("imgInput").value;
const category = document.getElementById("catInput").value;
// aktualizacja treści
document.getElementById("productName").textContent = name || "Nazwa produktu";
document.getElementById("productDesc").textContent = desc || "Opis produktu pojawi się tutaj...";
document.getElementById("productPrice").textContent = price ? `Cena: ${price} PLN` : "Cena: -- PLN";
// obrazek
const img = document.getElementById("productImg");
if (imgUrl) {
img.setAttribute("src", imgUrl);
} else {
img.setAttribute("src", "https://via.placeholder.com/300x200");
}
// kategoria
const catEl = document.getElementById("productCategory");
catEl.textContent = category || "Kategoria";
catEl.className = "category"; // reset klas
if (category) {
catEl.classList.add(category);
}
}
// 2. Podświetlenie karty
function highlightProduct() {
document.querySelector("#productCard").classList.add("highlight");
}
// 3. Usunięcie podświetlenia
function removeHighlight() {
document.querySelector("#productCard").classList.remove("highlight");
}
// 4. Czyszczenie formularza i karty
function clearProduct() {
// czyszczenie formularza
document.getElementById("productForm").reset();
// reset karty
document.getElementById("productName").textContent = "Nazwa produktu";
document.getElementById("productDesc").textContent = "Opis produktu pojawi się tutaj...";
document.getElementById("productPrice").textContent = "Cena: -- PLN";
document.getElementById("productImg").setAttribute("src", "https://via.placeholder.com/300x200");
const catEl = document.getElementById("productCategory");
catEl.textContent = "Kategoria";
catEl.className = "category";
}
</script>
</body>
</html>
