Getting started with AlpineJS

Want more?

This lesson for enrolled students only. Join the course to unlock it!

You can see the code changes implemented in this lecture below.

If you have purchased the course in a different platform, you still have access to the code changes per lecture here on Teclado. The lecture video and lecture notes remain locked.

Join course for $15

Modified files

templates/base.html

--- 
+++ 
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="{% static 'output.css'%}">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
   <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"></script>

   {% block extra_head %}
   {% endblock extra_head %}

templates/app/layouts/base_form.html

--- 
+++ 
@@ -4,7 +4,9 @@

 {% block base_content %}
 <main class="max-w-7xl mx-auto mt-10">
-  <form method="POST">
+  <form method="POST" x-data="{
+    articleStatus: ''
+  }">
     {% csrf_token %}
     <div class="mb-4">
     {% render_field form.title class="text-4xl w-full rounded-md border-2 border-gray-200 focus:ring-1 focus:ring-emerald-500 focus:border-emerald-500" placeholder="Write a title for your article" %}