To-Do app tutorial

Before we can start building anything interesting, we should have a way to jot down our thoughts. Therefore the first thing we will build is a tool to keep track of what needs to be done. The infamous To-Do app, allowing us to keep temporary notes.

So what are the requirements? The ability to add a note, read our notes, and to clear them off. We will also need a space to keep these notes in, and a web page to access them through. Let's start with the page! You can edit the code below, which will update the live preview.

... loading editor and preview ...

What does this do? HTML is how we code the layout of a web page.

Now, try changing the h1 text in the editor from "Title" to the name of our app, "Thoughts".

HTML controls the layout, but how do we control what happens when a user presses the 'add' button? This is done with javascript. But using raw javascript quickly becomes verbose, so to keep things concise we will use a popular tool called jQuery. We also need a tool to store data, so we will include GUN as well.

Insert the following between the ending ul tag and the ending body tag, replacing the comment line:

Wonderful! You should have gotten the alert message, this means writing code works! Let's replace the alert line entirely with code that responds to user input.

What's going on here?

Now that users can jot down their thoughts, we need a place to save them. Let's start using GUN for just that.

Replace the alert line in the submit function with the following:

Fantastic! Now that we can successfully store data, we want show the data! Replace the comment line in the editor with the following:

Finally we want to be able to clear off our thoughts when we are done with them. The interface for this could be done in many different ways, but for simplicity we will use a double tap as the gesture to clear it off. Replace the comment line in the editor with this code.

Congratulations! You are all done, you have built your first GUN app!

In the next tutorial we will use GUN to synchronize data in realtime across multiple devices. We'll start by copying the app we made here and modifying it to become a chat app.

Next Tutorial: Converse