// DOM elements
const habitInput = [Link]('habit-input');
const addHabitBtn = [Link]('add-habit-btn');
const habitList = [Link]('habit-list');
// Initialize habit data
let habits = [Link]([Link]('habits')) || [];
// Setup [Link] for habit stats
const ctx = [Link]('habit-progress-chart').getContext('2d');
const habitChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Habits'],
datasets: [{
label: 'Completed Habits',
data: [0],
backgroundColor: 'rgba(0, 198, 255, 0.6)',
borderRadius: 8,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
ticks: { color: '#fff' },
grid: { color: '#444' }
},
y: {
ticks: { color: '#fff' },
grid: { color: '#444' },
max: 10,
min: 0
}
}
}
});
// Render habits
function renderHabits() {
[Link] = ''; // Clear habit list
[Link]((habit, index) => {
const li = [Link]('li');
[Link]('completed', [Link]);
[Link] = `
<span>${[Link]}</span>
<div>
<button class="btn btn-complete" onclick="toggleComplete(${index})">$
{[Link] ? 'Undo' : 'Complete'}</button>
<button class="btn btn-delete"
onclick="deleteHabit(${index})">Delete</button>
</div>
`;
[Link](li);
});
updateHabitStats();
}
// Add habit
[Link]('click', () => {
const habitName = [Link]();
if (habitName) {
[Link]({ name: habitName, completed: false });
[Link] = ''; // Clear input field
updateLocalStorage();
renderHabits();
}
});
// Toggle habit completion
function toggleComplete(index) {
habits[index].completed = !habits[index].completed;
updateLocalStorage();
renderHabits();
}
// Delete habit
function deleteHabit(index) {
[Link](index, 1);
updateLocalStorage();
renderHabits();
}
// Update localStorage
function updateLocalStorage() {
[Link]('habits', [Link](habits));
}
// Update chart with completed habits
function updateHabitStats() {
const completedHabits = [Link](habit => [Link]).length;
[Link][0].data = [completedHabits];
[Link]();
}
// Initial render
renderHabits();
