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. Additionally, we 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.

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

We first must wrap all our code in an html tag so our computer knows it is a web page.
The body tag tells it to display the contents enclosed within.
h2 is one of many semantic tags for declaring a title, others include h1, h3 and so on of different sizes.
A form is a container for getting information from a user.
Form's have inputs which let the user type data in, it is a self-closing tag.
The button can be pressed, causing an action that we code to happen.
ul is an unordered list, we will display our thoughts inside that list.

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

See how the preview live updated? This helps us see our code as we type it.

Now we want to write code that reacts to a user pressing the 'add' button. We can do this using raw javascript but it quickly becomes verbose, so to keep things concise we will use a popular library called jQuery. Also, we need a way to store the thoughts, so we will include GUN as well.

Insert the following inbetween the ending ul tag and the ending body tag:

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

What's going on here?

The $ is a symbol for jQuery, we call it by enclosing text within parenthesis ().
jQuery will give us a reference to the HTML tag that corresponds to 'form', the quotation marks denote text in javascript.
on is a $ command that can be called as well. We call it with the text of the name of the event we want to react to, and a function which gets called when that event happens.
There are many different events, such as 'click' when a user presses something or 'mousemove'. But we will use 'submit' because it reacts to both a button 'click' or a return keystroke on a form.
A function is code that does not get run until it is called. It typically gets called with data, like event.
The default behavior of a form is to cause the browser to change pages, we can prevent that by calling preventDefault on the event.
Finally, caling $ with 'input' will reference the HTML input tag and then calling val on that gives us the value the user typed in.

Now that users can jot down their thoughts, we need a place to save them.

The variable keyword tells javascript that we want to create a reference named gun that we can reuse.
First we call Gun to start up the database, which only needs to be done once.
Then we can chain off of it, by calling get with the text of the name of our data to load.
However, no data has been saved to 'thoughts' yet! So we cannot open anything.
If we add calling set onto the chain, it will update 'thoughts' to hold data.
Now gun is a reference to this data chain! We will use it in the next step to save our thoughts

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

We're telling gun to add the value of the input as an item in the set.
Then we also want the input's value to be empty text, so we can add a new thought later.

Fantastic! Now that we can successfully store data, we want show the data!

In the same way $'s on reacts to events, so does gun. It reacts to any update on 'thoughts'.
map calls the function you passed into it for each item in the set, one at a time.
We get the thought value itself and a unique identifier for the item in the set.
This next line looks scary, but read it like this, "make variable li equal to X or Y".
- The X part asks $ to find the id in the HTML and get it.
- In javascript, || means 'or', such that javascript will use X if it exist or it will use Y.
- The Y part asks $ to create a new <li> HTML tag, set its id attribute to our id and append it to the end of the HTML ul list.
Finally, the javascript if statement either asks $ to make thought be the text of the li if thought exists, else hide the li from being displayed.
Altogether it says "Create or reuse the HTML list item and make sure it is in the HTML list, then update the text or hide the item if there is no text".