/
yeltsov
/
astro-chiri
Обзор
Документация
Войти
/
yeltsov
/
astro-chiri
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/examples/CounterButton.astro
60 строк
1 KB
ilya yeltsov
first_commit
12 апр 2026, 09:26
12 апр 2026, 09:26
691ca0f
Код
Авторство
О чём код?
<div class="counter-card"> <div class="counter-container"> <button id="counter-btn" class="counter-button"> Click me (<span id="counter-value">0</span>) </button> </div> </div> <script is:inline> let count = 0 function setupCounter() { const button = document.getElementById('counter-btn') const valueSpan = document.getElementById('counter-value') if (button && valueSpan) { valueSpan.textContent = count.toString() button.onclick = function () { count++ valueSpan.textContent = count.toString() } } } setupCounter() document.addEventListener('astro:page-load', setupCounter) </script> <style> .counter-card { border: 1px solid var(--border); width: 100%; height: 12rem; display: flex; align-items: center; justify-content: center; border-radius: 10px; } .counter-container { display: flex; justify-content: center; align-items: center; } .counter-button { background-color: var(--text-primary); color: var(--bg); border: none; font-family: var(--mono); font-size: var(--font-size-s); border-radius: 12px; cursor: pointer; width: 160px; height: 44px; transition: all 0.15s ease-in-out; } .counter-button:hover { opacity: 0.9; } </style>