Created
February 19, 2018 05:26
-
-
Save alejandrolechuga/c02113f588a1eefabdc5f68f740a307c to your computer and use it in GitHub Desktop.
TodoList
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" crossorigin="anonymous"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <h4>LISTA DE TAREAS</h4> | |
| <div class="todolist"> | |
| <div> | |
| <div class="input-group mb-3"> | |
| <input id="input-tarea" type="text" class="form-control" placeholder="Introduce tarea" aria-label="Recipient's username" aria-describedby="basic-addon2"> | |
| <div class="input-group-append"> | |
| <button id="button-agregar" class="btn btn-dark" type="button">Button</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lista"> | |
| <ul id="lista-tareas" class="list-group"> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
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
| /* jshint esnext: true */ | |
| // html - ids | |
| // input-tarea | |
| // button-agregar | |
| // lista-tareas | |
| var listaTareas = document.getElementById('lista-tareas') | |
| var lista = [ | |
| {id: 1, title: 'Comprar manzanas'}, | |
| {id: 1, title: 'Comprar peras'} | |
| ]; | |
| var contador = 0; | |
| listaTareas.innerHTML = ''; | |
| var buttonAgregar = document.getElementById('button-agregar'); | |
| var input = document.getElementById('input-tarea'); | |
| buttonAgregar.addEventListener('click' , function () { | |
| add(input.value); | |
| render(); | |
| }); | |
| listaTareas.addEventListener('click', function (event) { | |
| var element = event.target; | |
| var id = element.dataset.id; | |
| remove(id); | |
| render(); | |
| }); | |
| function add(tarea) { | |
| contador++; | |
| lista.push({id: contador, title: tarea}); | |
| } | |
| function remove(id) { | |
| var index = lista.findIndex(function (tarea) { | |
| return tarea.id === id; | |
| }); | |
| lista.splice(index, 1); | |
| } | |
| function template(tarea) { | |
| return `<li class="list-group-item"> | |
| <span data-id="${tarea.id}" class="ion-ios-trash"></span> | |
| ${tarea.title} | |
| </li>`; | |
| } | |
| function render() { | |
| var output = lista.map(template).join(''); | |
| listaTareas.innerHTML = output; | |
| } | |
| render(); |
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
| body { | |
| padding: 5px; | |
| } | |
| .todolist { | |
| background-color: gray; | |
| padding: 10px; | |
| } | |
| .ion-ios-trash { | |
| color: gray; | |
| cursor: pointer; | |
| position: absolute; | |
| right: 10px; | |
| top: 5px; | |
| font-size: 24px; | |
| display: inline-block | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment