Manipulacja DOM - Karta Produktu

Nazwa produktu

0,00 zł

Opis produktu ma być tutaj...

Kategoria: brak

<div class="controls">
  <h3>Panel sterowania</h3>

  <div class="control-group">
    <label>Nazwa produktu:</label>
    <input
      type="text"
      id="titleInput"
      placeholder="Wprowadź nazwę produktu"
    />
  </div>

  <div class="control-group">
    <label>Cena (zł):</label>
    <input type="number" id="priceInput" placeholder="0.00" step="0.01" />
  </div>

  <div class="control-group">
    <label>Opis produktu:</label>
    <input
      type="text"
      id="descriptionInput"
      placeholder="Wprowadź opis produktu"
    />
  </div>

  <div class="control-group">
    <label>Kategoria:</label>
    <select id="categorySelect">
      <option value="">Wybierz kategorię</option>
      <option value="electronics">Elektronika</option>
      <option value="clothing">Odzież</option>
      <option value="books">Książki</option>
      <option value="home">Dom i ogród</option>
    </select>
  </div>

  <div class="control-group">
    <label>URL zdjęcia:</label>
    <input
      type="url"
      id="imageInput"
      placeholder="https://example.com/image.jpg"
    />
  </div>

  <button class="btn btn-success" onclick="updateProduct()">
    Zaktualizuj produkt
  </button>

  <button class="btn btn-warning" onclick="highlightProduct()">
    Podświetl produkt
  </button>

  <button class="btn" onclick="removeHighlight()">
    Usuń podświetlenie
  </button>

  <button class="btn btn-danger" onclick="clearProduct()">
    Wyczyść formularz
  </button>
</div>

<script>
  // TODO: Zaimplementuj poniższe funkcje używając odpowiednich metod DOM

  function updateProduct() {
    // Zadanie 1: Użyj document.getElementById() aby pobrać wartości z pól formularza
    const updatedProductTitle = document.getElementById("titleInput");
    const updatedProductImage = document.getElementById("imageInput");
    const updatedProductPrice = document.getElementById("priceInput");
    const updatedProductDescription =
      document.getElementById("descriptionInput");
    const updatedProductCategory =
      document.getElementById("categorySelect");

    // Zadanie 2: Użyj document.getElementById() aby zaktualizować elementy produktu
    const productTitle = document.getElementById("productTitle");
    const productImage = document.getElementById("productImage");
    const productPrice = document.getElementById("productPrice");
    const productDescription =
      document.getElementById("productDescription");
    const productCategory = document.getElementById("productCategory");

    // Zadanie 3: Użyj element.textContent do zmiany tekstu
    productTitle.textContent = updatedProductTitle.value;
    productPrice.textContent = updatedProductPrice.value;
    productDescription.textContent = updatedProductDescription.value;

    // Zadanie 4: Użyj element.innerHTML do ustawienia HTML z kategorią
    productCategory.innerHTML = updatedProductCategory.value;

    // Zadanie 5: Użyj element.setAttribute() do ustawienia src obrazka (jeśli podano URL)
    productImage.setAttribute("src", updatedProductImage.value);
  }

  function highlightProduct() {
    // Zadanie 6: Użyj document.querySelector() aby znaleźć kartę produktu
    const productCard = document.querySelector(".product-card");
    // Zadanie 7: Dodaj klasę CSS 'highlighted' używając classList.add()
    productCard.classList.add("highlighted");
  }

  function removeHighlight() {
    // Zadanie 8: Użyj document.getElementsByClassName() aby znaleźć wszystkie podświetlone elementy
    const productCard = document.querySelector(".product-card");
    // Zadanie 9: Usuń klasę 'highlighted' ze wszystkich znalezionych elementów
    productCard.classList.remove("highlighted");
  }

  function clearProduct() {
    // Zadanie 10: Użyj document.querySelectorAll() aby znaleźć wszystkie pola input i select
    const inputs = document.querySelectorAll("input");
    const selects = document.querySelectorAll("select");
    // Zadanie 11: Wyczyść wartości wszystkich pól
    for (const input of inputs) {
      input.value = "";
    }
    for (const select of selects) {
      select.value = "";
    }
    // Zadanie 12: Zresetuj zawartość karty produktu do wartości domyślnych
    const productTitle = document.getElementById("productTitle");
    const productImage = document.getElementById("productImage");
    const productPrice = document.getElementById("productPrice");
    const productDescription =
      document.getElementById("productDescription");
    const productCategory = document.getElementById("productCategory");

    productTitle.textContent = "Nazwa produktu";
    productPrice.textContent = "0,00 zł";
    productDescription.textContent = "Opis produktu ma być tutaj...";
    productCategory.innerHTML = "Kategoria: brak";
    productImage.setAttribute("src", "");
  }

  // Funkcja pomocnicza do aktualizacji klasy kategorii
  function updateCategoryClass(categoryValue) {
    // Zadanie 13: Użyj document.querySelector() aby znaleźć element .category-name
    // Zadanie 14: Usuń wszystkie klasy kategorii i dodaj odpowiednią dla wybranej kategorii

    console.log("Funkcja updateCategoryClass() - do zaimplementowania!");
  }
</script>