I'm trying to add a save feature to my journal project which is just a static website.
Basically, there are three parts.
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:
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!
This is a very basic implementation of what you are trying to do. Essentially there are these steps you need to take:
onclick event listener to your save button using its ID whenever the HTML has loaded. See DOMContentLoaded event.<textarea> using it's ID and value property<li>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>