Compare commits
5 Commits
a64b6b9bbb
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 3f039d4eef | |||
| abed02fdc2 | |||
| 6c71321076 | |||
| 2d3c6ea55f | |||
| 58147f4c45 |
95
app.js
95
app.js
@@ -1,24 +1,58 @@
|
||||
// Что нам нужно для работы кнопки Отметить выполнение?
|
||||
// 1. Найти все кнопки отметить выполнение.
|
||||
// 2. На каждую кнопку повесить слушатель события клик(нажатие мышью)
|
||||
// 3. Внутри слушателя события выполнить логику выполнения привычки - вызвать функцию markHabitDone
|
||||
// 4. Перерисовать интерфейс
|
||||
|
||||
const HabitTrackerApp = {
|
||||
elements: {
|
||||
habitGrid: null,
|
||||
addHabitForm: null,
|
||||
addHabbitButton: null
|
||||
addHabbitButton: null,
|
||||
habbitDoneButtons: [],
|
||||
},
|
||||
|
||||
init: function() {
|
||||
|
||||
this.loadElements();
|
||||
this.render();
|
||||
this.loadDynamicElements();
|
||||
this.setupEventListeners();
|
||||
},
|
||||
|
||||
setupEventListeners: function() {
|
||||
this.elements.addHabbitButton.addEventListener('click', () => {
|
||||
this.elements.addHabitForm.style.display = 'block';
|
||||
//this.elements.addHabitForm.style.display = 'block';
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// пройти циклом по 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);
|
||||
|
||||
},
|
||||
|
||||
loadDynamicElements: function() {
|
||||
this.elements.habbitDoneButtons = document.querySelectorAll('.button--primary');
|
||||
},
|
||||
|
||||
render: function() {
|
||||
@@ -27,29 +61,46 @@ const HabitTrackerApp = {
|
||||
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>
|
||||
<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>
|
||||
<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__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 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();
|
||||
});
|
||||
@@ -236,77 +236,6 @@
|
||||
|
||||
<!-- Сетка карточек привычек -->
|
||||
<div class="habits-grid" id="habits-grid">
|
||||
<!-- Карточка 1 -->
|
||||
<div class="habit-card">
|
||||
<div class="habit-card__header">
|
||||
<div class="habit-card__icon">💧</div>
|
||||
<h3 class="habit-card__title">Пить воду</h3>
|
||||
</div>
|
||||
<p class="habit-card__description">8 стаканов воды в день для поддержания водного баланса организма</p>
|
||||
|
||||
<div class="habit-card__progress">
|
||||
<div class="habit-card__progress-info">
|
||||
<span>Прогресс</span>
|
||||
<span>75%</span>
|
||||
</div>
|
||||
<div class="habit-card__progress-bar">
|
||||
<div class="habit-card__progress-fill" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="habit-card__actions">
|
||||
<button class="button button--primary">Отметить выполнение</button>
|
||||
<button class="button button--secondary">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Карточка 2 -->
|
||||
<div class="habit-card habit-card--important">
|
||||
<div class="habit-card__header">
|
||||
<div class="habit-card__icon">📚</div>
|
||||
<h3 class="habit-card__title">Читать книги</h3>
|
||||
</div>
|
||||
<p class="habit-card__description">20 минут чтения развивающей литературы каждый вечер</p>
|
||||
|
||||
<div class="habit-card__progress">
|
||||
<div class="habit-card__progress-info">
|
||||
<span>Прогресс</span>
|
||||
<span>45%</span>
|
||||
</div>
|
||||
<div class="habit-card__progress-bar">
|
||||
<div class="habit-card__progress-fill" style="width: 45%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="habit-card__actions">
|
||||
<button class="button button--primary">Отметить выполнение</button>
|
||||
<button class="button button--secondary">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Карточка 3 -->
|
||||
<div class="habit-card habit-card--completed">
|
||||
<div class="habit-card__header">
|
||||
<div class="habit-card__icon">🏃</div>
|
||||
<h3 class="habit-card__title">Утренняя зарядка</h3>
|
||||
</div>
|
||||
<p class="habit-card__description">15 минут физических упражнений каждое утро</p>
|
||||
|
||||
<div class="habit-card__progress">
|
||||
<div class="habit-card__progress-info">
|
||||
<span>Прогресс</span>
|
||||
<span>100%</span>
|
||||
</div>
|
||||
<div class="habit-card__progress-bar">
|
||||
<div class="habit-card__progress-fill" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="habit-card__actions">
|
||||
<button class="button button--primary" disabled>Выполнено</button>
|
||||
<button class="button button--secondary">Подробнее</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Форма добавления новой привычки -->
|
||||
|
||||
@@ -16,7 +16,7 @@ const HabitManager = {
|
||||
|
||||
HabitManager.createHabit = function (name, description, targetCount = 1) {
|
||||
const habit = {
|
||||
id: Math.random(),
|
||||
id: Math.floor(Math.random() * 100000, 10000),
|
||||
name: name,
|
||||
description: description,
|
||||
targetCount: targetCount,
|
||||
@@ -31,6 +31,7 @@ HabitManager.createHabit = function (name, description, targetCount = 1) {
|
||||
}
|
||||
|
||||
HabitManager.markHabitDone = function (habitId) {
|
||||
console.log(this.habits);
|
||||
const habit = this.habits.find(h => h.id === habitId);
|
||||
|
||||
if (!habit) {
|
||||
|
||||
Reference in New Issue
Block a user