Task List

100%

✓ Published0🌍 Public

Last edited Dec 11, 2019

Created on Dec 5, 2019

This interactive task list demonstrates how to add, filter, and delete tasks in a web application. Users type a new task into a form, submit it to create a list item, and can click a remove icon to delete individual entries with a confirmation dialog. A search field dynamically filters visible tasks as the user types, while a “Clear Tasks” button removes all entries at once. The code uses vanilla JavaScript event listeners for form submissions and clicks, jQuery for DOM manipulation, and Materialize CSS for styling the interface.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Gist 7facf6eee4cdc2d78b333fb54eafc2c9

This example demonstrates a dynamic task-management interface that updates in response to simulated HTTP polling data. The visualization shows a table of devices and their associated tasks, where each periodic response adds new tasks to existing devices or introduces entirely new device rows. Users can click on individual tasks to complete them, removing them from the display to free up space for future updates. The implementation uses plain JavaScript with a custom `getResponse` function to generate random device-task assignments, and the UI is built directly via the DOM API without external libraries, featuring a clean two-column layout for professional presentation.

WWill Carter

61% match

Loading thumbnail…

Todos

A todo list application demonstrates building interactive user interfaces with d3-component, using Redux for state management and d3 transitions for enter and exit animations. The interface supports adding, toggling, and filtering todos by visibility status. The code leverages d3-component’s render, create, and destroy lifecycle hooks, with transition calls animating list item size changes, and a key function binding data to DOM elements.

CCurran Kelleher

60% match

Loading thumbnail…

Fork of React Starter

A todo list application demonstrates CRUD operations with a clean, minimal interface. Built with React 16.13.1, the app uses the `useState` hook to manage task state and the `nanoid` library to generate unique IDs for each item. Users can add, edit, delete, and toggle task completion through a form, per-item buttons, and checkboxes. The interface displays the remaining task count dynamically, updating as tasks are added or removed. The code renders to the DOM via `ReactDOM.createRoot` and uses component-based architecture to separate form, task, and filter logic.

HHails

59% match

Loading thumbnail…

To-do list

This example shows a simple interactive to-do list titled “To get the Flow going,” presenting three checkbox items that ask about daily habits and ending with a self-affirmation. Built with React, it renders the list as JSX components, using the `useState`-less controlled inputs directly in the markup. The code imports a custom `todoItem` component that returns a list item with a checkbox and label, while the main `App` component composes three instances with hardcoded phrases. Styling is applied via plain CSS, setting a steelblue background and font size on the list container.

JJunyanL

59% match

Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K

59% match

Loading thumbnail…

Javascript

This example demonstrates a collection of JavaScript utilities for enhancing web page interactivity, focusing on user-input controls and navigation. It shows how keyboard and click events can be managed to prevent accidental data loss and to streamline table or list interactions. The code uses plain JavaScript with jQuery for DOM manipulation, including the `bind` method for event handling, `history.pushState` for URL updates without page reloads, and jQuery’s `prop` and `is` methods to toggle checkbox states. The snippets cover F5 key disabling, dynamic URL changes, and bulk selection of checkboxes, reflecting a typical admin-panel or form-heavy workflow.

IIliaIdakiev

58% match

Loading thumbnail…

Untitled

This example demonstrates a dynamic HTML list that displays five numeric values, with a button that removes the fourth value from the list. The page uses D3.js v4 to select the list items and bind the data array to them, dynamically generating each list item with a text string that includes the corresponding data value. The `d3.select` and `selectAll` methods apply the data to the existing `<li>` elements, while a custom `remove()` JavaScript function is defined but not implemented in the visible code. The styling uses basic CSS with an Arial font, and the page is built as a standalone HTML file.

AAS251998

57% match

Loading thumbnail…

Gist 68cc98468a08d322f2da

This example transforms a GitHub Gist into a visual to-do list, rendering each unchecked task as a draggable node. The code uses the D3.js library’s force-directed graph layout (`d3.forceSimulation`) to arrange the items and apply interactive physics. Each task is represented by a circle, and the list’s markdown structure is parsed directly from the Gist’s raw content. The visualization allows repositioning of nodes while preserving the original task order, offering a playful, spatial interaction with a simple text-based checklist.

EEleonore9

56% match