Skip to content

e-gineering/to-do-web-components-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Web Components ToDo App (Baseline 2025)

Demo ToDo app using pure vanilla Web Components, with:

  • State management in the root
  • Routing via History API
  • <form> for input
  • Nested CSS and container queries
  • Nested components: todo-list and todo-form with input/output events
  • LocalStorage "backend" with simulated 400ms delay
  • Uses Baseline 2025 features: container queries, declarative shadow DOM, etc.

Features

  • Add, edit, delete todos
  • Routing: / (list), /add, /edit?id=...
  • All code is modern, no framework, just native browser features

Run

Open index.html directly in a modern browser (Chrome, Edge, Firefox, Safari 2025+).

Files

  • index.html — Entry point
  • app-root.js — Application root, routing, state
  • todo-list.js — List component
  • todo-form.js — Form component

CSS Features

  • Nested selectors
  • Container queries (works in Baseline 2025)
  • CSS variables

Notes

  • Data is stored in LocalStorage.
  • Fake backend delays (400ms) for all mutations.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published