Generator wizytówki firmowej z podglądem na żywo
Treść zadania
W kreatorze wizytówek mamy pola: <input type="text" id="wizImie" value="Tomasz Lis">, <input type="text" id="wizRola" value="Grafik">, listę kolorów tła <select id="wizKolor"><option value="lightblue" selected>Błękitny</option></select> oraz przycisk <button id="btnGenerujWizytowke">Generuj</button>.
Podgląd wizytówki składa się z kontenera <div id="kartaPodgladu"><h3 id="kartaImie"></h3><p id="kartaRola"></p></div>.
Po kliknięciu przycisku przepisz imię do #kartaImie, stanowisko do #kartaRola i ustaw tło kontenera #kartaPodgladu.style.backgroundColor na wybrany kolor.
Co będzie oceniane
- Pobranie wartości z pól imienia, roli i selecta koloru.
- Wpisanie tekstów do #kartaImie i #kartaRola.
- Ustawienie style.backgroundColor karty na 'lightblue'.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Wygenerowanie danych wizytówki i nadanie tła — tekst #kartaImie = Tomasz Lis; tekst #kartaRola = Grafik; atrybut #kartaPodgladu = background-color: lightblue
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Zaktualizuj wizytówkę i jej kolor tła po kliknięciu #btnGenerujWizytowke
Wskazówki
Wskazówka 1
Zintegruj aktualizację wielu pól tekstowych z modyfikacją stylu wizualnego kontenera karty.
Wskazówka 2
Odczytaj dane z obu pól tekstowych oraz listy rozwijanej kolorów, przypisz treści do odpowiednich elementów wewnętrznych karty i ustaw styl koloru tła całego bloku.