Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Tarea Arreglos

    Cargado por

    Rigoberto Estrella Sosa
    5 vistas3 páginas
    arrelgos

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    arrelgos

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    5 vistas3 páginas

    Tarea Arreglos

    Cargado por

    Rigoberto Estrella Sosa
    arrelgos

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    Html

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css"
    href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
    <script type="text/javascript" src="todo.js"></script>
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-md-6">
    <div class="todolist">
    <h1>Lista de tareas</h1>
    <input type="text" id="todo" class="form-control" placeholder="Aadir
    tarea"><br>
    <a href="" id="add" class="btn btn-success">Aadir
    tarea</a>
    <hr>
    <ul id="todoList" class="list-unstyled">
    </ul>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Js
    window.addEventListener("load", init);
    var todos = [];
    function init()
    {
    var add = document.querySelector("#add");
    add.addEventListener("click", addTodo);
    }
    function addTodo(event)
    {
    //prevenimos el evento del enlace
    event.preventDefault();
    //comprobamos que tenga texto
    if(document.querySelector("#todo").value === "") return;

    var li =
    {
    index: todos.length + 1,
    value: document.querySelector("#todo").value
    };
    todos.push(li);
    displayTodos(li);

    function displayTodos(li)
    {
    //creamos el elemento li
    var node = document.createElement("li");
    node.classList.add("col-md-12");
    node.id = "todo"+li.index;
    //creamos el contenido del elementi li
    var textnode = document.createTextNode(li.value);
    node.appendChild(textnode);
    document.querySelector("#todoList").appendChild(node);
    document.querySelector("#todo").value = "";
    //aadimos el botn
    var deleteButton = createButton(li);
    node.appendChild(deleteButton);
    }
    function createButton(li)
    {
    //creamos un input
    var todo = document.createElement("input");
    //de tipo button

    todo.type = "button";
    //aadimos un margen
    todo.style.marginTop = "12px";
    //flotamos a la derecha
    todo.style.float = "right";
    //el texto del input
    todo.value = "Eliminar";
    //aadimos un margen
    todo.style.marginLeft = "15px";
    //aadimos varias clases
    todo.classList.add("removeTodo", "btn", "btn-danger");
    //aadimos el evento click para que sea eliminado
    todo.onclick = function()
    {
    var toDelete = document.querySelector('#todo'+li.index);
    toDelete.parentNode.removeChild(toDelete);
    };
    //devolvemos el nuevo elemento
    return todo;
    }

    También podría gustarte