tmf / todos

Zero-dependency web application using custom elements, service workers, IndexedDB and unit tests

todos

A dependency-free todo application built with the modern capabilities of the web platform

This TodoMVC inspired example application demonstrates a more sustainable way to create web applications: without external code dependencies.

Features

• 📦 No external code dependencies
• ✅ Unit tests
• 🌈 Progressive web application
• 🤖 Automated workflows
• 🎇 Lighthouse score 100/100
• 🧩 Custom elements

Demo

🚀 tmf.github.io/todos

Requirements

There are no external code dependencies, the only requirements for running this application are:

• a HTTPS web server: Apache HTTP Server, nginx, Github Pages, Cloudflare Pages, ...
• a browser: Firefox, Chrome, Safari, Edge, ...

See Get started locally for instructions.

Example

Here is a simple example HTML snippet to show a <todo-list> element:

<todo-list>
	<todo-item completed>Write Readme</todo-item>
	<todo-item>Write HTML</todo-item>
	<todo-item>Write CSS</todo-item>
</todo-list>

<script type="module" src="https://tmf.github.io/todos/elements/todo-list/custom-element.js"></script>
<script type="module" src="https://tmf.github.io/todos/elements/todo-item/custom-element.js"></script>

Documentation

• Setup
• Web Application
  • HTML
  • Service Worker
  • Styles
  • Classes
    • OfflineCache
  • Custom Elements
    • <todos-list>
    • <todos-item>
• Workflows
  • Lighthouse
  • SonarCloud

License

This project is licensed under the MIT license.