test
InterfejsPodgląd
Ładowanie podglądu…
HTML, CSS i JavaScript. Kod i podgląd w jednym miejscu.
Kod źródłowy
Licencja tego pena nie została jeszcze potwierdzona przez autora. Zasady korzystania.
HTML
<main class="container">
<h1>Witaj w Codepen.pl</h1>
<p>testowy pen</p>
<button id="btn">Kliknij mnie</button>
<p id="info" aria-live="polite"></p>
</main>
CSS
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #ffffff;
color: #282335;
font-family: system-ui, sans-serif;
}
.container {
padding: 24px;
text-align: center;
}
button {
padding: 12px 28px;
border: 1px solid #5d3979;
background: #fff;
color: #5d3979;
font: inherit;
cursor: pointer;
}
JavaScript
const btn = document.getElementById('btn');
const info = document.getElementById('info');
btn.addEventListener('click', () => {
info.textContent = 'Działa! ' + new Date().toLocaleTimeString('pl-PL');
});
Edytuj swój pen
Podaj adres e-mail użyty przy zapisie. Wyślemy link do edycji.