https://github.com/pernille-k/todo-list
A simple to do-list created using Electron.js. Add, edit, delete tasks and track progress with a color-changing background!
https://github.com/pernille-k/todo-list
app cross-platform css desktop-app electron electron-forge html javascript nodejs productivity task-manager todo-list
Last synced: 3 months ago
JSON representation
A simple to do-list created using Electron.js. Add, edit, delete tasks and track progress with a color-changing background!
- Host: GitHub
- URL: https://github.com/pernille-k/todo-list
- Owner: Pernille-K
- Created: 2025-04-14T16:36:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-23T21:30:53.000Z (about 1 year ago)
- Last Synced: 2025-05-11T23:06:01.333Z (about 1 year ago)
- Topics: app, cross-platform, css, desktop-app, electron, electron-forge, html, javascript, nodejs, productivity, task-manager, todo-list
- Language: JavaScript
- Homepage:
- Size: 125 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Todo-list
A simple and colorful to-do list app created with **Electron.js**.
Stay organized with your daily tasks, and get visual feedback with a background that changes color to track your progress. Perfect for simple planning and satisfying completions ✨
## ⚙️ Features
- ✅ Add, edit, and delete todos
- 🎨 Background color changes depending on how many tasks you've completed
- 🪟 Custom title bar with minimize, maximize, and close buttons (window controls)
- 📦 Lightweight and easy to install on Windows
## 🚀 Why Electron?
Electron makes it possible to build **cross-platform desktop apps** using web technologies (HTML, CSS, and JavaScript). I chose Electron because:
- I wanted to learn desktop app development
- It's beginner-friendly with great documentation
- It works on multiple platforms (Windows, macOS, Linux)
- It gave me full control over design and features (like the custom title bar ✨)
## 🔨 How to run the App (as a developer)
1. Clone or download this repo
2. Open a terminal in the project folder
3. Run:
```bash
npm install
npm start
```
The app will start in development mode.
## 📦 How to Create a Desktop Installer
> You can install this on your dekstop, or send it to friends and family, and they can install it like a regular program 💻
### 🪟 For Windows
1. Run
```bash
npm run make
```
2. Your _.exe_ file will be located at:
```csharp
out\make\squirrel.windows\x64\TodoApp-1.0.0 Setup.exe
```
### 🍏 For macOS
You can only build a macOS installer **on a Mac**.
1. Run
```bash
npm run make
```
2. Electron Forge will automatically detect the system and create a _.dmg_ or _.zip_ file under:
```csharp
out/make/zip/darwin/x64/
```
## 🧠 Credit & Notes
- Build using Electron Forge
- Custom checkbox styling from [Moderncss.dev](https://moderncss.dev/pure-css-custom-checkbox-style/)
- App icon created with Canva
## 📜 License
This project is licensed under the **ISC License**
---
