From be9c9bcf83113b695a2b1d5c21d35da9af7659af Mon Sep 17 00:00:00 2001 From: Gunjan Agrawal Date: Tue, 16 Jun 2026 18:42:31 +0000 Subject: [PATCH] feat: add sustainability goals tracker dashboard --- Frontend/index.html | 1 + Frontend/style.css | 25 ++++++++ Frontend/sustainability.html | 77 ++++++++++++++++++++++ Frontend/sustainability.js | 120 +++++++++++++++++++++++++++++++++++ 4 files changed, 223 insertions(+) create mode 100644 Frontend/sustainability.html create mode 100644 Frontend/sustainability.js diff --git a/Frontend/index.html b/Frontend/index.html index 7483b13..91b3238 100644 --- a/Frontend/index.html +++ b/Frontend/index.html @@ -40,6 +40,7 @@
Features Analyze + Sustainability Goals Contact + + + + + + Sustainability Goals | Climate Shield + + + + + +
+ + +
+
+ +
+ Create Goal +

Add a Sustainability Goal

+
+ +
+ + + + + +
+ +
+
+
+ SUSTAINABILITY TRACKER + +

Track your sustainability goals.

+ +

+ Set environmental goals, monitor progress, + and build sustainable habits. +

+
+
+ +
+
+ Your Goals +

Personal Sustainability Dashboard

+
+
+

Active Goals: 0

+

Completed Goals: 0

+

Completion Rate: 0%

+
+

Active Goals

+
+ +

Completed Goals

+
+
+
+
+ + + + \ No newline at end of file diff --git a/Frontend/sustainability.js b/Frontend/sustainability.js new file mode 100644 index 0000000..ab43d61 --- /dev/null +++ b/Frontend/sustainability.js @@ -0,0 +1,120 @@ +const addGoalBtn = document.getElementById("add-goal-btn"); +const activeGoalsContainer = + document.getElementById("active-goals"); + +const completedGoalsContainer = + document.getElementById("completed-goals"); + +let goals = + JSON.parse(localStorage.getItem("sustainabilityGoals")) || []; + +function saveGoals() { + localStorage.setItem( + "sustainabilityGoals", + JSON.stringify(goals) + ); +} + +function renderGoals() { + activeGoalsContainer.innerHTML = ""; + completedGoalsContainer.innerHTML = ""; + let activeCount = 0; + let completedCount = 0; + goals.forEach((goal, index) => { + const progress = + goal.target > 0 + ? (goal.current / goal.target) * 100 + : 0; + + const card = document.createElement("article"); + + card.className = "feature-card"; + + card.innerHTML = ` +
🌱
+ +

${goal.name}

+

Deadline: ${goal.deadline || "Not Set"}

+

${goal.current} / ${goal.target}

+

${Math.round(progress)}% Complete

+ + + + + + ${progress >= 100 + ? '

🏆 Achievement Unlocked!

' + : '' + } + `; + + if (progress >= 100) { + completedCount++; + completedGoalsContainer.appendChild(card); + } else { + activeCount++; + activeGoalsContainer.appendChild(card); + } + }); + const totalGoals = goals.length; + + const completionRate = + totalGoals > 0 + ? Math.round((completedCount / totalGoals) * 100) + : 0; + + const activeCountEl = document.getElementById("active-count"); + const completedCountEl = document.getElementById("completed-count"); + const completionRateEl = document.getElementById("completion-rate"); + + if (activeCountEl) activeCountEl.textContent = activeCount; + if (completedCountEl) completedCountEl.textContent = completedCount; + if (completionRateEl) completionRateEl.textContent = `${completionRate}%`; +} + +function updateGoal(index) { + goals[index].current = Math.min( + goals[index].current + 10, + goals[index].target + ); + + saveGoals(); + + renderGoals(); +} + +addGoalBtn.addEventListener("click", () => { + const name = + document.getElementById("goal-name").value.trim(); + + const target = + parseInt( + document.getElementById("goal-target").value + ); + const deadline = + document.getElementById("goal-deadline").value; + + if (!name || isNaN(target) || target <= 0 || !deadline) { + alert("Please fill all fields."); + return; + } + goals.push({ + name, + target, + deadline, + current: 0 + }); + + document.getElementById("goal-name").value = ""; + document.getElementById("goal-target").value = ""; + document.getElementById("goal-deadline").value = ""; + + saveGoals(); + renderGoals(); +}); + +renderGoals(); \ No newline at end of file