55 lines
2.0 KiB
JavaScript
55 lines
2.0 KiB
JavaScript
const HabitTrackerApp = {
|
|
elements: {
|
|
habitGrid: null,
|
|
addHabitForm: null,
|
|
addHabbitButton: null
|
|
},
|
|
|
|
init: function() {
|
|
|
|
},
|
|
|
|
setupEventListeners: function() {
|
|
this.elements.addHabbitButton.addEventListener('click', () => {
|
|
this.elements.addHabitForm.style.display = 'block';
|
|
});
|
|
},
|
|
|
|
loadElements: function() {
|
|
this.elements.habitGrid = document.getElementById('habits-grid');
|
|
this.elements.addHabitForm = document.getElementById('add-habit-form');
|
|
this.elements.addHabbitButton = document.getElementById('add-habbit-button');
|
|
},
|
|
|
|
render: function() {
|
|
const habitsHTML = HabitManager.habits.map(habit => {
|
|
const cardClass = `habit-card ${habit.isCompleted ? 'habit-card--completed' : ''}`;
|
|
const progress = (habit.currentCount / habit.targetCount) * 100;
|
|
|
|
return `<div class="${cardClass}" data-habit-id="${habit.id}">
|
|
<div class="habit-card__header">
|
|
<div class="habit-card__icon">💧</div>
|
|
<h3 class="habit-card__title">${habit.name}</h3>
|
|
</div>
|
|
|
|
<p class="habit-card__description">${habit.description}</p>
|
|
|
|
<div class="habit-card__progress">
|
|
<div class="habit-card__progress-info">
|
|
<span>Прогресс</span>
|
|
<span>${progress}%</span>
|
|
</div>
|
|
<div class="habit-card__progress-bar">
|
|
<div class="habit-card__progress-fill" style="width: ${progress}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="habit-card__actions">
|
|
<button class="button button--primary">Отметить выполнение</button>
|
|
<button class="button button--secondary">Подробнее</button>
|
|
</div>
|
|
`
|
|
}
|
|
);
|
|
}
|
|
} |