Todo

100%

✓ Published0🌍 Public

Last edited Jun 29, 2018

Created on Jun 29, 2018

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.

AI-generated description

Similar vizzes

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

68% match

Loading thumbnail…

Task List

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.

Bbukbukbukka

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…

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…

Vue Starter

This example demonstrates the fundamental concept of component composition in Vue.js by rendering a static list of two todo items. The page displays an ordered list where each item is generated through a custom globally registered component called `todo-item`. The implementation uses Vue's `Vue.component()` API to define the component template, and `new Vue()` instantiation to mount the application to the `#app` DOM element. The code imports Vue 2 from a CDN and uses inline templates for simplicity, with styling applied directly in the HTML head.

CCurran Kelleher

59% match

Loading thumbnail…

React 101

This React 101 example demonstrates a hands-on teaching environment for the React library, showcasing functional components and props through a simple todo list. The header component (`Header.js`) dynamically changes its greeting and text color based on the current hour of the day, while the main list renders three todo items from a static `todosData` array. The app uses `ReactDOM.render()` to mount the root `App` component, which combines `Header`, `TodoItem`, and `Footer` components, with each `TodoItem` receiving its data via React props. Styling is applied through a linked CSS file, and the example leverages React 16.13.1 from unpkg.

Ddata-inside

59% match

Loading thumbnail…

Gist 8019475

This example demonstrates an AngularJS directive that integrates the Marked library to render Markdown text as HTML. The directive supports both static content and dynamic bindings, dynamically updating the output when the bound value changes. It can be applied as an attribute or element, accepts optional configuration options through the `opts` attribute, and enables file inclusion via Angular's built-in `ng-include` directive. The code defines an Angular module named `marked` and uses dependency injection for the Marked library and HTTP service.

HHypercubed

59% match

Loading thumbnail…

Improved angularjs markdown provider/filter/directive

This example demonstrates an AngularJS provider, filter, and directive that render Markdown into HTML. It uses the Showdown converter to process text, with a provider that allows configuring default options, such as enabling GitHub-flavored extensions. The filter and directive both invoke `makeHtml` to transform input, while the directive supports binding to scope elements, external files via `ng-include`, and attribute-based text or options. The code also includes a filter that applies the converter to any AngularJS expression, showcasing a reusable approach for embedding Markdown content in views.

HHypercubed

58% match