Snippets

Alpine.js Auto Textarea Height

Playing
Alpine.js Auto Textarea Height
6 mins3 years ago

With a sprinkle of Alpine.js code, create a textarea that expands in height to fit content as a user types.

Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No coments, yet. Be the first to leave a comment.

Suggested courses

Alpine.js

Build a Booking System With Laravel

Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course. Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments. For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots). To finish up, we’ll build a simple UI with Alpine.js, with a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment. Phew. We’ve got a lot to learn — let’s build a booking system with Laravel!

37 episodes
4 hrs 49 mins
Alpine.js

Drag and Drop Sorting With Livewire

Easily add drag and drop sorting functionality to your Livewire components with an Alpine directive, powered by Sortable.js. We’ll start with a list of ordered items, activate drag and drop sorting, and then feed the new order back to Livewire to instantly update the database. Once you’re done, you’ll be able to reuse this functionality in any of your Livewire components.

6 episodes
22 mins
Alpine.js

reCAPTCHA with Laravel

Adding Google reCAPTCHA to a Laravel form isn’t too much trouble, but what happens when we want to re-use it for other forms? This course focuses on setting up reCAPTCHA using Alpine.js to fetch the token, and then middleware to verify the token based on a threshold in our config. We’ll add a Blade directive too, so we’re able to easily use reCAPTCHA for any forms in our Laravel apps — just by adding a couple of lines of code.

8 episodes
49 mins
Alpine.js

Build a Livewire Drag & Drop Uploader

Build a multiple file drag-and-drop uploader with Livewire and Alpine.js. Using Alpine and Livewire’s JavaScript API, we’ll directly hook into the JavaScript drop event and kick off the upload progress, validating files and showing a progress bar along the way. So, if you need drag-and-drop uploading in your Laravel project, this course has you covered!

9 episodes
43 mins