Skip to content

Commit d72cc99

Browse files
iamwatchdogsiamwatchdogs
authored
PR #24: Todolist
 Merge pull request #24 from 160121/todolist
2 parents 06e2427 + a565df8 commit d72cc99

File tree

4 files changed

+195
-0
lines changed

4 files changed

+195
-0
lines changed

‎TodoList/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>To-Do list</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>TODOLIST</h1>
13+
<div class="form">
14+
<input type="text" class="tab" placeholder="Enter task to add" />
15+
<button class="addToDo">+</button>
16+
</div>
17+
<div class="todo"></div>
18+
<div class="foot">
19+
<div class="count">0 tasks done</div>
20+
<button class="removeChecked">Remove Checked ❎</button>
21+
</div>
22+
</div>
23+
24+
<script src="index.js"></script>
25+
</body>
26+
</html>

‎TodoList/index.js

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
const input = document.querySelector('.tab');
2+
const addButton = document.querySelector('.addToDo');
3+
const todoContainer = document.querySelector('.todo');
4+
const countDisplay = document.querySelector('.count');
5+
const removeButton = document.querySelector('.removeChecked');
6+
let completedCount = 0;
7+
let totalCount = 0;
8+
9+
addButton.addEventListener('click', function (e) {
10+
e.preventDefault();
11+
const paragraph1 = document.createElement('div');
12+
const paragraph2 = document.createElement('div');
13+
const cont = document.createElement('div');
14+
const checkbox = document.createElement('input');
15+
checkbox.type = 'checkbox';
16+
paragraph1.appendChild(checkbox);
17+
const text = document.createTextNode(input.value);
18+
paragraph1.appendChild(text);
19+
const editButton = document.createElement('button');
20+
editButton.textContent = '✒️';
21+
paragraph2.appendChild(editButton);
22+
const deleteButton = document.createElement('button');
23+
deleteButton.textContent = '❎';
24+
paragraph2.appendChild(deleteButton);
25+
cont.appendChild(paragraph1);
26+
cont.appendChild(paragraph2);
27+
todoContainer.appendChild(cont);
28+
input.value = '';
29+
totalCount++;
30+
updateCountDisplay();
31+
checkbox.addEventListener('click', function () {
32+
if (checkbox.checked) {
33+
cont.style.textDecoration = 'line-through';
34+
completedCount++;
35+
} else {
36+
cont.style.textDecoration = 'none';
37+
completedCount--;
38+
}
39+
updateCountDisplay();
40+
});
41+
editButton.addEventListener('click', function () {
42+
const editText = prompt('Edit task:', text.textContent);
43+
if (editText !== null) {
44+
text.textContent = editText;
45+
}
46+
});
47+
deleteButton.addEventListener('click', function () {
48+
todoContainer.removeChild(cont);
49+
totalCount--;
50+
if (checkbox.checked) {
51+
completedCount--;
52+
}
53+
updateCountDisplay();
54+
});
55+
});
56+
57+
function updateCountDisplay() {
58+
countDisplay.textContent = `${completedCount} of ${totalCount} tasks done`;
59+
const completionRatio = completedCount / totalCount;
60+
if (completionRatio < 0.25) {
61+
countDisplay.style.backgroundimage = '#ff6347';
62+
} else if (completionRatio < 0.5) {
63+
countDisplay.style.backgroundColor = '#ffd700';
64+
} else if (completionRatio < 0.75) {
65+
countDisplay.style.backgroundColor = '#7cfc00';
66+
} else {
67+
countDisplay.style.backgroundColor = '#00ff7f';
68+
}
69+
//countDisplay.style.backgroundimage='linear-gradient(to right,yellow completionRatio%,transparent)';
70+
}
71+
72+
removeButton.addEventListener('click', function () {
73+
const checkboxes = todoContainer.querySelectorAll('input[type=checkbox]');
74+
checkboxes.forEach(function (checkbox) {
75+
if (checkbox.checked) {
76+
const cont = checkbox.parentNode.parentNode;
77+
todoContainer.removeChild(cont);
78+
totalCount--;
79+
if (checkbox.checked) {
80+
completedCount--;
81+
}
82+
}
83+
});
84+
updateCountDisplay();
85+
});

‎TodoList/readme.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# TodoList
2+
3+
TodoList is a simple web application that helps you manage your tasks and stay organized. With TodoList, you can add new tasks, mark them as completed, and delete them when you're done.
4+
5+
## Features
6+
7+
- Add new tasks to your to-do list
8+
- Mark tasks as completed
9+
- Delete tasks from your to-do list
10+
- Simple and easy to use interface
11+
12+
## Usage
13+
14+
1. Enter the task that you want to add to your to-do list in the text box and press the "Add" button.
15+
2. Your new task will be added to the list.
16+
3. To mark a task as completed, simply click on the checkbox next to the task.
17+
4. To delete a task, click on the "Delete" button next to the task.
18+
5. To clear all completed tasks, click on the "Clear completed tasks" button.

‎TodoList/style.css

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
box-sizing: border-box;
5+
}
6+
body{
7+
background-image: linear-gradient(to right,rgb(0, 128, 255),rgb(135, 206, 235));
8+
}
9+
.container{
10+
background-color: aliceblue;
11+
margin:10rem auto;
12+
width:60%;
13+
padding:2rem;
14+
}
15+
.addToDo,.removeChecked{
16+
padding: 1rem;
17+
background-image:linear-gradient(to right,rgb(0, 128, 255),rgb(135, 206, 235)) ;
18+
border:none;
19+
border-radius: 4px;
20+
color: white;
21+
font-size: 18px;
22+
}
23+
h1{
24+
margin-top: 1rem;
25+
text-align: center;
26+
}
27+
input{
28+
border:2px solid rgba(97, 156, 7, 0.733);
29+
border-radius: 4px;
30+
padding:1rem;
31+
width:90%;
32+
margin:2rem auto;
33+
}
34+
.todo button{
35+
border:none;
36+
margin: 0 1rem 0 1rem;
37+
}
38+
.todo div{
39+
padding: 0%;
40+
display: flex;
41+
align-items: center;
42+
justify-content: space-between;
43+
}
44+
.todo div:hover{
45+
background-color:rgba(226, 220, 220, 0.929);
46+
}
47+
.count{
48+
padding: 1rem;
49+
background-color: aqua;
50+
border:none;
51+
border-radius: 4px;
52+
font-size: 18px;
53+
}
54+
.foot{
55+
display: flex;
56+
flex-direction: row;
57+
align-items: center;
58+
justify-content:space-between;
59+
}
60+
input[type="checkbox"]{
61+
width:auto;
62+
margin-right:.5rem;
63+
margin-left: .5rem;
64+
}
65+
66+

0 commit comments

Comments
 (0)