Last active
August 13, 2025 14:50
-
-
Save mcascardi/3f74cc125be41d857e4f10b25af652d3 to your computer and use it in GitHub Desktop.
Simple todo UI application
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
| <html lang="en"><head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> | |
| <title>Editor code</title> | |
| <style> | |
| ul { padding-left: 0 } | |
| li { | |
| list-style-type: none; | |
| margin-let: 0; | |
| padding-left: 0; | |
| } | |
| </style> | |
| <script> | |
| const todo = { | |
| "init" : () => { | |
| $('h1').text('My Todo App!'); | |
| $('form#todo_input').submit((event) => { | |
| event.preventDefault(); | |
| const textField = $('#text_input'); | |
| todo.addItem($(textField).val()) | |
| $(textField).val(null); | |
| }); | |
| }, | |
| "items": [ | |
| { "text": "List Item 1", "done": false } | |
| ], | |
| activeFilter: null, | |
| "showAll" : () => { | |
| console.log(' Show all items (clear all filters)') | |
| $('ul#todo_list > li').each( (i, el) => { | |
| const isComplete = todo.isComplete(el); | |
| $(el).show(); | |
| }); | |
| }, | |
| "isComplete" : (el) => { | |
| const doneBox = $(el).children('input[type=checkbox]'); | |
| return $(doneBox).prop('checked'); | |
| }, | |
| "showActive" : () => { | |
| console.log('Show active items (hide completed)'); | |
| $('ul#todo_list > li').each( (i, el ) => { | |
| if (todo.isComplete(el)) { | |
| $(el).hide(); | |
| } else { | |
| $(el).show(); | |
| } | |
| }); | |
| }, | |
| "showComplete" : () => { | |
| console.log('Show completed only (hide active)'); | |
| $('ul#todo_list > li').each( (i, el ) => { | |
| if (todo.isComplete(el)) { | |
| $(el).show(); | |
| } else { | |
| $(el).hide(); | |
| } | |
| }); | |
| }, | |
| "addItem": (text, isComplete = false) => { | |
| if (!text.trim().length) return; | |
| const prop = isComplete ? 'checked="checked"' : ''; | |
| const newItem = `<li> <input type="checkbox" ${isComplete}> ${text} <button onclick="todo.removeItem(this)">X</button> </li>`; | |
| const todoList = $('ul#todo_list'); | |
| $(todoList).append(newItem); | |
| }, | |
| "removeItem" : (ele) => { | |
| $(ele).closest('li').remove(); | |
| } | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <h1>My Todo App!</h1> | |
| <main> | |
| <p>Todo list</p> | |
| <button onclick="todo.showAll()">All</button> | |
| <button onclick="todo.showActive()">Active</button> | |
| <button onclick="todo.showComplete()">Complete</button> | |
| <form id="todo_input"> | |
| <input id="text_input" type="text"> <input type="submit" value="Add"> | |
| <ul id="todo_list"> | |
| <!-- Example item --> | |
| <li> <input type="checkbox"> List Item 1 <button onclick="todo.removeItem(this)">X</button> </li> | |
| </ul> | |
| </form> | |
| </main> | |
| <script> | |
| $(document).ready(function () { | |
| todo.init() | |
| // Setup done | |
| }); | |
| </script></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment