Skip to content

Commit 38f5478

Browse files
FlyingCow31FlyingCow31
committed
Feature(Progression)
+ Added New animations for button + Added project's title & desc saving when back button is pressed + Added progression in projects
1 parent 72357dc commit 38f5478

File tree

4 files changed

+174
-93
lines changed

4 files changed

+174
-93
lines changed

‎css/animations.css‎

Lines changed: 32 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,34 @@
88
scale: 0.7;
99
}
1010
}
11+
@keyframes buttonanim {
12+
0% {
13+
scale: 1;
14+
background-color: var(--color-sec);
15+
}
16+
100% {
17+
scale: 1.1;
18+
background-color: var(--color-sec-hover);
19+
}
20+
}
21+
@keyframes deletebuttonanim {
22+
0% {
23+
scale: 1;
24+
}
25+
100% {
26+
background-color: rgb(252, 117, 117);
27+
color: black;
28+
}
29+
}
30+
@keyframes greenbuttonanim {
31+
0% {
32+
scale: 1;
33+
}
34+
100% {
35+
background-color: rgb(127, 201, 127);
36+
transform: scale(1.1);
37+
}
38+
}
1139

1240
/** Navbar animation*/
1341
nav:hover {
@@ -50,8 +78,7 @@ nav:hover {
5078
.resetclr:hover,
5179
.buttonreset:hover,
5280
.deleteproject:hover {
53-
background-color: rgb(252, 117, 117);
54-
color: black;
81+
animation: deletebuttonanim 0.1s linear forwards;
5582
transition: all 0.2s linear;
5683
cursor: pointer;
5784
}
@@ -73,22 +100,17 @@ nav:hover {
73100

74101
/** Projects */
75102
.grouptitle button:hover {
76-
transform: scale(1.1);
77-
background-color: var(--color-sec-hover);
78-
transition: all 0.1s linear;
103+
animation: buttonanim 0.1s linear forwards;
79104
}
80105
.project:hover,
81106
.backproject:hover,
82107
.backprojects:hover {
83-
transform: scale(1.1);
84-
background-color: var(--color-sec-hover);
108+
animation: buttonanim 0.1s linear forwards;
85109
transition: all 0.1s linear;
86110
cursor: pointer;
87111
}
88112
.openproject:hover {
89-
transform: scale(1.1);
90113
cursor: pointer;
91-
transition: all 0.1s linear;
92114
}
93115
.emojisinput {
94116
cursor: pointer;
@@ -97,8 +119,7 @@ nav:hover {
97119
cursor: pointer;
98120
}
99121
.submitonboarding:hover {
100-
background-color: rgb(127, 201, 127);
101-
transform: scale(1.1);
122+
animation: greenbuttonanim 0.1s linear forwards;
102123
transition: all 0.1s linear;
103124
cursor: pointer;
104125
}

‎css/projects.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,3 +263,32 @@
263263
outline: none;
264264
background-color: transparent;
265265
}
266+
267+
.progresscontainer {
268+
display: flex;
269+
align-items: center;
270+
gap: 20px;
271+
}
272+
.projectprogress {
273+
width: 50%;
274+
height: 20px;
275+
border-radius: 10px;
276+
background-color: var(--color-sec);
277+
border: none;
278+
}
279+
280+
.projectprogress::-webkit-progress-bar {
281+
background-color: var(--color-sec);
282+
border-radius: 10px;
283+
}
284+
285+
.projectprogress::-webkit-progress-value {
286+
background-color: green;
287+
border-radius: 10px;
288+
}
289+
290+
/* Firefox */
291+
.projectprogress::-moz-progress-bar {
292+
background-color: green;
293+
border-radius: 10px;
294+
}

‎package.json‎

Lines changed: 75 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,78 @@
11
{
2-
"name": "flyingtodo",
3-
"version": "1.4.4",
4-
"description": "A TODO list application to learn JS, that I will maybe continue later.",
5-
"main": "main.js",
6-
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1",
8-
"start": "electron-forge start",
9-
"package": "electron-forge package",
10-
"make": "electron-forge make",
11-
"publish": "electron-forge publish"
12-
},
13-
"repository": {
14-
"type": "git",
15-
"url": "git+https://github.com/FlyingCow31/FlyingToDo.git"
16-
},
17-
"keywords": [],
18-
"author": "FlyingCow31",
19-
"license": "MIT",
20-
"type": "commonjs",
21-
"bugs": {
22-
"url": "https://github.com/FlyingCow31/FlyingToDo/issues"
23-
},
24-
"homepage": "https://github.com/FlyingCow31/FlyingToDo#readme",
25-
"devDependencies": {
26-
"@electron-forge/cli": "^7.10.2",
27-
"@electron-forge/maker-deb": "^7.10.2",
28-
"@electron-forge/maker-rpm": "^7.10.2",
29-
"@electron-forge/maker-squirrel": "^7.10.2",
30-
"@electron-forge/maker-zip": "^7.10.2",
31-
"@electron-forge/plugin-auto-unpack-natives": "^7.10.2",
32-
"@electron-forge/plugin-fuses": "^7.10.2",
33-
"@electron-forge/publisher-github": "^7.10.2",
34-
"@electron/fuses": "^1.8.0",
35-
"electron": "^39.2.7"
36-
},
37-
"dependencies": {
38-
"electron-squirrel-startup": "^1.0.1",
39-
"electron-store": "^11.0.2",
40-
"update-electron-app": "^3.1.2"
41-
},
42-
"config": {
43-
"forge": {
44-
"packagerConfig": {
45-
"asar": true,
46-
"icon": "img/iconflyingtodovraie"
47-
},
48-
"makers": [
49-
{
50-
"name": "@electron-forge/maker-squirrel",
51-
"config": {
52-
"name": "flyingtodo",
53-
"setupIcon": "img/iconflyingtodovraie.ico"
2+
"name": "flyingtodo",
3+
"version": "1.5.0",
4+
"description": "A TODO list application to learn JS, that I will maybe continue later.",
5+
"main": "main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1",
8+
"start": "electron-forge start",
9+
"package": "electron-forge package",
10+
"make": "electron-forge make",
11+
"publish": "electron-forge publish"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/FlyingCow31/FlyingToDo.git"
16+
},
17+
"keywords": [],
18+
"author": "FlyingCow31",
19+
"license": "MIT",
20+
"type": "commonjs",
21+
"bugs": {
22+
"url": "https://github.com/FlyingCow31/FlyingToDo/issues"
23+
},
24+
"homepage": "https://github.com/FlyingCow31/FlyingToDo#readme",
25+
"devDependencies": {
26+
"@electron-forge/cli": "^7.10.2",
27+
"@electron-forge/maker-deb": "^7.10.2",
28+
"@electron-forge/maker-rpm": "^7.10.2",
29+
"@electron-forge/maker-squirrel": "^7.10.2",
30+
"@electron-forge/maker-zip": "^7.10.2",
31+
"@electron-forge/plugin-auto-unpack-natives": "^7.10.2",
32+
"@electron-forge/plugin-fuses": "^7.10.2",
33+
"@electron-forge/publisher-github": "^7.10.2",
34+
"@electron/fuses": "^1.8.0",
35+
"electron": "^39.2.7"
36+
},
37+
"dependencies": {
38+
"electron-squirrel-startup": "^1.0.1",
39+
"electron-store": "^11.0.2",
40+
"update-electron-app": "^3.1.2"
41+
},
42+
"config": {
43+
"forge": {
44+
"packagerConfig": {
45+
"asar": true,
46+
"icon": "img/iconflyingtodovraie"
47+
},
48+
"makers": [
49+
{
50+
"name": "@electron-forge/maker-squirrel",
51+
"config": {
52+
"name": "flyingtodo",
53+
"setupIcon": "img/iconflyingtodovraie.ico"
54+
}
55+
},
56+
{
57+
"name": "@electron-forge/maker-zip",
58+
"platforms": [
59+
"win32"
60+
]
61+
}
62+
],
63+
"publishers": [
64+
{
65+
"name": "@electron-forge/publisher-github",
66+
"config": {
67+
"repository": {
68+
"owner": "FlyingCow31",
69+
"name": "FlyingToDo"
70+
},
71+
"prerelease": false,
72+
"draft": false
73+
}
74+
}
75+
]
5476
}
55-
},
56-
{
57-
"name": "@electron-forge/maker-zip",
58-
"platforms": [
59-
"win32"
60-
]
61-
}
62-
],
63-
"publishers": [
64-
{
65-
"name": "@electron-forge/publisher-github",
66-
"config": {
67-
"repository": {
68-
"owner": "FlyingCow31",
69-
"name": "FlyingToDo"
70-
},
71-
"prerelease": false,
72-
"draft": false
73-
}
74-
}
75-
]
76-
}
77-
}
77+
}
7878
}

‎script/complex.js‎

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,7 @@ async function refreshProjectList() {
223223
// ! Function to clear the projects
224224
async function deleteAllProjects() {
225225
await db.projects.clear()
226+
await db.todosprojects.clear()
226227
await refreshProjectList()
227228
}
228229

@@ -236,23 +237,27 @@ async function loadProject(id) {
236237
projectContainer.innerHTML = `
237238
<div class="emoji inproject">
238239
<p class="emojisinput">${project.emoji}</p>
239-
<input class="titleinproject" value="${project.name}" maxlength="15"></input>
240+
<input class="titleinproject" value="${project.name}" maxlength="15" />
240241
<div class="buttoncontainer">
241242
<button class="deleteproject">Delete</button>
242243
<button class="backproject">< Retour</button>
243244
</div>
244-
245245
</div>
246-
<input class="descinproject" value="${project.description}"></input>
246+
<input class="descinproject" value="${project.description}" />
247+
<div class="progresscontainer">
248+
<p>Project Progress:</p>
249+
<progress class="projectprogress" value="0" max="100"></progress>
250+
<p id="progresspercent">0%</p>
251+
</div>
252+
247253
<div class="newtodocontainer">
248254
<p>Todos:</p>
249255
<div class="addnewtodoinproject">
250256
<input type="checkbox" class="checknewtodo" />
251257
<input type="text" maxlength="20" placeholder="New ToDo" class="newtodoinput" />
252258
</div>
253259
</div>
254-
<div class="containertodoinproject">
255-
</div>
260+
<div class="containertodoinproject"></div>
256261
`
257262

258263
createTodoInDOM(id)
@@ -265,6 +270,7 @@ async function loadProject(id) {
265270
backproject.addEventListener("click", () => {
266271
projectContainer.classList.toggle("active")
267272
projectpopup.classList.toggle("active")
273+
modifyDataOfProject(id)
268274
})
269275
// ! Get the value for the todo item
270276
const newtodoinput = document.querySelector(".newtodoinput")
@@ -319,15 +325,20 @@ async function createTodoInDOM(id) {
319325
<input type="checkbox" ${todo.completed ? "checked" : ""} class="checkInTodoProject"/>
320326
<p class="todoprojectname">${todo.text}</p>
321327
`
328+
if (todo.completed == true) {
329+
divtodoinproject.style.opacity = "0.6"
330+
const todoprojectname = divtodoinproject.querySelector(".todoprojectname")
331+
todoprojectname.style.textDecoration = "line-through"
332+
}
322333

323334
const checkbox = divtodoinproject.querySelector(".checkInTodoProject")
324335
checkbox.addEventListener("change", () => {
325-
db.todosprojects.delete(todo.id)
326-
console.log("Todo deleted:", todo)
336+
db.todosprojects.update(todo.id, { completed: checkbox.checked })
327337
createTodoInDOM(id)
328338
})
329339
containertodoproj.prepend(divtodoinproject)
330340
})
341+
ProgressBarCalculation(id)
331342
}
332343

333344
// ! Save Title + description in the project
@@ -352,3 +363,23 @@ async function removeProject(id) {
352363
console.log(`Erreur: ${error}`)
353364
}
354365
}
366+
367+
// ! Percentage Calculation
368+
async function ProgressBarCalculation(id) {
369+
const totalTodos = await db.todosprojects.where("projectId").equals(id).count()
370+
let completedCount = await db.todosprojects
371+
.where("projectId")
372+
.equals(id)
373+
.and((todo) => todo.completed === true)
374+
.count()
375+
376+
let percentage = Math.round((completedCount / totalTodos) * 100)
377+
378+
const progressBar = document.querySelector(".projectprogress")
379+
const progressText = document.getElementById("progresspercent")
380+
381+
progressBar.value = percentage
382+
progressText.textContent = `${percentage}%`
383+
384+
console.log(percentage)
385+
}

0 commit comments

Comments
 (0)