Create a Journal App in Browser | Dead Set on Success

In this post we are going to do some simple DOM manipulation and take text input and add it to a ul as a li in the browser. We are going to use Bootstrap 4 for our UI and keep it really simple.

First we want to get a game plan together, so I map out the following for the HTML:

<!--Input and Submit Button -->
<!-- Output Journal Entries as list items -->

And the following for the JS:

//add event listener to listen for either enter keypress or submit button clicked
//id="entryInput"
//id="entryInputButton"
// on enter or submit button clicked we want li element to be added to the top
// of the list so most recent journal entries are at the top
//id="journalUL" 
// on enter or submit button clicked we want li element to be added to the top
// of the list so most recent journal entries are at the top
//create an html element and add it to the DOM

The first thing I do is head over to getbootstrap.com and copy the JS and CSS CDN code.

Then I add copy the button components from: https://getbootstrap.com/docs/3.4/components/#btn-groups

Next it is time to add a place for the journal entries:

<ul id="journalUL">
</ul>

Then I start in on the javascript:

document.getElementById("entryInputButton").addEventListener("click", function() {const inputElement = document.getElementById('entryInput');
let entry = `(${Date.now()}) - ${inputElement.value}`;
let newLi = document.createElement("li");
newLi.innerText = entry;
  document.getElementById("journalUL").prepend(newLi);
  inputElement.value = "";
});

It turned out to be a single event listener.

This was a good refresher, but it seems like it is time to turn it up a notch.

Thanks for your time, and stay tuned.

Related