Skip to content

Commit

Permalink
completing pending tasks, adding others
Browse files Browse the repository at this point in the history
  • Loading branch information
@gavrojas
gavrojas committed Jul 5, 2024
1 parent 9d4aef7 commit f3eedfd
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 27 deletions.
10 changes: 7 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

75 changes: 64 additions & 11 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ function displayAllNotes() {
<button class="option pink" onclick="changeColor(this)"></button>
<button class="option green" onclick="changeColor(this)"></button>
<button class="option blue" onclick="changeColor(this)"></button>
<button class="btn-edit" onclick="editNote(this)">Editar</button>
<button class="edit" onclick="editNote(this)">Editar<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.83331 5.83334H4.99998C4.55795 5.83334 4.13403 6.00894 3.82147 6.3215C3.50891 6.63406 3.33331 7.05798 3.33331 7.50001V15C3.33331 15.442 3.50891 15.866 3.82147 16.1785C4.13403 16.4911 4.55795 16.6667 4.99998 16.6667H12.5C12.942 16.6667 13.3659 16.4911 13.6785 16.1785C13.9911 15.866 14.1666 15.442 14.1666 15V14.1667" stroke="#FAF6F6" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.3333 4.16666L15.8333 6.66666M16.9875 5.4875C17.3157 5.15929 17.5001 4.71415 17.5001 4.25C17.5001 3.78585 17.3157 3.3407 16.9875 3.0125C16.6593 2.68429 16.2142 2.49991 15.75 2.49991C15.2858 2.49991 14.8407 2.68429 14.5125 3.0125L7.5 10V12.5H10L16.9875 5.4875Z" stroke="#FAF6F6" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<button class="save hide" onclick="saveNoteEdit(this)">Guardar<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12.6667 2.5C13.1063 2.50626 13.5256 2.68598 13.8333 3L17 6.16667C17.314 6.47438 17.4937 6.89372 17.5 7.33333V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V4.16667C2.5 3.72464 2.67559 3.30072 2.98816 2.98816C3.30072 2.67559 3.72464 2.5 4.16667 2.5H12.6667Z" stroke="#FAF6F6" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.1666 17.5V11.6667C14.1666 11.4457 14.0788 11.2337 13.9226 11.0774C13.7663 10.9211 13.5543 10.8333 13.3333 10.8333H6.66665C6.44563 10.8333 6.23367 10.9211 6.07739 11.0774C5.92111 11.2337 5.83331 11.4457 5.83331 11.6667V17.5M5.83331 2.5V5.83333C5.83331 6.05435 5.92111 6.26631 6.07739 6.42259C6.23367 6.57887 6.44563 6.66667 6.66665 6.66667H12.5" stroke="#FAF6F6" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<button class="cancel hide" onclick="cancelNoteEdit(this)">Cancelar<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M7.00002 14.1667L10 11.1667L13 14.1667L14.1667 13L11.1667 9.99999L14.1667 6.99999L13 5.83332L10 8.83332L7.00002 5.83332L5.83335 6.99999L8.83335 9.99999L5.83335 13L7.00002 14.1667ZM10 18.3333C8.84724 18.3333 7.76391 18.1144 6.75002 17.6767C5.73613 17.2389 4.85419 16.6453 4.10419 15.8958C3.35419 15.1464 2.76058 14.2644 2.32335 13.25C1.88613 12.2355 1.66724 11.1522 1.66669 9.99999C1.66613 8.84777 1.88502 7.76443 2.32335 6.74999C2.76169 5.73555 3.3553 4.8536 4.10419 4.10416C4.85308 3.35471 5.73502 2.7611 6.75002 2.32332C7.76502 1.88555 8.84835 1.66666 10 1.66666C11.1517 1.66666 12.235 1.88555 13.25 2.32332C14.265 2.7611 15.147 3.35471 15.8959 4.10416C16.6447 4.8536 17.2386 5.73555 17.6775 6.74999C18.1164 7.76443 18.335 8.84777 18.3334 9.99999C18.3317 11.1522 18.1128 12.2355 17.6767 13.25C17.2406 14.2644 16.647 15.1464 15.8959 15.8958C15.1447 16.6453 14.2628 17.2392 13.25 17.6775C12.2372 18.1158 11.1539 18.3344 10 18.3333ZM10 16.6667C11.8611 16.6667 13.4375 16.0208 14.7292 14.7292C16.0209 13.4375 16.6667 11.8611 16.6667 9.99999C16.6667 8.13888 16.0209 6.56249 14.7292 5.27082C13.4375 3.97916 11.8611 3.33332 10 3.33332C8.13891 3.33332 6.56252 3.97916 5.27085 5.27082C3.97919 6.56249 3.33335 8.13888 3.33335 9.99999C3.33335 11.8611 3.97919 13.4375 5.27085 14.7292C6.56252 16.0208 8.13891 16.6667 10 16.6667Z" fill="#FAF6F6"/></svg></button>
<button class="delete" onclick="deleteNote(this)">Borrar<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.83337 17.5C5.37504 17.5 4.98282 17.3369 4.65671 17.0108C4.3306 16.6847 4.16726 16.2922 4.16671 15.8333V5H3.33337V3.33333H7.50004V2.5H12.5V3.33333H16.6667V5H15.8334V15.8333C15.8334 16.2917 15.6703 16.6842 15.3442 17.0108C15.0181 17.3375 14.6256 17.5006 14.1667 17.5H5.83337ZM14.1667 5H5.83337V15.8333H14.1667V5ZM7.50004 14.1667H9.16671V6.66667H7.50004V14.1667ZM10.8334 14.1667H12.5V6.66667H10.8334V14.1667Z" fill="#4F4F4F"/></svg></button>
</div>
`;
Expand Down Expand Up @@ -77,7 +79,9 @@ function addNote (){
<button class="option pink" onclick="changeColor(this)"></button>
<button class="option green" onclick="changeColor(this)"></button>
<button class="option blue" onclick="changeColor(this)"></button>
<button class="btn-edit" onclick="editNote(this)">Editar</button>
<button class="edit" onclick="editNote(this)">Editar<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.83331 5.83334H4.99998C4.55795 5.83334 4.13403 6.00894 3.82147 6.3215C3.50891 6.63406 3.33331 7.05798 3.33331 7.50001V15C3.33331 15.442 3.50891 15.866 3.82147 16.1785C4.13403 16.4911 4.55795 16.6667 4.99998 16.6667H12.5C12.942 16.6667 13.3659 16.4911 13.6785 16.1785C13.9911 15.866 14.1666 15.442 14.1666 15V14.1667" stroke="#FAF6F6" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.3333 4.16666L15.8333 6.66666M16.9875 5.4875C17.3157 5.15929 17.5001 4.71415 17.5001 4.25C17.5001 3.78585 17.3157 3.3407 16.9875 3.0125C16.6593 2.68429 16.2142 2.49991 15.75 2.49991C15.2858 2.49991 14.8407 2.68429 14.5125 3.0125L7.5 10V12.5H10L16.9875 5.4875Z" stroke="#FAF6F6" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<button class="save hide" onclick="saveNoteEdit(this)">Guardar<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M12.6667 2.5C13.1063 2.50626 13.5256 2.68598 13.8333 3L17 6.16667C17.314 6.47438 17.4937 6.89372 17.5 7.33333V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V4.16667C2.5 3.72464 2.67559 3.30072 2.98816 2.98816C3.30072 2.67559 3.72464 2.5 4.16667 2.5H12.6667Z" stroke="#FAF6F6" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/><path d="M14.1666 17.5V11.6667C14.1666 11.4457 14.0788 11.2337 13.9226 11.0774C13.7663 10.9211 13.5543 10.8333 13.3333 10.8333H6.66665C6.44563 10.8333 6.23367 10.9211 6.07739 11.0774C5.92111 11.2337 5.83331 11.4457 5.83331 11.6667V17.5M5.83331 2.5V5.83333C5.83331 6.05435 5.92111 6.26631 6.07739 6.42259C6.23367 6.57887 6.44563 6.66667 6.66665 6.66667H12.5" stroke="#FAF6F6" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<button class="cancel hide" onclick="cancelNoteEdit(this)">Cancelar<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M7.00002 14.1667L10 11.1667L13 14.1667L14.1667 13L11.1667 9.99999L14.1667 6.99999L13 5.83332L10 8.83332L7.00002 5.83332L5.83335 6.99999L8.83335 9.99999L5.83335 13L7.00002 14.1667ZM10 18.3333C8.84724 18.3333 7.76391 18.1144 6.75002 17.6767C5.73613 17.2389 4.85419 16.6453 4.10419 15.8958C3.35419 15.1464 2.76058 14.2644 2.32335 13.25C1.88613 12.2355 1.66724 11.1522 1.66669 9.99999C1.66613 8.84777 1.88502 7.76443 2.32335 6.74999C2.76169 5.73555 3.3553 4.8536 4.10419 4.10416C4.85308 3.35471 5.73502 2.7611 6.75002 2.32332C7.76502 1.88555 8.84835 1.66666 10 1.66666C11.1517 1.66666 12.235 1.88555 13.25 2.32332C14.265 2.7611 15.147 3.35471 15.8959 4.10416C16.6447 4.8536 17.2386 5.73555 17.6775 6.74999C18.1164 7.76443 18.335 8.84777 18.3334 9.99999C18.3317 11.1522 18.1128 12.2355 17.6767 13.25C17.2406 14.2644 16.647 15.1464 15.8959 15.8958C15.1447 16.6453 14.2628 17.2392 13.25 17.6775C12.2372 18.1158 11.1539 18.3344 10 18.3333ZM10 16.6667C11.8611 16.6667 13.4375 16.0208 14.7292 14.7292C16.0209 13.4375 16.6667 11.8611 16.6667 9.99999C16.6667 8.13888 16.0209 6.56249 14.7292 5.27082C13.4375 3.97916 11.8611 3.33332 10 3.33332C8.13891 3.33332 6.56252 3.97916 5.27085 5.27082C3.97919 6.56249 3.33335 8.13888 3.33335 9.99999C3.33335 11.8611 3.97919 13.4375 5.27085 14.7292C6.56252 16.0208 8.13891 16.6667 10 16.6667Z" fill="#FAF6F6"/></svg></button>
<button class="delete" onclick="deleteNote(this)">Borrar<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.83337 17.5C5.37504 17.5 4.98282 17.3369 4.65671 17.0108C4.3306 16.6847 4.16726 16.2922 4.16671 15.8333V5H3.33337V3.33333H7.50004V2.5H12.5V3.33333H16.6667V5H15.8334V15.8333C15.8334 16.2917 15.6703 16.6842 15.3442 17.0108C15.0181 17.3375 14.6256 17.5006 14.1667 17.5H5.83337ZM14.1667 5H5.83337V15.8333H14.1667V5ZM7.50004 14.1667H9.16671V6.66667H7.50004V14.1667ZM10.8334 14.1667H12.5V6.66667H10.8334V14.1667Z" fill="#4F4F4F"/></svg></button>
</div>
`;
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</head>
<body>
<header>
<h1>Mis notas</h1>
<h1 class="">Mis notas</h1>
</header>
<main>
<div class="container-principal">
Expand Down
77 changes: 65 additions & 12 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
--Gray-6: #F2F2F2;
--new-white: #FFFCFC;
--error: #E96262;
--blue: #62B0E9;
--green: #5D8456;
}

* {
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -58,17 +68,25 @@ 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;
gap: 8px;
align-self: stretch;
}

#form{
/* position: fixed; */
top: 80px;
z-index: 999;
}

form label{
align-self: flex-start;
font-size: 18px;
Expand Down Expand Up @@ -126,6 +144,7 @@ form button {

.list-notes{
width: 100%;
/* position: sticky; */
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -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; */
Expand Down Expand Up @@ -179,27 +199,37 @@ form button {
margin-right: -6px;
}

.note p{
.note p,
.note input{
align-self: stretch;
color: var(--Gray-1);
font-size: 24px;
font-weight: 400;
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;
align-items: center;
}

.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{
Expand All @@ -215,30 +245,53 @@ form button {
}


.note .delete{
.note .delete,
.note .edit,
.note .save,
.note .cancel{
display: flex;
padding: 4px 16px;
justify-content: center;
align-items: center;
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;
}

0 comments on commit f3eedfd

Please sign in to comment.