Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 23, 2020 11:55 pm GMT

Creating a Simple Todo App with Lucia

Hey there! I'm a @aidenybai, co-maintainer of Lucia, a tiny 3kb JavaScript library for prototyping web applications. This article will detail how to create a barebones Lucia todo application.

If you've ever used Vue or Alpine, you will be very familiar with the syntax.

Getting Started

First, make sure you have a index.html created that you are able to read/modify, as well as preview in the browser. You can easily accomplish this locally, or use a service like Codepen or Repl.it.

After that, add Lucia's CDN import script into your index.html file:

<script src="https://unpkg.com/lucia"></script>
Enter fullscreen mode Exit fullscreen mode

Assume for the rest of the code snippets in this tutorial that this import line is included.

Creating the Todo App

We first need to start with component scope initialization:

<div l-state="{ /* Need to add props */ }"></div>
Enter fullscreen mode Exit fullscreen mode

Lucia component scope requires you to use the l-state directive (essentially just a "special" attribute for the Lucia compiler to latch on). Inside the directive value, you must pass a value that is able to return an object.

Now, lets just write the basic HTML skeleton code for the application. I want an input and a button, which will append to a ul every time the button is clicked.

If so, I will need a property to model the value of the input (value), and a property to store the tasks (todo).

<div l-state="{ value: '', todo: [] }">  <input>  <button>Create</button>  <ul></ul></div>
Enter fullscreen mode Exit fullscreen mode

Now, let's sprinkle in the logic with Lucia directives:

<div l-state="{ value: '', todo: [] }">  <!-- two-way-binds `value` prop to value -->  <input l-model="this.value">   <!-- captures click event, pushing current `value` to `todo` -->  <button l-on:click="this.todo.push(`<li>${this.value}</li>`)">Create</button>  <!-- joins array together -->  <ul l-join="this.todo"></ul></div>
Enter fullscreen mode Exit fullscreen mode

And your Todo application with Lucia has been completed! No, really - its that easy.

Demo

Conclusion

Want to learn more about Lucia? Check out the documentation and leave a at the Github repo.

Final CodePen: https://codepen.io/aidenybai/pen/JjRrwjN


Original Link: https://dev.to/aidenybai/creating-a-simple-todo-app-with-lucia-3p1a

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To