Alpine.js Basic Counter - Alpine-js Typing CST Test
Loading…
Alpine.js Basic Counter — Alpine-js Code
Simple counter with increment, decrement, reset, and theme toggle using Alpine.js.
<div x-data="{ count: 0, isDark: false }" :class="isDark ? 'dark-theme' : 'light-theme'">
<h2>Counter: <span x-text="count"></span></h2>
<div>
<button @click="count++">+</button>
<button @click="count--">-</button>
<button @click="count=0">Reset</button>
</div>
<button @click="isDark = !isDark">Switch to <span x-text="isDark ? 'Light' : 'Dark'"></span> Theme</button>
</div>
<style>
.dark-theme { background-color: #222; color: #eee; }
.light-theme { background-color: #fff; color: #000; }
</style>Alpine-js Language Guide
Alpine.js is a lightweight, declarative JavaScript framework that provides reactivity and interactivity directly in your HTML. It is often described as 'Tailwind for JavaScript' - offering the power of large frameworks with minimal overhead.
Primary Use Cases
- ▸UI interactivity in server-rendered pages
- ▸Toggles, tabs, dropdowns, modals
- ▸Form validation and dynamic behavior
- ▸Progressive enhancement for static sites
- ▸Small-to-medium widgets without frameworks
Notable Features
- ▸HTML-driven reactivity
- ▸Lightweight (~8 KB min+gzip)
- ▸No build step required
- ▸Component-style syntax using HTML attributes
- ▸Vue-like reactivity with minimal API
Origin & Creator
Created by Caleb Porzio and released in 2019 as part of the Laravel/Blade ecosystem, inspired by Vue.js reactivity but built for small, inline components.
Industrial Note
Alpine.js excels for micro-interactions, widgets, and progressive enhancement - especially in server-rendered environments like Laravel, Rails, Phoenix, and Django.
More Alpine-js Typing Exercises
Alpine.js Counter with LocalStorageAlpine.js Counter with Max LimitAlpine.js Counter with Even/Odd DisplayAlpine.js Counter with Auto Dark ThemeAlpine.js Counter with Reset HistoryAlpine.js Counter with Input BindingAlpine.js Counter with Toggle AnimationAlpine.js Counter with Max/Min LimitsAlpine.js Counter with Conditional Message