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

Add modal for create notes #25

Merged
merged 4 commits into from
Jan 17, 2024
Merged

Add modal for create notes #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0a55fc3
Add modal for create notes
Daridjcm Jan 16, 2024
004c45d
Format documents with Prettier
Daridjcm Jan 16, 2024
f032a41
arreglando algunos cmabios
Michael-Liendo Jan 17, 2024
e775147
usando funcionalidad de agregar notas
Michael-Liendo Jan 17, 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
39 changes: 38 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<body class="px-4">
<header class="flex justify-between items-end mt-10">
<h1 class="text-4xl tracking-tighter">Your Notes</h1>
<button class="px-3 py-1 border border-black text-2xl rounded">+</button>
<button id="openDialogButton" class="px-3 py-1 border border-black text-2xl rounded">+</button>
</header>

<!-- Slider main container -->
Expand Down Expand Up @@ -130,6 +130,42 @@ <h3 class="font-bold mb-2">Título</h3>
</section>
</main>

<!-- Simple pop-up dialog box, containing a form -->
<div class="dialog p-8 w-full md:w-2/3 lg:w-1/2 xl:w-2/3">
<dialog id="editDialog" class="bg-white p-10 border border-neutral-800 rounded-2xl shadow-lg">
<form method="dialog" onsubmit="editElement(); return false;">
<section class="mb-8">
<label for="title" class="block text-md font-semibold text-neutral-900 mb-2">Title:</label>
<input class="w-full text-black p-2 border border-black rounded" type="text" id="title" required />
</section>
<section class="mb-8">
<label for="description" class="block text-md font-semibold text-neutral-900 mb-2">Description:</label>
<textarea rows="8" id="description" class="w-full border border-black rounded" required></textarea>
</section>
<menu class="flex justify-evenly">
<button id="cancel" type="reset" onclick="closeDialog()" class="mr-4 bg-red-500 text-white py-2 px-6 rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<path
fill="#ffffff"
d="M7 21q-.825 0-1.412-.587T5 19V6q-.425 0-.712-.288T4 5q0-.425.288-.712T5 4h4q0-.425.288-.712T10 3h4q.425 0 .713.288T15 4h4q.425 0 .713.288T20 5q0 .425-.288.713T19 6v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM7 6v13zm5 7.9l1.9 1.9q.275.275.7.275t.7-.275q.275-.275.275-.7t-.275-.7l-1.9-1.9l1.9-1.9q.275-.275.275-.7t-.275-.7q-.275-.275-.7-.275t-.7.275L12 11.1l-1.9-1.9q-.275-.275-.7-.275t-.7.275q-.275.275-.275.7t.275.7l1.9 1.9l-1.9 1.9q-.275.275-.275.7t.275.7q.275.275.7.275t.7-.275z"
/>
</svg>
</button>
<button type="submit" class="bg-green-500 text-white py-2 px-6 rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
<g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M20 19V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1Z" />
<path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
<animate fill="freeze" attributeName="stroke-dashoffset" dur="0.2s" values="14;0" />
</path>
</g>
</svg>
</button>
</menu>
</form>
</dialog>
</div>

<footer class="mb-4">
<div class="bg-slate-200 p-3 shadow-md hover:shadow-xl rounded">
<p class="text-center">
Expand All @@ -149,5 +185,6 @@ <h3 class="font-bold mb-2">Título</h3>
<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>
</body>
</html>
2 changes: 2 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,5 @@ function obtenerNotas() {

return notas;
}

createNote();
24 changes: 24 additions & 0 deletions modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
document.getElementById('openDialogButton').addEventListener('click', openDialog);
document.getElementById('cancel').addEventListener('click', closeDialog);
let editDialog = document.getElementById('editDialog');

function openDialog() {
editDialog.showModal();
}

function closeDialog() {
editDialog.close();
}

function editElement() {
var title = document.getElementById('title').value;
var description = document.getElementById('description').value;

if ((title, description)) {
createNote(title, description, new Date());
} else {
alert('Please, fill outs all fields.');
}
// Cerrar el diálogo después de la edición
closeDialog();
}