Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Functionality of delete note button and add icons #31

Merged
merged 6 commits into from
Jan 25, 2024
Merged

feat: Functionality of delete note button and add icons #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0a55fc3
Add modal for create notes
Daridjcm Jan 16, 2024
11c83f1
Merge branch 'main' of https://github.com/Michael-Liendo/todo-list-app
Daridjcm Jan 17, 2024
bf022e5
Merge branch 'main' of https://github.com/Michael-Liendo/todo-list-app
Daridjcm Jan 24, 2024
9bf9a38
Add delete note button
Daridjcm Jan 25, 2024
c368afc
Refactor code
Daridjcm Jan 25, 2024
25191b0
Apply format Prettier
Daridjcm Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<title>Vite App</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://kit.fontawesome.com/2e825056d4.js" crossorigin="anonymous"></script>
</head>

<body class="px-4">
Expand Down
106 changes: 76 additions & 30 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,39 @@ AgregarNotasAlDOM();
function AgregarNotasAlDOM() {
let notes = obtenerNotas();

notes.forEach((note) => {
notes.forEach((note, index) => {
const date = new Date(note.date);
notesContainer.innerHTML += `
<div class="card bg-slate-100 border border-black shadow-lg rounded-2xl p-5 m-3 hover:shadow-xl transition-all">
<h3 class="font-bold mb-2">${note.title}</h3>
<p class="font-light mb-4">${date.toLocaleString('en-US', { day: '2-digit', month: 'numeric', year: '2-digit' })}</p>
<p class="font-light">
${note.description}
</p>
</div>
const noteElement = document.createElement('div');
noteElement.classList.add(
'card',
'bg-slate-100',
'border',
'border-black',
'shadow-lg',
'rounded-2xl',
'm-3',
'hover:shadow-xl',
'transition-all',
);
noteElement.innerHTML = `
<h3 class="font-bold mb-1 p-2">${note.title}</h3>
<p class="font-light mb-1 p-2">${date.toLocaleString('en-US', { day: '2-digit', month: 'numeric', year: '2-digit' })}</p>
<div class="font-light p-2">${note.description}</div>
<div class="p-2 cursor-pointer btnDeleteNote">
<i class="fas fa-trash-can" style="color: red;"></i>
</div>
`;

notesContainer.appendChild(noteElement);

// Add click event listener to each delete button
const deleteButton = noteElement.querySelector('.btnDeleteNote');
deleteButton.addEventListener('click', function () {
deleteNote(index);
});
});
}

/**
* Función para crear notas almacenándolas en el localStorage
* @param {string} title
* @param {string} description
* @param {date} date
*/
function createNote(title, description, date) {
const note = {
title: title,
Expand All @@ -38,24 +51,57 @@ function createNote(title, description, date) {

localStorage.setItem('notes', noteObjectString);

notesContainer.innerHTML =
`
<div class="card bg-slate-100 border border-black shadow-lg rounded-2xl p-5 m-3 hover:shadow-xl transition-all">
<h3 class="font-bold mb-2">${note.title}</h3>
<p class="font-light mb-4">${date.toLocaleString('en-US', { day: '2-digit', month: 'numeric', year: '2-digit' })}</p>
<p class="font-light">
${note.description}
</p>
</div>
` + notesContainer.innerHTML;
// Render the new note
const noteElement = document.createElement('div');
noteElement.classList.add(
'card',
'bg-slate-100',
'border',
'border-black',
'shadow-lg',
'rounded-2xl',
'm-3',
'hover:shadow-xl',
'transition-all',
);
noteElement.innerHTML = `
<h3 class="font-bold mb-1 p-2">${note.title}</h3>
<p class="font-light mb-1 p-2">${date.toLocaleString('en-US', { day: '2-digit', month: 'numeric', year: '2-digit' })}</p>
<div class="font-light p-2">${note.description}</div>
<div class="p-2 cursor-pointer btnDeleteNote">
<i class="fas fa-trash-can" style="color: red;"></i>
</div>
`;

notesContainer.appendChild(noteElement);

// Add click event listener to the delete button of the new note
const deleteButton = noteElement.querySelector('.btnDeleteNote');
deleteButton.addEventListener('click', function () {
deleteNote(lastNotes.length); // Index of the new note
});
}

function deleteNote(index) {
let notes = obtenerNotas();
notes.splice(index, 1);
localStorage.setItem('notes', JSON.stringify(notes));

// Remove the note from the DOM
notesContainer.innerHTML = '';
AgregarNotasAlDOM();
}

/**
* función para obtener las notas del localstorage
* @returns {Array} notas
*/
function obtenerNotas() {
const notas = JSON.parse(localStorage.getItem('notes') ?? '[]');

return notas;
}

document.getElementById('btnDeleteNotes').addEventListener('click', function () {
deleteNotes();
});

function deleteNotes() {
localStorage.removeItem('notes');
notesContainer.innerHTML = '';
}
Loading