Last active
September 5, 2022 23:46
-
-
Save xqft/9c83d12cb860f09d5e8f5d1bf0ea9bc5 to your computer and use it in GitHub Desktop.
Trabajo grupal JaP 31/8, lista de tareas
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener('DOMContentLoaded', () => { | |
| const btnAgregar = document.querySelector('#agregar'); | |
| const lista = document.querySelector('#contenedor'); | |
| const titulo = document.querySelector('#titulo'); | |
| const grupoTitulo = document.querySelector('.needs-validation'); | |
| const descripcion = document.querySelector('#descripcion'); | |
| let listado = window.localStorage.getItem('lista'); | |
| listado = JSON.parse(listado) | |
| if (listado == null) | |
| listado = [] | |
| else | |
| for (const valor of listado) | |
| lista.innerHTML += `${valor}`; | |
| function agregarItem(titulo, descripcion, lista) { | |
| const contenido = `<li><h2>${titulo}</h2> <p>${descripcion}</p></li>`; | |
| lista.innerHTML += contenido; | |
| listado.push(contenido); | |
| window.localStorage.setItem('lista', JSON.stringify(listado)) | |
| } | |
| btnAgregar.addEventListener('click', ()=>{ | |
| if (titulo.value != '') | |
| agregarItem(titulo.value, descripcion.value, lista); | |
| else | |
| grupoTitulo.classList.add("was-validated"); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content=""> | |
| <title>Listado</title> | |
| <link href="css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="css/style.css" rel="stylesheet"> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container"> | |
| <main> | |
| <h1 class="my-3">Listado</h1> | |
| <hr class="my-4"> | |
| <div class="row mt-4 g-3"> | |
| <div class="col-sm-4"> | |
| <form> | |
| <div class="form-group needs-validation"> | |
| <label for="Item" class="form-label">Titulo:</label> | |
| <input type="text" class="form-control" id="titulo" required> | |
| <div class="invalid-feedback">Por favor escribe un titulo</div> | |
| </div> | |
| <label for="Item" class="form-label">Descripcion:</label> | |
| <textarea class="form-control" id="descripcion"></textarea> | |
| <div class="d-flex justify-content-between"> | |
| <button type="button" class="btn btn-primary my-3" id="agregar">Agregar tarea</button> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="col-sm-8 cont"> | |
| <div class="border rounded-3 text-wrap"> | |
| <ul class="list-group text-break" id="contenedor"> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="my-5 pt-5 text-muted text-center text-small"> | |
| <p class="mb-1">Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a> - 2022</p> | |
| <p class="mb-1">Generado con fines estrictamente educativos.</p> | |
| </footer> | |
| </div> | |
| <script src="js/almacenar.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment