Created
September 14, 2020 02:27
-
-
Save master-stm/e70e08d639761af7e60c1eb1780203ba to your computer and use it in GitHub Desktop.
one page todo app
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="en"> | |
| <head> | |
| <title>Todo App</title> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| <style> | |
| .crossed{ | |
| text-decoration: line-through; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container my-5"> | |
| <div class="row"> | |
| <input id="todoText" type="text" class="col-md-8"> | |
| <input onclick="addTodo()" class="btn btn-primary col-md-2 mx-1" type="button" value="Add"> | |
| </div> | |
| </div> | |
| <!-- Optional JavaScript --> | |
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> | |
| <script> | |
| function addTodo(){ | |
| const todoText = $('#todoText').val(); | |
| const input = '<input class="col-md-2 todoText" type="checkbox" >' | |
| const header4 = `<h4 class="col-md-8 ">${todoText}</h4>` | |
| const deleteButton = '<button class="col-md-2 btn btn-danger deleteButton">delete</button>' | |
| const div = `<div class="row my-2">${input}${header4}${deleteButton}</div>` | |
| $('.container').append(div) | |
| $('#todoText').val('') | |
| } | |
| $("#todoText").keydown( e => { | |
| if (e.keyCode == 13) { | |
| $('#todoText').siblings().eq(0).click(); | |
| } | |
| }); | |
| $(document).delegate('.todoText', 'change', function (event) { | |
| // event.target is the element | |
| $(event.target).siblings().eq(0).toggleClass('crossed') | |
| }); | |
| $(document).delegate('.deleteButton', 'click', function (event) { | |
| // event.target is the element | |
| $(event.target).parent().remove() | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment