Learn Alpine js in practice #1: Alpine js project - get data from API | Alpine.js course

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 ==================

============ SOURCE CODE ================
📎️ Is available via Patreon:
=========================================

- 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:

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
08:54 - x-transition to add transition effects
09:43 - x-text to render variable text from x-data object

#alpinejs #redeyedcoderclub #javascript

[RedEyedCoderClub]

Any suggestions for the next video? Write them in comments!
Follow me @:

[streamocu]

so good... please more about a quiz in alpine js

[alexdin]

Like before watching the video because we trust the product

[farzadmf]

I was skeptic in the beginning of the video, but this is super interesting. I wonder if there's a way to get syntax highlighting and auto completion for the 'x-data' section

[antonygladson]

Mam...Please upload flask quiz app with MySQL video ...