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

Process deploy #32

Closed
wants to merge 10 commits into from
Closed

Process deploy #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 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
20f468e
Add Vercel configuration
Daridjcm Jan 26, 2024
84a57ed
Fix for checks in the CLI
Daridjcm Jan 26, 2024
ab722bc
Change paths of Javascript files
Daridjcm Jan 26, 2024
15163f4
Add type module for scripts
Daridjcm Jan 26, 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 .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ dist-ssr
*.njsproj
*.sln
*.sw?
.vercel
7 changes: 7 additions & 0 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
output: 'server',
adapter: vercel(),
});
7 changes: 4 additions & 3 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 Expand Up @@ -131,8 +132,8 @@ <h1 class="text-4xl tracking-tighter">Your Notes</h1>
</footer>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="/main.js"></script>
<script src="/swiper.js"></script>
<script src="/modal.js"></script>
<script src="./main.js" type="module"></script>
<script src="./swiper.js" type="module"></script>
<script src="./modal.js" type="module"></script>
</body>
</html>
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
Loading