forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1<div class="counter-card">
2 <div class="counter-container">
3 <button id="counter-btn" class="counter-button">
4 Click me (<span id="counter-value">0</span>)
5 </button>
6 </div>
7</div>
8
9<style>
10 .counter-card {
11 border: 1px solid var(--border);
12 width: 100%;
13 height: 12rem;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 border-radius: 10px;
18 }
19
20 .counter-container {
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 }
25
26 .counter-button {
27 background-color: var(--text-primary);
28 color: var(--bg);
29 border: none;
30 font-family: var(--font-mono);
31 font-size: var(--font-size-s);
32 border-radius: 12px;
33 cursor: pointer;
34 width: 160px;
35 height: 44px;
36 transition: all 0.15s ease-in-out;
37 }
38
39 .counter-button:hover {
40 opacity: 0.9;
41 }
42</style>
43
44<script>
45 let count = 0
46 const button = document.getElementById('counter-btn')
47 const valueSpan = document.getElementById('counter-value')
48
49 if (button && valueSpan) {
50 button.addEventListener('click', () => {
51 count++
52 valueSpan.textContent = count.toString()
53 })
54 }
55</script>