Giter VIP home page Giter VIP logo

todomvc's Introduction

TodoMVC: Rust + HTMX Edition

Simple todo app built using a combination of the following technologies:

  • For the backend, we've used Rust along with Axum.
  • The SSR (Server-Side Rendering) templates are powered by Askama.
  • The user interface (UI) is designed with HTMX.
  • Styling and layout are crafted using the Bulma CSS framework.

todomvc demo

Features at a Glance

No todos

  • When you haven't added any todos, the counters show zero and the buttons are disabled.

Adding new todos

  • To add a new task, simply type it into the input field at the top. The input field is automatically focused when you open the app.
  • Press the Enter key to create a new todo, which will be added to your list. The input field will then be cleared and ready for your next task.

Marking all as complete

  • The "Mark All as Complete" button allows you to mark or unmark all todos with a single click.
  • The button also responds dynamically as you check or uncheck individual todo items.
  • If there are no todos, the button is disabled to avoid confusion.

Managing individual todos

Each todo item has several convenient actions:

  1. Check: Click the checkbox to mark a task as complete or incomplete. This updates the status of the task.
  2. Edit: Edit the title of a todo by double-clicking on it.
  3. Delete: Remove a task by clicking the delete button.

Editing individual todos

  • Double-clicking on a todo to edit it triggers an editing mode. The todo title becomes an editable input field.
  • Just press Enter to save your changes and exit the editing mode.

State counters

  • The counters display the number of todos in different states.

Cleaning up completed tasks

  • The "Clear Completed" button removes the completed todos.
  • When no completed todos are present, the button is disabled to prevent confusion.

Data persistence

  • The todos are stored in the server's memory. Restarting the server will erase the data.

todomvc's People

Contributors

yarox avatar

Stargazers

Marius Wörfel avatar Vanius Bittencourt avatar Enrique Marín avatar Francesco Paoletti avatar Jarrian Gojar avatar Jamal Burgess avatar

Watchers

 avatar

Forkers

vaniusrb

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.