script.js

// Eco-friendly tips
const tips = [
  "💧 Save water by turning off taps when not in use!",
  "♻️ Recycle plastic, paper, and glass to reduce waste!",
  "🌳 Plant a tree and help combat climate change!",
  "🚴 Use a bicycle instead of a car to reduce emissions!",
  "💡 Switch to LED bulbs and save energy!",
  "🥕 Eat more plant-based meals for a greener planet!",
  "🛍️ Use reusable bags instead of single-use plastic!"
];

// Load saved habits from local storage
let habits = JSON.parse(localStorage.getItem("habits")) || [];

// Add a new habit
function addHabit() {
  const input = document.getElementById("habitInput");
  const habitText = input.value.trim();
  if (habitText === "") return;

  const habit = { text: habitText, done: false, streak: 0 }; // added streak
  habits.push(habit);

  input.value = "";
  saveHabits();
  renderHabits();
}

// Toggle habit complete/incomplete
function toggleHabit(index) {
  const habit = habits[index];
  habit.done = !habit.done;

  if (habit.done) {
    habit.streak += 1; // increase streak
    showTip();         // show eco tip
  } else {
    habit.streak = 0;  // reset streak
  }

  saveHabits();
  renderHabits();
}

// Delete a habit
function deleteHabit(index) {
  habits.splice(index, 1); // remove from array
  saveHabits();
  renderHabits();
}

// Show random eco tip
function showTip() {
  const tip = tips[Math.floor(Math.random() * tips.length)];
  document.getElementById("tipText").textContent = tip;
}

// Save habits to local storage
function saveHabits() {
  localStorage.setItem("habits", JSON.stringify(habits));
}

// Render habit list
function renderHabits() {
  const list = document.getElementById("habitList");
  list.innerHTML = "";

  let completed = 0;
  habits.forEach((habit, index) => {
    const li = document.createElement("li");
    li.textContent = habit.text;

    if (habit.done) {
      li.classList.add("completed");
      completed++;
    }

    // Streak display
    if (habit.streak > 0) {
      li.textContent += ` 🔥 ${habit.streak}-day streak`;
    }

    // Click to toggle completion
    li.onclick = () => toggleHabit(index);

    // Delete button
    const delBtn = document.createElement("button");
    delBtn.textContent = "🗑️";
    delBtn.onclick = (e) => {
      e.stopPropagation(); // prevent toggle
      deleteHabit(index);
    };

    li.appendChild(delBtn);
    list.appendChild(li);
  });

  updateProgress(completed);
}

// Update progress bar and text
function updateProgress(completed) {
  const total = habits.length;
  const progressBar = document.getElementById("progressBar");
  const progressText = document.getElementById("progressText");

  if (total === 0) {
    progressBar.style.width = "0%";
    progressText.textContent = "0 habits completed";
    document.getElementById("tipText").textContent = "";
    return;
  }

  const percent = Math.round((completed / total) * 100);
  progressBar.style.width = percent + "%";
  progressText.textContent = `${completed} of ${total} habits completed (${percent}%)`;
}

// Initial render
renderHabits();