Estoy tratando de agregar una función de guardado a mi proyecto de diario, que es solo un sitio web estático.
Básicamente, hay tres partes.
Lo que quiero lograr es que si hago clic en el botón Guardar, se guardará la entrada en una lista con viñetas... Si hago clic en el botón Guardar nuevamente, se creará otra entrada debajo, y así sucesivamente.
Lo anterior es solo el comienzo... después de eso, planeo poder guardar el valor de la lista en el almacenamiento local, de modo que la próxima vez que abra la herramienta, la lista aún debería estar allí y debería poder agregarle más.
Y otra ventaja si puedo agregar la marca de tiempo (fecha y hora) que precede a cada registro. por ejemplo:
¿Cómo hago para construir esto? En este momento solo tengo HTML y CSS para mostrar ... pero espero que alguien pueda mostrarme cómo se puede lograr. Por favor vea mi código abajo:
<textarea id="textarea3" cols="50" rows="10"></textarea> <button id="save-btn">Save textarea</button> <div id="logs"> <ul> <li></li> </ul> </div>Disculpas por tantas consultas... pero gracias de antemano por cualquier ayuda!
Esta es una implementación muy básica de lo que está tratando de hacer. Esencialmente, hay estos pasos que debe seguir:
onclick a su botón Guardar usando su ID cada vez que se haya cargado el HTML. Consulte el evento DOMContentLoaded .<textarea> usando su ID y propiedad de value<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>