How to save textarea values in a list onclick of button?

March 28, 2022

I’m trying to add a save feature to my journal project which is just a static website.

Basically, there are three parts.

The textarea
Save button
Div to store logs

What I want to achieve is if I click on the save button, it will save the entry in a bullet list… If I click the save button again, it will create another entry below it, and so on.

The above is just the start.. after that I plan to be able to save that list value in local storage, so the next time I open the tool, the list should still be there and I should be able to add more to it.

And another bonus if I can add the timestamp (date and time) preceding each logs.
for example:

03/11/2022 5:00 AM – Note here
03/15/2022 9:32 AM – Note here
03/24/2022 7:15 AM – Note here

How do I go about to build this? Right now I only have HTML and CSS to show for.. but I’m hoping someone can show me how it can be achieved. Please see my code below:

<textarea id="textarea3" cols="50" rows="10"></textarea>

<button id="save-btn">Save textarea</button>

<div id="logs">

    <ul>
        <li></li>
    </ul>    

</div>

Apologies for so many queries… but thank you in advance for any help!

>Solution :

This is a very basic implementation of what you are trying to do. Essentially there are these steps you need to take:

attach an onclick event listener to your save button using its ID whenever the HTML has loaded. See DOMContentLoaded event.
when the button is clicked get the text from the <textarea> using it’s ID and value property
get the list using its ID and create a new list item <li>
assign the text from the textarea to the list item
get timestamp using toLocaleString()

/**
 * This function handles the onclick event meaning it will be called whenever the button is clicked.
 */
function onSave() {
  // get textarea element
  const textArea = document.getElementById("textarea3");
  // retrieve the value within it
  const note = textArea.value;
  // add the note to the list
  addNote(note);
}

/**
 * This function adds a new note to the list of notes with a timestamp.
 * @param {string} noteText text to be added to list
 */
function addNote(noteText) {
  // get the list
  const logList = document.getElementById("log-list");
  // create a new list item
  const listItem = document.createElement("li");
  // now set the text for this list item using a timestamp and the text provided as parameter
  listItem.textContent = `${new Date().toLocaleString("en-US")}  -  ${noteText}`;
  // at this stage the list element is not yet added to the list, so add it at the bottom of the list now
  logList.appendChild(listItem);
}

// wait until all the HTML has been loaded!
window.addEventListener('DOMContentLoaded', (event) => {
  // get the button element
  const saveBtn = document.getElementById("save-btn");
  // attach an event listener for the "click" event. Every time the button i clicked onSave() should be called
  saveBtn.addEventListener("click", onSave)
});

<textarea id="textarea3" cols="50" rows="10"></textarea>

<button id="save-btn">Save textarea</button>

<div id="logs">
  <ul id="log-list">
  </ul>
</div>