Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/trueberryless/the-thinking-hub. The central knowledge hub for 8 key Computer Science thinking modes. the-thinking-hub.felixs.dev
Something went wrong. Try again.
1.3 kB · 60 lines
Astro
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061<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>