Alpine.js Counter with LocalStorage - Alpine-js Typing CST Test
Loading…
Alpine.js Counter with LocalStorage — Alpine-js Code
Persists counter and theme state in localStorage.
<div x-data="{
count: parseInt(localStorage.getItem('count')) || 0,
isDark: localStorage.getItem('isDark') === 'true',
update() {
localStorage.setItem('count', this.count);
localStorage.setItem('isDark', this.isDark);
}
}" :class="isDark ? 'dark-theme' : 'light-theme'">
<h2>Counter: <span x-text="count"></span></h2>
<div>
<button @click="count++; update()">+</button>
<button @click="count--; update()">-</button>
<button @click="count=0; update()">Reset</button>
</div>
<button @click="isDark = !isDark; update()">Switch to <span x-text="isDark ? 'Light' : 'Dark'"></span> Theme</button>
</div>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 Basic CounterAlpine.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