Alpine.js Counter with Reset History - Alpine-js Typing CST Test
Loading…
Alpine.js Counter with Reset History — Alpine-js Code
Maintains a history of counter changes and resets history on reset.
<div x-data="{ count:0, history: [] }">
<h2>Counter: <span x-text="count"></span></h2>
<div>
<button @click="count++; history.push(count)">+</button>
<button @click="count--; history.push(count)">-</button>
<button @click="count=0; history=[]">Reset</button>
</div>
<ul>
<template x-for="n in history" :key="n">
<li x-text="n"></li>
</template>
</ul>
</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 LocalStorageAlpine.js Counter with Max LimitAlpine.js Counter with Even/Odd DisplayAlpine.js Counter with Auto Dark ThemeAlpine.js Counter with Input BindingAlpine.js Counter with Toggle AnimationAlpine.js Counter with Max/Min LimitsAlpine.js Counter with Conditional Message