Skip to content

Commit 2d1cc69

Browse files
AnkushSinghGandhiAnkushSinghGandhi
authored
Merge pull request #2 from chirag828049/main
Created the TODO list extension
2 parents bb5343f + 6f64170 commit 2d1cc69

File tree

6 files changed

+269
-1
lines changed

6 files changed

+269
-1
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
# todo-list-extension
1+
# TODO-list-extension
2+
3+
A Chrome extension which is an instant TODO list app
4+
## Demo
5+
![Screenshot from 2021-10-11 20-07-31](https://user-images.githubusercontent.com/75582834/136810984-0dfca7fd-4696-46d6-a9b7-ba444f87d93f.png)

‎index.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/*
2+
light-green: #F6F7D7
3+
Blue: #3EC1D3
4+
Orange: #FF9A00
5+
Red: #FF165D
6+
*/
7+
8+
html {
9+
padding: 0%;
10+
margin: 0%;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
min-width: 500px;
16+
min-height: 100px;
17+
font-size: 10px;
18+
font-family: 'Lato', sans-serif;
19+
background-color: #F6F7D7;
20+
color: #2A363B;
21+
padding: 0 2rem;
22+
}
23+
24+
.heading {
25+
text-align: center;
26+
font-size: 2rem;
27+
margin: 1rem 0 1.5rem 0;
28+
font-weight: bolder;
29+
}
30+
31+
.input-div {
32+
display: flex;
33+
justify-content: center;
34+
margin: 2rem 0;
35+
}
36+
37+
.task-input {
38+
width: 30rem;
39+
padding: 0.5rem 1rem;
40+
border: none;
41+
outline: none;
42+
background-color: #ff990091;
43+
font-size: 1rem;
44+
}
45+
46+
.tasks-list-div {
47+
display: flex;
48+
flex-direction: column;
49+
}
50+
51+
.task-div {
52+
display: flex;
53+
justify-content: space-between;
54+
margin: .7rem 0rem;
55+
}
56+
57+
.task-div:not(:last-child) {
58+
padding-bottom: 1.5rem;
59+
border-bottom : solid 1px black;
60+
}
61+
62+
.task-text {
63+
justify-self: center;
64+
max-width: 20rem;
65+
word-wrap: break-word;
66+
font-size: 1.3rem;
67+
vertical-align: middle;
68+
line-height: 1.5;
69+
}
70+
71+
.task-completed {
72+
text-decoration: line-through;
73+
font-style: italic;
74+
color: #2a363b80;
75+
}
76+
77+
.task-controls {
78+
display: flex;
79+
align-items: center;
80+
}
81+
82+
.task-clear-div {
83+
display: flex;
84+
justify-content: center;
85+
margin: 2.5rem 0 1.5rem 0;
86+
}
87+
88+
.task-btn {
89+
min-width: 4rem;
90+
border: none;
91+
outline: none;
92+
padding: .7rem .9rem;
93+
background-color: #FF9A00;
94+
}
95+
96+
.task-btn:not(:last-child) {
97+
border-right : solid 1px black;
98+
}
99+
100+
.task-btn:hover, .task-btn:focus {
101+
background-color: #FF165D;
102+
}
103+
104+
.task-input, .task-btn-edit {
105+
border-radius: 7px 0 0 7px;
106+
}
107+
108+
.task-btn-submit, .task-btn-do {
109+
border-radius: 0 7px 7px 0;
110+
}
111+
112+
.task-btn-clear {
113+
border-radius: 7px;
114+
}

‎index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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>my todo list</title>
8+
<link rel="stylesheet" href="index.css">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
12+
</head>
13+
<body>
14+
<div class="heading">My TODO List</div>
15+
<div class="input-div">
16+
<input type="text" id="task-input" class="task-input" placeholder="Enter a task to fulfill"/>
17+
<button id="task-submit-btn" class="task-btn task-btn-submit">Add</button>
18+
</div>
19+
<div class="tasks-list-div" id="tasksList"></div>
20+
<div class="task-clear-div">
21+
<button id="task-clear-btn" class="task-btn task-btn-clear">Clear All</button>
22+
</div>
23+
</body>
24+
<script src="script.js"></script>
25+
</html>

‎logo.png‎

2.41 KB
Loading

‎manifest.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "TODO list",
4+
"version": "1.0.0",
5+
"description": "A simple TODO list",
6+
"action": {
7+
"default_popup": "index.html",
8+
"default_icon": "logo.png"
9+
},
10+
"icons": {
11+
"16": "logo.png",
12+
"32": "logo.png",
13+
"48": "logo.png",
14+
"128": "logo.png"
15+
}
16+
}

‎script.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
var taskArr = [];
2+
3+
const updateView = () => {
4+
5+
const tasksList = document.getElementById("tasksList");
6+
7+
var child = tasksList.lastChild;
8+
while(child) {
9+
tasksList.removeChild(child);
10+
child = tasksList.lastChild;
11+
}
12+
13+
taskArr.forEach((Element, index) => {
14+
15+
const newTask = document.createElement("div");
16+
newTask.setAttribute("class", "task-div");
17+
18+
const taskText = document.createElement("div");
19+
taskText.setAttribute("class", Element.isDone ? "task-text task-completed" : "task-text");
20+
taskText.innerHTML = (index + 1) + ". " + Element.task;
21+
22+
const taskControls = document.createElement("div");
23+
taskControls.setAttribute("class", "task-controls");
24+
25+
const taskEdit = document.createElement("button");
26+
taskEdit.innerHTML = "Edit";
27+
taskEdit.setAttribute("id", index + "edit");
28+
taskEdit.setAttribute("class", "task-btn task-btn-edit");
29+
taskEdit.addEventListener("click", (event) => editTask(event.target.id));
30+
31+
const taskDelete = document.createElement("button");
32+
taskDelete.innerHTML = "Delete";
33+
taskDelete.setAttribute("id", index + "delete");
34+
taskDelete.setAttribute("class", "task-btn task-btn-delete");
35+
taskDelete.addEventListener("click", (event) => deleteTask(event.target.id));
36+
37+
const taskDo = document.createElement("button");
38+
taskDo.innerHTML = Element.isDone ? "Undo" : "Done";
39+
taskDo.setAttribute("id", index + "do");
40+
taskDo.setAttribute("class", "task-btn task-btn-do");
41+
taskDo.addEventListener("click", (event) => doTask(event.target.id));
42+
43+
taskControls.appendChild(taskEdit);
44+
taskControls.appendChild(taskDelete);
45+
taskControls.appendChild(taskDo);
46+
47+
newTask.appendChild(taskText);
48+
newTask.appendChild(taskControls);
49+
50+
tasksList.appendChild(newTask);
51+
});
52+
}
53+
54+
const addTask = (isDone) => {
55+
56+
const task = document.getElementById("task-input").value;
57+
if(task === null || task.trim() === "") return;
58+
taskArr.push({task, isDone});
59+
localStorage.setItem("savedTasks", JSON.stringify(taskArr));
60+
updateView();
61+
62+
const taskInput = document.getElementById("task-input");
63+
taskInput.value = "";
64+
}
65+
66+
const editTask = (id) => {
67+
68+
const taskIndex = parseInt(id[0]);
69+
const taskText = taskArr[taskIndex].task;
70+
taskArr.splice(taskIndex, 1);
71+
localStorage.setItem("savedTasks", JSON.stringify(taskArr));
72+
updateView();
73+
74+
const taskInput = document.getElementById("task-input");
75+
taskInput.value = taskText;
76+
}
77+
78+
const deleteTask = (id) => {
79+
80+
const taskIndex = parseInt(id[0]);
81+
taskArr.splice(taskIndex, 1);
82+
localStorage.setItem("savedTasks", JSON.stringify(taskArr));
83+
updateView();
84+
}
85+
86+
const doTask = (id) => {
87+
88+
const taskIndex = parseInt(id[0]);
89+
taskArr[taskIndex].isDone = !taskArr[taskIndex].isDone;
90+
localStorage.setItem("savedTasks", JSON.stringify(taskArr));
91+
updateView();
92+
}
93+
94+
document.addEventListener("DOMContentLoaded", () => {
95+
96+
const savedTasks = JSON.parse(localStorage.getItem("savedTasks"));
97+
if(savedTasks !== null) taskArr = [...savedTasks];
98+
updateView();
99+
})
100+
101+
document.getElementById("task-submit-btn").addEventListener("click", () => addTask(false));
102+
103+
document.getElementById("task-clear-btn").addEventListener("click", () => {
104+
105+
localStorage.clear();
106+
taskArr = [];
107+
updateView();
108+
})
109+

0 commit comments

Comments
 (0)