diff --git a/README.md b/README.md index fdc1c83..64328fe 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,10 @@ Crear una aplicación "Mis Notas" que permita ver notas creadas, crear nuevas y eliminarlas. *Notica adicional -> Las notas deben ser recordadas si la pestaña es recargada. -[] Dar estilos al botón editar -[] Agregar botones guardar y cancelar -[] convertir p en input mientras edición +[X] Dar estilos al botón editar +[X] Agregar botones guardar y cancelar +[X] convertir p en input mientras edición +[] Improve scrollbar style +[] Enable color options +[] Fix position color options + diff --git a/app.js b/app.js index a236144..86d3e57 100644 --- a/app.js +++ b/app.js @@ -26,7 +26,9 @@ function displayAllNotes() { - + + + `; @@ -77,7 +79,9 @@ function addNote (){ - + + + `; @@ -89,30 +93,79 @@ function addNote (){ } } +// Editar el texto de la nota function editNote(button){ const liElement = button.closest('li'); const pEditable = liElement.querySelector('p'); - const noteId = liElement.getAttribute('data-id'); + const newInput = document.createElement('input'); + + newInput.id = 'editable'; + newInput.type = 'text'; + newInput.value = pEditable.textContent + + liElement.replaceChild(newInput, pEditable); + liElement.classList.add('edit-mode') - console.log(pEditable.textContent); - let newText = prompt("Escribe en nuevo texto para tu nota: "); - pEditable.textContent = newText; + // Estado de visibilidad botones + const btnSave = liElement.querySelector('.save'); + const btnCancel = liElement.querySelector('.cancel'); + btnSave.classList.remove('hide') + btnCancel.classList.remove('hide') +} + +// Guardar la nota con la edición realizada +function saveNoteEdit(button){ + const liElement = button.closest('li'); + const noteId = liElement.getAttribute('data-id'); + const newInput = document.querySelector('input'); let existingNotes = JSON.parse(localStorage.getItem('notes')) || []; - existingNotes = existingNotes.map(function(note){ - - if(note.id == noteId){ - note.text = newText; + existingNotes = existingNotes.map(note => { + if(note.id === noteId){ + note.text = newInput.value; } return note - }) + }); // Actualizar las notas en localStorage localStorage.setItem('notes', JSON.stringify(existingNotes)); + const pEditado = document.createElement('p'); + pEditado.textContent = newInput.value; + liElement.replaceChild(pEditado, newInput); + liElement.classList.remove('edit-mode'); + + // Estado de visibilidad botones + const btnSave = liElement.querySelector('.save'); + const btnCancel = liElement.querySelector('.cancel'); + + btnSave.classList.add('hide') + btnCancel.classList.add('hide') +} + +// Cancelar la edición de la nota +function cancelNoteEdit(button){ + const liElement = button.closest('li'); + const noteId = liElement.getAttribute('data-id'); + const newInput = document.querySelector('input'); + + let existingNotes = JSON.parse(localStorage.getItem('notes')) || []; + const originalNote = existingNotes.find(note => note.id === noteId); + + const pEditado = document.createElement('p'); + pEditado.textContent = originalNote.text; + liElement.replaceChild(pEditado, newInput); + liElement.classList.remove('edit-mode'); + + // Estado de visibilidad botones + const btnSave = liElement.querySelector('.save'); + const btnCancel = liElement.querySelector('.cancel'); + + btnSave.classList.add('hide') + btnCancel.classList.add('hide') } // función para eliminar nota diff --git a/index.html b/index.html index e0a4a05..e5b89ca 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
-

Mis notas

+

Mis notas

diff --git a/styles.css b/styles.css index 75958cd..47c5893 100644 --- a/styles.css +++ b/styles.css @@ -7,6 +7,8 @@ --Gray-6: #F2F2F2; --new-white: #FFFCFC; --error: #E96262; + --blue: #62B0E9; + --green: #5D8456; } * { @@ -20,8 +22,6 @@ *, *::before, *::after{box-sizing: border-box;} -p{text-wrap: pretty;} -h1, h2, h3, h4{text-wrap: balance;} body { min-height: 100dvh; @@ -35,6 +35,16 @@ header{ padding: 32px 0 16px; } +.sticky { + position: fixed; + /* top: 0; */ + left: 0; + width: 100%; + /* background-color: #ffffff; /* Color de fondo del header */ + /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Sombra opcional */ + z-index: 1000; /* Número alto para estar por encima de otros elementos */ +} + h1{ font-size: 32px; font-weight: 700; @@ -58,10 +68,12 @@ main{ gap: 16px; width: 100%; max-width: 375px; + /* padding-top: 80px; */ } form{ width: 100%; + max-width: calc(375px - 32px); display: flex; flex-direction: column; align-items: center; @@ -69,6 +81,12 @@ form{ align-self: stretch; } +#form{ + /* position: fixed; */ + top: 80px; + z-index: 999; +} + form label{ align-self: flex-start; font-size: 18px; @@ -126,6 +144,7 @@ form button { .list-notes{ width: 100%; + /* position: sticky; */ display: flex; flex-direction: column; align-items: center; @@ -134,6 +153,7 @@ form button { max-height: 500px; overflow-y: auto; overflow-x: hidden; + /* padding-top: calc(48px + 208px); */ /* Estilos scrollbar */ /* scrollbar-color: var(--Gray-4, #BDBDBD) transparent; scrollbar-width: thin; */ @@ -179,7 +199,8 @@ form button { margin-right: -6px; } -.note p{ +.note p, +.note input{ align-self: stretch; color: var(--Gray-1); font-size: 24px; @@ -187,6 +208,14 @@ form button { line-height: 120%; /* 28.8px */ } +.note p{ + border: 1px solid transparent; /* Borde delgado inicialmente transparente */ +} + +#editable{ + border: solid 1px var(--Gray-4); +} + .buttons{ display: flex; gap: 8px; @@ -194,12 +223,13 @@ form button { } .option{ - width: 20px; - height: 20px; + width: 24px; + height: 24px; border-radius: 50%; border: 1px solid var(--Gray-2); cursor: pointer; transition: background-color 0.3s ease; + display: none; } .pink{ @@ -215,7 +245,10 @@ form button { } -.note .delete{ +.note .delete, +.note .edit, +.note .save, +.note .cancel{ display: flex; padding: 4px 16px; justify-content: center; @@ -223,22 +256,42 @@ form button { gap: 8px; border-radius: 16px; border: none; - background: var(--Gray-5); - color: var(--Gray-2); + color: var(--new-white); text-align: center; font-size: 18px; font-weight: 700; - line-height: 120%; /* 21.6px */ cursor: pointer; } -.delete:hover{ +.note .delete, +.note .cancel{ background-color: var(--error); - color: var(--new-white); } -.delete:hover svg path{ +.delete svg path{ fill: var(--new-white); } +.delete:hover{ + background: var(--Gray-5); + color: var(--Gray-2); +} + +.note .edit{ + background-color: var(--blue); +} + +.note .save{ + background-color: var(--green); +} + + +.edit-mode .option, +.edit-mode .delete, +.edit-mode .edit { + display: none; +} +.note .hide{ + display: none; +} \ No newline at end of file