Learn Alpine js in practice #1: Alpine js project - get data from API | Alpine.js course
This is the 1st video of the Alpline.js tutorial - Learn Alpine.js in practice. It's a step by step guide how to use Alpine.js in your projects, to add a JavaScript driven functionality.
The final Alpine js project of this Alpine js course is a small app for getting data from API.
By clicking on the button Alpine js makes a request to get a joke about Chuck Norris from API.
============ FOLLOW ME ==================
Telegram: https://t.me/red_eyed_coder_club
Twitter: / codereyed
Facebook: https://fb.me/redeyedcoderclub
============ SOURCE CODE ================
📎️ Is available via Patreon:
/ 69077491
=========================================
Topics covered in the Alpine.js tutorial:
What is Alpine x-data, x-show, x-on, x-transition, x-text directives, and how to use them.
Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.
Timecodes:
00:00 - Beginning. Demo & Alpine.js description
03:03 - Adding Alpine.js to a template
03:42 - x-data object
04:30 - x-show directive, and using of data defined in x-data object
05:04 - Adding Bootstrap to the project
06:00 - x-on directive, and using event listeners and event handlers
07:38 - using function as Alpine.js event handlers
08:54 - x-transition to add transition effects
09:43 - x-text to render variable text from x-data object
10:57 - Alpine.js project - get data from API
Learn Alpine js in practice #1: Alpine js project - get data from API | Alpine.js course:
• Learn Alpine js in practice #1: Alpin...
#alpinejs #redeyedcoderclub #javascript
Photo by https://generated.photos/