110 lines
4.5 KiB
JavaScript
110 lines
4.5 KiB
JavaScript
// Что нам нужно для работы кнопки Отметить выполнение?
|
||
// 1. Найти все кнопки отметить выполнение.
|
||
// 2. На каждую кнопку повесить слушатель события клик(нажатие мышью)
|
||
// 3. Внутри слушателя события выполнить логику выполнения привычки - вызвать функцию markHabitDone
|
||
// 4. Перерисовать интерфейс
|
||
|
||
const HabitTrackerApp = {
|
||
elements: {
|
||
habitGrid: null,
|
||
addHabitForm: null,
|
||
addHabbitButton: null,
|
||
habbitDoneButtons: [],
|
||
},
|
||
|
||
init: function() {
|
||
this.loadElements();
|
||
this.render();
|
||
this.setupEventListeners();
|
||
},
|
||
|
||
setupEventListeners: function() {
|
||
this.elements.addHabbitButton.addEventListener('click', () => {
|
||
//this.elements.addHabitForm.style.display = 'block';
|
||
});
|
||
|
||
// 2 вариант
|
||
const timerId = setInterval(() => {
|
||
if (this.elements.habbitDoneButtons.length == 0) {
|
||
return;
|
||
}
|
||
|
||
this.elements.habbitDoneButtons.forEach(
|
||
button => {
|
||
return button.addEventListener('click', (event) => {
|
||
const cardId = event.target.closest('.habit-card').dataset.habitId;
|
||
// разобраться почему не находит привычку
|
||
HabitManager.markHabitDone(cardId);
|
||
HabitManager.saveToLocalStorage();
|
||
this.init();
|
||
});
|
||
}
|
||
);
|
||
}, 1000);
|
||
|
||
setTimeout(() => clearInterval(timerId), 3000);
|
||
|
||
// пройти циклом по habbitDoneButtons. На каждый элемент массива
|
||
// добавить addEventListener по клику.
|
||
// и в обработчике события вывести console.log
|
||
},
|
||
|
||
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');
|
||
setTimeout(() => {
|
||
this.elements.habbitDoneButtons = document.querySelectorAll('.button--primary');
|
||
}, 1000);
|
||
|
||
},
|
||
|
||
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">${habit.isCompleted ? 'Выполнено' : 'Отметить выполнение'}</button>
|
||
<button class="button button--secondary">Подробнее</button>
|
||
</div>
|
||
</div>
|
||
`
|
||
}).join('');
|
||
|
||
this.elements.habitGrid.innerHTML = habitsHTML;
|
||
}
|
||
}
|
||
|
||
HabitTrackerApp.loadFromLocalStorage = function() {
|
||
HabitManager.loadFromLocalStorage();
|
||
|
||
if (HabitManager.habits.length == 0) {
|
||
HabitManager.createHabit('Учить js', 'Писать не менее 1000000000 строк кода в день', 8);
|
||
HabitManager.saveToLocalStorage();
|
||
}
|
||
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
HabitTrackerApp.loadFromLocalStorage();
|
||
HabitTrackerApp.init();
|
||
}); |