Back to Course |
Practical Alpine.js From Scratch
Visual Effects of Show/Hide with x-transition Live-Search: x-for with index

Live Character Count: Template Literals with Expressions

Link to repository

Visual Effects of Show/Hide with x-transition Live-Search: x-for with index

Course Content

Intro

01 What's Inside The Course

12 Practical Examples

02 First Practical Example: Alpine.js vs jQuery vs Vanilla JS
03 Show/Hide Password: x-bind, x-text and Methods in x-data
04 Multi-Step Form: Dynamic CSS Classes with :class
05 Show/Hide Modals: Buttons, Escape Key, Clicking Outside
06 Slow Connection and x-cloak
07 Form with Progress Bar: x-model, x-ref, and More x-bind Examples
08 Multiple Alpine Components on Page: Events and Parameters
09 Countdown Timer: x-init with Vanilla JavaScript Syntax
10 Visual Effects of Show/Hide with x-transition
11 Live Character Count: Template Literals with Expressions
12 Live-Search: x-for with index
13 Color Picker: Mini-Recap of What We've Learned So Far

Alpine Structure in Real-Life Laravel Projects

14 Several Ways to Install/Initialize Alpine
15 Load Larger JS Methods Externally: For Alpine or x-data
16 Alpine Inside Blade Components

Passing Data From/To Alpine

17 "Hardcoding" Data in Blade from Controller
18 Getting Alpine Data from External/Internal API
19 Livewire + Alpine: Data in Both Directions