Compare commits
2 Commits
a64b6b9bbb
...
2d3c6ea55f
| Author | SHA1 | Date | |
|---|---|---|---|
| 2d3c6ea55f | |||
| 58147f4c45 |
56
app.js
56
app.js
@@ -6,7 +6,8 @@ const HabitTrackerApp = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
init: function() {
|
init: function() {
|
||||||
|
this.loadElements();
|
||||||
|
this.render();
|
||||||
},
|
},
|
||||||
|
|
||||||
setupEventListeners: function() {
|
setupEventListeners: function() {
|
||||||
@@ -27,29 +28,44 @@ const HabitTrackerApp = {
|
|||||||
const progress = (habit.currentCount / habit.targetCount) * 100;
|
const progress = (habit.currentCount / habit.targetCount) * 100;
|
||||||
|
|
||||||
return `<div class="${cardClass}" data-habit-id="${habit.id}">
|
return `<div class="${cardClass}" data-habit-id="${habit.id}">
|
||||||
<div class="habit-card__header">
|
<div class="habit-card__header">
|
||||||
<div class="habit-card__icon">💧</div>
|
<div class="habit-card__icon">💧</div>
|
||||||
<h3 class="habit-card__title">${habit.name}</h3>
|
<h3 class="habit-card__title">${habit.name}</h3>
|
||||||
</div>
|
</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">
|
||||||
<div class="habit-card__progress-info">
|
<div class="habit-card__progress-info">
|
||||||
<span>Прогресс</span>
|
<span>Прогресс</span>
|
||||||
<span>${progress}%</span>
|
<span>${progress}%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="habit-card__progress-bar">
|
<div class="habit-card__progress-bar">
|
||||||
<div class="habit-card__progress-fill" style="width: ${progress}%"></div>
|
<div class="habit-card__progress-fill" style="width: ${progress}%"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="habit-card__actions">
|
<div class="habit-card__actions">
|
||||||
<button class="button button--primary">Отметить выполнение</button>
|
<button class="button button--primary">${habit.isCompleted ? 'Выполнено' : 'Отметить выполнение'}</button>
|
||||||
<button class="button button--secondary">Подробнее</button>
|
<button class="button button--secondary">Подробнее</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}).join('');
|
||||||
);
|
|
||||||
|
this.elements.habitGrid.innerHTML = habitsHTML;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
HabitTrackerApp.loadFromLocalStorage = function() {
|
||||||
|
HabitManager.loadFromLocalStorage();
|
||||||
|
|
||||||
|
if (HabitManager.habits.length == 0) {
|
||||||
|
HabitManager.createHabit('Учить js', 'Писать не менее 1000000000 строк кода в день', 8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
HabitTrackerApp.loadFromLocalStorage();
|
||||||
|
HabitTrackerApp.init();
|
||||||
|
});
|
||||||
@@ -236,77 +236,6 @@
|
|||||||
|
|
||||||
<!-- Сетка карточек привычек -->
|
<!-- Сетка карточек привычек -->
|
||||||
<div class="habits-grid" id="habits-grid">
|
<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>
|
</div>
|
||||||
|
|
||||||
<!-- Форма добавления новой привычки -->
|
<!-- Форма добавления новой привычки -->
|
||||||
|
|||||||
Reference in New Issue
Block a user