Cookbook

Practical recipes and patterns for common UI interactions with LokaScript.

Getting Started

Each recipe includes:

• A working example you can try
• Step-by-step explanation
• Common variations and tips

Quick Examples

Toggle a Class

<button _="on click toggle .active on me">Toggle Active</button>

Show/Hide Content

<button _="on click toggle .hidden on next <div/>">Toggle</button>
<div>Content to toggle</div>

Recipes by Category

Basics

• Toggle Classes - Add, remove, toggle CSS classes
• Show/Hide Elements - Visibility control

Forms & Inputs

• Form Validation - Client-side validation
• Input Mirroring - Real-time input sync

Advanced Patterns

• Fade and Remove - Animated element removal
• Fetch Data - Loading data from APIs

Common Patterns

Event + Action

The basic pattern is: on [event] [action]

<button _="on click add .clicked to me">Click me</button>

Chaining Actions

Use then to chain multiple actions:

<button _="on click add .loading then wait 1s then remove .loading">Load</button>

Targeting Other Elements

Target other elements with CSS selectors:

<button _="on click toggle .visible on #modal">Open Modal</button>

Conditional Logic

Use if for conditional behavior:

<button _="on click if I match .active remove .active else add .active">Toggle</button>