Alpine.js Counter with Toggle Animation - Alpine-js Typing CST Test
Loading…
Alpine.js Counter with Toggle Animation — Alpine-js Code
Toggles dark/light theme with a smooth transition animation.
<div x-data="{ isDark: false }" :class="isDark ? 'dark-theme' : 'light-theme'" x-transition>
<button @click="isDark = !isDark">Toggle Theme</button>
</div>
<style>
.dark-theme { background-color:#222; color:#eee; transition: all 0.3s; }
.light-theme { background-color:#fff; color:#000; transition: all 0.3s; }
</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 Basic CounterAlpine.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 Max/Min LimitsAlpine.js Counter with Conditional Message