Elementy strony dopasowane do własnego projektu. Wariant „Licznik znaków” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
HTML określa strukturę przykładu, CSS jego wygląd, a JavaScript — jeżeli występuje — odpowiada za interakcję. Podgląd pokazuje domyślne ustawienia, które możesz zmienić w edytorze.
Jak dodać go na stronę?
Otwórz przykład w edytorze i podmień tekst oraz kolory.
HTML wstaw w miejscu, w którym ma pojawić się element.
CSS przenieś do arkusza stylów swojej strony. Reguły body z podglądu dopasuj do własnego układu.
JavaScript uruchom po załadowaniu elementów HTML, na przykład przed zamknięciem </body>.
Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Podmień treści i odnośniki. Kod działa w przeglądarce; formularze wymagają osobnej obsługi wysyłania po stronie serwera.
Co możesz zmienić w konfiguratorze?
Limit znaków, Początkowa treść, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Licznik znaków
HTML
<div class="characters"><label for="message">Twoja wiadomość</label><textarea id="message" maxlength="280">Dobry tekst zaczyna się od pierwszego zdania.</textarea><p><span class="used">0</span> / 280 znaków</p></div>
const message=document.querySelector('#message');
function count(){document.querySelector('.used').textContent=message.value.length}
message.addEventListener('input',count);count();