kosipov/iro-1425-2025-2026-lecture
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: kosipov:a64b6b9bbb90ebfab0495f731b2e4c2d85d8bca8
Branches Tags
kosipov:main
..
compare: kosipov:main
Branches Tags
kosipov:main

5 Commits
a64b6b9bbb ... main

Author SHA1 Message Date
kosipov
3f039d4eef fix with remove setTimeout 2025-11-06 22:54:32 +03:00
kosipov
abed02fdc2 add logic for habit done 2025-11-06 22:40:56 +03:00
kosipov
6c71321076 add logic for habbit done 2025-11-06 17:53:27 +03:00
kosipov
2d3c6ea55f Merge branch 'main' of ssh://git.kosipov.ru:2222/kosipov/iro-1425-2025-2026-lecture 2025-10-30 14:17:45 +03:00
kosipov
58147f4c45 add trackers loader 2025-10-30 14:07:33 +03:00
3 changed files with 76 additions and 95 deletions
Expand all files Collapse all files

97
app.js
View File

@@ -1,24 +1,58 @@
// Что нам нужно для работы кнопки Отметить выполнение?
// 1. Найти все кнопки отметить выполнение.
// 2. На каждую кнопку повесить слушатель события клик(нажатие мышью)
// 3. Внутри слушателя события выполнить логику выполнения привычки - вызвать функцию markHabitDone
// 4. Перерисовать интерфейс
const HabitTrackerApp = { const HabitTrackerApp = {
elements: { elements: {
habitGrid: null, habitGrid: null,
addHabitForm: null, addHabitForm: null,
addHabbitButton: null addHabbitButton: null,
habbitDoneButtons: [],
}, },
init: function() { init: function() {
this.loadElements();
this.render();
this.loadDynamicElements();
this.setupEventListeners();
}, },
setupEventListeners: function() { setupEventListeners: function() {
this.elements.addHabbitButton.addEventListener('click', () => { 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() { loadElements: function() {
this.elements.habitGrid = document.getElementById('habits-grid'); this.elements.habitGrid = document.getElementById('habits-grid');
this.elements.addHabitForm = document.getElementById('add-habit-form'); this.elements.addHabitForm = document.getElementById('add-habit-form');
this.elements.addHabbitButton = document.getElementById('add-habbit-button'); 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() { render: function() {
@@ -27,29 +61,46 @@ 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);
HabitManager.saveToLocalStorage();
}
}
document.addEventListener('DOMContentLoaded', () => {
HabitTrackerApp.loadFromLocalStorage();
HabitTrackerApp.init();
});

71
habbit-manager.html
View File

@@ -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>
<!-- Форма добавления новой привычки --> <!-- Форма добавления новой привычки -->

3
habit-manager.js
View File

@@ -16,7 +16,7 @@ const HabitManager = {
HabitManager.createHabit = function (name, description, targetCount = 1) { HabitManager.createHabit = function (name, description, targetCount = 1) {
const habit = { const habit = {
id: Math.random(), id: Math.floor(Math.random() * 100000, 10000),
name: name, name: name,
description: description, description: description,
targetCount: targetCount, targetCount: targetCount,
@@ -31,6 +31,7 @@ HabitManager.createHabit = function (name, description, targetCount = 1) {
} }
HabitManager.markHabitDone = function (habitId) { HabitManager.markHabitDone = function (habitId) {
console.log(this.habits);
const habit = this.habits.find(h => h.id === habitId); const habit = this.habits.find(h => h.id === habitId);
if (!habit) { if (!habit) {