ToDo List (VanillaJS)

A Vanilla JavaScript "Todo List" application with unit tests, ESLint, Prettier, and a development server with Vite. You can run it using Docker or directly with Node.js.

Offline Capability

• Fully functional without internet connection
• Once loaded, the application works completely offline
• Tasks are synced when tabs are open simultaneously

HTML	CSS	JavaScript	DOM	localStorage	Broadcast Channel API

🚀 Key Features

• 📝 Task Management: Create, edit, and delete todo items
• 💾 Persistent Storage: Tasks persist after browser reload/close using localStorage
• 🌐 Offline Functionality: Works completely offline - no internet required
• 🔄 Cross-Tab Sync: Real-time synchronization between browser tabs using Broadcast Channel API
• 📱 Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• ✅ Validation: Input validation with user-friendly error messages
• 🎨 Modern UI: Clean and intuitive user interface

🔧 How It Works

localStorage Persistence

• All tasks are automatically saved to the browser's localStorage
• Data persists even after closing the browser or restarting the computer
• No server required - everything runs client-side

Broadcast Channel API Synchronization

• Instant synchronization between multiple open tabs/windows
• Changes made in one tab immediately appear in all other tabs
• Perfect for users who work with multiple browser windows

📦 Other Technologies and Tools

Docker	Ubuntu

NodeJS	npm	Vite	Jest	PostCSS	ESLint	Prettier	Stylelint

Git	Git Hooks	GitHub Actions	CodeQL	Codecov

---

Run with Docker Compose

Start development server

docker-compose up frontend

Open http://localhost:3000 in your browser.

Run tests

docker-compose run --rm frontend-test

Stop and Remove Docker

docker-compose down

---

Run without Docker

Install dependencies

npm install

Start the dev server

npm run dev

Open http://localhost:3000 in your browser.

Run tests

npm test

Lint the code

npm run lint

Format the code

npm run format

---

📝 package.json Scripts

Command	Description
npm run dev	Start the local server (Vite)
npm test	Run tests using Jest
npm run lint	Run ESLint
npm run format	Format code using Prettier

---

back to top

MIT