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!
CodePudding user response:
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 andvalue
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>