Skip to content

Commit 99b1166

Browse files
InfinityLoop1InfinityLoop1
committed
more transitions, new creator popup semi-functional
1 parent 978b133 commit 99b1166

File tree

6 files changed

+182
-51
lines changed

6 files changed

+182
-51
lines changed

‎public/assets/js/index.js‎

Lines changed: 35 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ function addHomeworkPopup() {
99
popup.style.display = 'flex';
1010
document.getElementById('popup-bg').style.display = 'block';
1111
//i love copilot
12+
13+
}
14+
15+
function creatorPopup() {
16+
document.getElementById('creator-popup').classList.add('show');
17+
document.getElementById('popup-bg').classList.add('show');
18+
1219
const dueDateInput = document.getElementById("homework-due-date");
1320
if (dueDateInput) {
1421
const now = new Date();
@@ -19,11 +26,6 @@ function addHomeworkPopup() {
1926
}
2027
}
2128

22-
function creatorPopup() {
23-
document.getElementById('creator-popup').style.display = 'flex';
24-
document.getElementById('popup-bg').style.display = 'block';
25-
}
26-
2729
function addHomework() {
2830
homework = JSON.parse(localStorage.getItem('homework')) || [];
2931
const homeworkName = document.getElementById('homework-name').value;
@@ -41,22 +43,34 @@ function addHomework() {
4143
};
4244
homework.push(newHomework);
4345

44-
document.getElementById('add-event-popup').style.display = 'none';
45-
document.getElementById('popup-bg').style.display = 'none';
46+
document.getElementById('popup-bg').classList.remove('show');
47+
document.getElementById('creator-popup').classList.remove('show');
4648

4749
localStorage.setItem('homework', JSON.stringify(homework));
4850
document.getElementById('page-frame').contentWindow.displayAssignedHomework();
4951
}
5052

5153

5254
document.getElementById('cancel-creator-button').addEventListener('click', () => {
53-
document.getElementById('creator-popup').style.display = 'none';
54-
document.getElementById('popup-bg').style.display = 'none';
55+
document.getElementById('popup-bg').classList.remove('show');
56+
document.getElementById('creator-popup').classList.remove('show');
5557
});
5658

5759
document.getElementById('popup-bg').addEventListener('click', () => {
58-
document.getElementById('creator-popup').style.display = 'none';
59-
document.getElementById('popup-bg').style.display = 'none';
60+
document.getElementById('popup-bg').classList.remove('show');
61+
document.getElementById('creator-popup').classList.remove('show');
62+
});
63+
64+
document.getElementById('save-creator-button').addEventListener('click', () => {
65+
document.getElementById('popup-bg').classList.remove('show');
66+
document.getElementById('creator-popup').classList.remove('show');
67+
68+
const selectedRadio = document.querySelector('input[type="radio"][name="creator-radio"]:checked');
69+
if (selectedRadio) {
70+
if (selectedRadio.value === 'homework') {
71+
addHomework();
72+
}
73+
}
6074
});
6175

6276
//document.getElementById('save-homework-button').addEventListener('click', addHomework);
@@ -104,17 +118,19 @@ window.addEventListener('resize', () => {
104118

105119
document.querySelectorAll('input[type="radio"][name="creator-radio"]').forEach(radio => {
106120
radio.addEventListener('change', function () {
107-
document.getElementById('creator-popup').style.opacity = '0';
108-
document.getElementById('creator-popup').style.transform = 'translate(-50%, calc(-50% + 10px))';
121+
const popup = document.getElementById('creator-popup');
122+
123+
// Add transitioning class for the slide down effect
124+
popup.classList.add('transitioning');
109125

110126
setTimeout(() => {
127+
// Change the content
111128
document.getElementsByClassName('shown-creator-container')[0].classList.remove('shown-creator-container');
112-
document.getElementById('add-' + this.value + '-container').classList.add('shown-creator-container');
113-
document.getElementById('creator-popup').style.opacity = '1';
114-
document.getElementById('creator-popup').style.transform = 'translate(-50%, -50%)';
115-
}, 500);
116-
117-
129+
document.getElementById('add-' + this.value + '-container').classList.add('shown-creator-container');
130+
131+
// Remove transitioning class to slide back up
132+
popup.classList.remove('transitioning');
133+
}, 500); // Longer timeout to match the 0.8s transition (halfway point)
118134
});
119135
});
120136

‎public/assets/js/list.js‎

Lines changed: 101 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,22 @@ function displayAssignedHomework() {
2121
}
2222

2323
const container = document.getElementById('uncompleted-homework');
24+
// Store previous IDs to detect new items
25+
const prevItems = Array.from(container.querySelectorAll('.homework-item'));
26+
const prevIds = prevItems.map(div => div.dataset.id);
27+
2428
container.innerHTML = '';
2529

2630
if (homework.length === 0) {
27-
container.innerHTML = '<h1 style="text-align: center;">No homework assigned.</h1>';
31+
const msgDiv = document.createElement('div');
32+
msgDiv.innerHTML = '<h1 style="text-align: center;">No homework assigned.</h1>';
33+
msgDiv.style.opacity = '0';
34+
msgDiv.style.height = '60px';
35+
container.appendChild(msgDiv);
36+
setTimeout(() => {
37+
msgDiv.style.transition = 'opacity 0.5s';
38+
msgDiv.style.opacity = '1';
39+
}, 10);
2840
return;
2941
}
3042

@@ -33,8 +45,6 @@ function displayAssignedHomework() {
3345
div.classList.add('homework-item');
3446
div.dataset.id = hw.id;
3547

36-
37-
3848
div.innerHTML = `
3949
<button class="complete-btn material-symbols-rounded">check</button>
4050
<div>
@@ -48,7 +58,18 @@ function displayAssignedHomework() {
4858
if (new Date(hw.dueDate) < new Date()) {
4959
div.getElementsByClassName('hw-dueDate')[0].style.color = '#ffcccc';
5060
}
51-
container.appendChild(div);
61+
62+
// Fade in if it's a new item
63+
if (!prevIds.includes(String(hw.id))) {
64+
div.style.opacity = '0';
65+
div.style.transition = 'opacity 0.5s';
66+
container.appendChild(div);
67+
setTimeout(() => {
68+
div.style.opacity = '1';
69+
}, 500);
70+
} else {
71+
container.appendChild(div);
72+
}
5273
});
5374
}
5475

@@ -66,11 +87,39 @@ function displayCompletedHomework() {
6687
}
6788

6889
const container = document.getElementById('completed-homework');
90+
// Store previous IDs to detect new items
91+
const prevItems = Array.from(container.querySelectorAll('.completed-item'));
92+
const prevIds = prevItems.map(div => div.dataset.id);
93+
const wasHidden = prevItems.length && prevItems[0].classList.contains('hidden-item');
94+
95+
// Fade out if toggled off
96+
if (showCompleted === false && prevItems.length) {
97+
prevItems.forEach(div => {
98+
div.style.transition = 'opacity 0.5s';
99+
div.style.opacity = '0';
100+
});
101+
setTimeout(() => {
102+
container.innerHTML = '';
103+
}, 500);
104+
return;
105+
}
106+
69107
container.innerHTML = '';
70108

71109
if (finishedHomework.length === 0) {
72110
if (showCompleted == true) {
73-
document.getElementById('completed-homework').innerHTML = '<h1 style="text-align: center;">No homework completed.</h1>';
111+
const completedContainer = document.getElementById('completed-homework');
112+
const msgDiv = document.createElement('div');
113+
msgDiv.innerHTML = '<h1 style="text-align: center;">No homework completed.</h1>';
114+
msgDiv.style.opacity = '0';
115+
msgDiv.style.height = '60px';
116+
completedContainer.innerHTML = '';
117+
completedContainer.appendChild(msgDiv);
118+
setTimeout(() => {
119+
msgDiv.style.transition = 'opacity 0.5s';
120+
msgDiv.style.opacity = '1';
121+
}, 10);
122+
74123
}
75124
return;
76125
}
@@ -84,15 +133,32 @@ function displayCompletedHomework() {
84133
}
85134
div.innerHTML = `
86135
<button class="restore-btn material-symbols-rounded">refresh</button>
87-
<button class="delete-btn material-symbols-rounded">delete</button>
136+
<button class="delete-btn material-symbols-rounded">delete</button>
88137
<div>
89138
<strong class="hw-name">${hw.name}</strong>
90139
<p class="hw-subject">${hw.class}</p>
91140
</div>
92141
<p class="hw-desc">${hw.description}</p>
93142
<p class="hw-dueDate">${formatDateTime(hw.dueDate)}</p>
94143
`;
95-
container.appendChild(div);
144+
// Fade in if toggled on
145+
if (showCompleted == true && wasHidden) {
146+
div.style.opacity = '0';
147+
container.appendChild(div);
148+
setTimeout(() => {
149+
div.style.transition = 'opacity 0.5s';
150+
div.style.opacity = '1';
151+
}, 10);
152+
} else if (!prevIds.includes(String(hw.id)) && showCompleted == true) {
153+
div.style.opacity = '0';
154+
container.appendChild(div);
155+
setTimeout(() => {
156+
div.style.transition = 'opacity 0.5s';
157+
div.style.opacity = '1';
158+
}, 500);
159+
} else {
160+
container.appendChild(div);
161+
}
96162
});
97163
}
98164

@@ -138,8 +204,20 @@ document.getElementById('homework-container').addEventListener('click', event =>
138204
finishedHomework.push(completed);
139205
localStorage.setItem('homework', JSON.stringify(homework));
140206
localStorage.setItem('finishedHomework', JSON.stringify(finishedHomework));
141-
displayAssignedHomework();
142-
displayCompletedHomework();
207+
item.style.opacity = '0';
208+
for (let i = idx; i < homework.length; i++) {
209+
const itemDiv = document.querySelector(`.homework-item[data-id="${homework[i].id}"]`);
210+
if (itemDiv) {
211+
itemDiv.style.transform = 'translateY(-60px)';
212+
setTimeout(() => {
213+
itemDiv.style.transform = '';
214+
}, 500);
215+
}
216+
}
217+
setTimeout(() => {
218+
displayAssignedHomework();
219+
displayCompletedHomework();
220+
}, 300);
143221
}
144222
return;
145223
}
@@ -156,8 +234,20 @@ document.getElementById('homework-container').addEventListener('click', event =>
156234
homework.push(restored);
157235
localStorage.setItem('homework', JSON.stringify(homework));
158236
localStorage.setItem('finishedHomework', JSON.stringify(finishedHomework));
159-
displayAssignedHomework();
160-
displayCompletedHomework();
237+
item.style.opacity = '0';
238+
for (let i = idx; i < finishedHomework.length; i++) {
239+
const itemDiv = document.querySelector(`.completed-item[data-id="${finishedHomework[i].id}"]`);
240+
if (itemDiv) {
241+
itemDiv.style.transform = 'translateY(-60px)';
242+
setTimeout(() => {
243+
itemDiv.style.transform = '';
244+
}, 500);
245+
}
246+
}
247+
setTimeout(() => {
248+
displayAssignedHomework();
249+
displayCompletedHomework();
250+
}, 500);
161251
}
162252
return;
163253
}

0 commit comments

Comments
 (0)