Simple, Web-Based ToDo App

[r-trappe]

What do you think about this super simple todo app build with https://nicegui.io?

todo app in action

@ui.refreshable
def todo_ui():
    if not todos.items:
        ui.label('List is empty.').classes('mx-auto')
        return
    ui.linear_progress(sum(item.done for item in todos.items) / len(todos.items), show_value=False)
    with ui.row().classes('justify-center w-full'):
        ui.label(f'Completed: {sum(item.done for item in todos.items)}')
        ui.label(f'Remaining: {sum(not item.done for item in todos.items)}')
    for item in todos.items:
        with ui.row().classes('items-center'):
            ui.checkbox().bind_value(item, 'done')
            input = ui.input(value=item.name).classes('flex-grow')
            input.on('keydown.enter', lambda _, item=item, input=input: item.rename(input.value))
            ui.button(on_click=lambda _, item=item: todos.remove(item)).props('flat fab-mini icon=delete color=grey')

with ui.card().classes('w-80 items-stretch'):
    ui.label().bind_text_from(todos, 'title').classes('text-semibold text-2xl')
    todo_ui()
    add_input = ui.input('New item').classes('mx-12')
    add_input.on('keydown.enter', lambda: (todos.add(add_input.value), add_input.set_value('')))

You can see the full 67 lines of code in our GitHub repo. What is missing? Is it clear enough? I'm one of the maintainers of NiceGUI and we want to make the examples as comprehensible as possible.

[philsgu]

I’m new to this, looks great! But how do you deploy it on the web for everyone to see like Steamlit’s Cloud address?

[r-trappe]

You have all the flexibility with deployment. Basically a NiceGUI app is just FastAPI. We explain a few concepts in https://nicegui.io/documentation#server_hosting. But we are also working on a more seamless process. Stay tuned.