EcoTrack — 为地球打造的习惯追踪器 🌍

Source: Dev.to

这是一篇提交作品，参加Weekend Challenge: Earth Day Edition

我构建的

EcoTrack 是一个零依赖的生态习惯追踪器，帮助普通人逐步养成并坚持对地球友好的习惯——一次一个小行动。

思路很简单：大多数人 想要 更可持续的生活，但缺乏轻量、无摩擦的方式来保持自律。EcoTrack 让这像勾选待办事项一样简单——但对象是地球 🌍。

主要功能

• 每日一键习惯签到，支持单个习惯的连胜记录
• 进度环，一眼看出今日完成情况
• 7 天周热图，直观展示坚持度
• 累计影响仪表盘——节省的 CO₂、避免的塑料、节约的能源和水
• 浏览器推送通知提醒，可自选时间
• 可添加默认之外的自定义习惯
• 完全离线——所有数据存储在 localStorage，无需账号

默认习惯包括：使用可重复使用的购物袋、选择公共交通、食用植物性餐食、关闭未使用的灯光，以及携带可重复使用的水瓶。

演示

🔗 实时应用: EcoTrack — Eco Habit Tracker

代码

🐙 GitHub 仓库： github.com/makendrang/ecotrack

整个应用都在单个 index.html 文件中——无需构建步骤、无需依赖、无需框架。克隆它并直接在浏览器中打开。

ecotrack/
├── index.html   # Complete app — HTML + CSS + JS in one file
└── README.md

Source: …

我是如何构建它的

EcoTrack 完全使用原生 HTML、CSS 和 JavaScript 构建——刻意不使用任何框架或依赖。目标是让应用尽可能轻量、易于访问，任何人都可以在几分钟内 fork、修改并部署。

技术亮点

• localStorage 提供所有持久化功能——习惯、每日日志、连胜以及提醒设置在页面刷新后仍能保留，无需后端。
• 连胜算法 从今天向前遍历日志，计算每个习惯以及整体的连胜天数。
• 影响计算 将每个习惯映射到环境类别（碳排放、塑料、能源、水），并在所有记录的天数中累计总量。
• Web Notifications API 负责提醒系统——应用请求权限后，使用 setTimeout 在用户选择的每日时间触发浏览器通知。
• 纯 CSS 动画 驱动进度环（SVG stroke-dashoffset 过渡）和影响条的显现——无需任何 JS 动画库。

GitHub Copilot 的帮助

在紧凑的周末时间窗口中，GitHub Copilot 对保持开发进度起到了关键作用。具体收益如下：

• 从一行普通英文注释在几秒钟内生成了连胜计算逻辑。
• 自动补全了重复的 localStorage 获取/设置模式，省去手动编写模板代码。
• 当我描述想要的效果时，Copilot 推荐了使用 SVG stroke-dashoffset 动画来实现进度环。
• 编写了 Web Notifications API 的调度逻辑——我只描述了“每天在用户选择的时间触发通知”，Copilot 就填好了 setTimeout + Notification 构造函数的代码。
• 协助完成了 CSS 点网格背景纹理和径向渐变层的实现。

原本需要整整一天的模板代码编写和 MDN 查询的工作，被压缩成几小时的专注开发，从而有更多时间来打磨 UI 和地球日主题。

奖项类别

✅ 最佳 GitHub Copilot 使用

GitHub Copilot 在这里不仅仅是一个便利——它是让这个项目在一个周末内完成的核心部分。从连胜逻辑到通知调度再到 SVG 动画，Copilot 加速了几乎所有技术决策。我在整个代码库中使用了内联建议，并利用 Copilot Chat 在写下任何代码之前推敲 localStorage 数据模型。