coffeeman-travel-budget-app
Version 2 - updated interface design.
A simple and beautiful web app to help you manage travel expenses. Built with HTML, CSS, JavaScript, and Chart.js.
🚀 Features
- ✅ Create multiple trips with name and photo(JPG or PNG file)
- ✅ Set a budget and choose your currency
- ✅ Add expenses by category (Food, Hotel, Transport, etc.)
- ✅ View remaining budget and pie chart breakdown
- ✅ Stored locally in your browser (no account needed)
📱 How to Use
- Click “Add Trip”, give it a name, and upload a photo.
- Select your preferred currency (default: MYR).
- Set your total travel budget.
- Add expenses — choose category, enter amount, and optional notes.
- View your spending in a table and pie chart.
- Return to the home screen to manage other trips.
🔐 Data Storage & Privacy
- All data is saved locally on your device using Local Storage.
- This means your data stays private and is not uploaded anywhere.
- If you clear browser cache or use another device, your data will be lost.
- We recommend exporting data manually if needed (feature coming soon).
🌐 The app link
📲 Add to Home Screen (For Easy Access)
You can install this app like a native app on your phone! Here’s how:
✅ For iPhone (iOS Safari):
Open this app in Safari.
Tap the Share button (the square with the arrow).
Scroll down and tap Add to Home Screen.
Tap Add in the top-right corner.
This will place the CoffeeMan Travel App on your iPhone’s home screen like a regular app.
✅ For Android (Chrome or Edge):
Open this app in Google Chrome or Microsoft Edge.
Tap the three-dot menu in the top-right corner.
Tap Add to Home screen.
Confirm by tapping Add.
Now you can access your travel budget easily without opening your browser!
🛠️ Tech Stack
- HTML, CSS, JavaScript
- Chart.js for charts
- LocalStorage for offline data saving
CoffeeMan Travel Budget Manager 迷你小程序
一个简单又美观的网页应用，帮你轻松管理旅行开销。
基于 HTML、CSS、JavaScript 和 Chart.js 开发。
##🚀 功能特点
- ✅ 创建多个行程，并为每个行程设置名称和封面照片（JPG 或 PNG 格式）
- ✅ 设置预算并选择货币
- ✅ 按类别添加开销（餐饮、酒店、交通等）
- ✅ 查看剩余预算和饼图分析
- ✅ 数据保存在你的浏览器本地（无需注册账号）
##📱 使用方法
- 点击“Add Trip”，输入行程名称并上传照片
- 选择你想用的货币（默认：马币 MYR）
- 设置总旅行预算
- 添加开销——选择类别，输入金额，可选备注
- 在表格和饼图中查看你的花费情况
- 返回主页可管理其他行程
##🔐 数据存储与隐私
- 所有数据都保存在你设备的本地存储（Local Storage）
- 你的数据不会上传到任何地方，完全私密
- 如果你清空浏览器缓存或换设备，数据会丢失
- 建议手动导出数据（导出功能即将上线）
🌐 应用链接
👉 点击这里即可使用
📲 添加到手机主屏幕（更方便访问）
你可以像安装原生应用一样，把它装到手机桌面！方法如下：
✅ iPhone（iOS Safari）：
在 Safari 打开应用
点击底部的分享按钮（方框加箭头)
往下滑选择“添加到主屏幕”
右上角点击“添加”
这样 CoffeeMan Travel App 就会出现在你的 iPhone 桌面啦。
✅ Android（Chrome 或 Edge）：
在 Google Chrome 或 Microsoft Edge 打开应用
点击右上角“三点”菜单
选择“添加到主屏幕”
点击“添加”确认
现在你可以像用普通 App 一样快速打开预算工具！
##🛠️ 技术栈
- HTML、CSS、JavaScript
- Chart.js（图表功能）
-
LocalStorage（离线数据存储）
🧔 Author
Created by @CoffeeManApp
Donation: @Buymeacoffee