Skip to content

Commit 3a2bcd3

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day #62
1 parent 8fb6a1c commit 3a2bcd3

File tree

10 files changed

+206
-0
lines changed

10 files changed

+206
-0
lines changed

‎Day #62 - Chrome Todo Extension/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #62
2+
3+
### Chrome ToDo Extension
4+
In this tutorial ([Open in Youtube](https://youtu.be/ny-L_KLrKIU)), I am gonna showing to you how to code a chrome extension with javascript. we will create a simple todo app extension for chrome using html, css and javascript❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](screenshot.jpg)

‎Day #62 - Chrome Todo Extension/icons/icon128.png

6.41 KB
Loading

‎Day #62 - Chrome Todo Extension/icons/icon16.png

795 Bytes
Loading

‎Day #62 - Chrome Todo Extension/icons/icon32.png

1.62 KB
Loading

‎Day #62 - Chrome Todo Extension/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Day #62 - Chrome Todo Extension | AsmrProg</title>
9+
</head>
10+
11+
<body>
12+
13+
<div id="container">
14+
<input type="text" id="new-task" placeholder="Add a new task...">
15+
<button id="add-task">Add Task</button>
16+
<ul id="task-list"></ul>
17+
</div>
18+
19+
20+
<script src="script.js"></script>
21+
</body>
22+
23+
</html>

‎Day #62 - Chrome Todo Extension/manifest.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Chrome To-Do",
4+
"description": "A simple and clean to-do list extension! Coded by AsmrProg.",
5+
"version": "1.0",
6+
"action": {
7+
"default_popup": "index.html"
8+
},
9+
"permissions": [
10+
"storage"
11+
],
12+
"icons": {
13+
"16": "icons/icon16.png",
14+
"32": "icons/icon32.png",
15+
"128": "icons/icon128.png"
16+
}
17+
}

‎Day #62 - Chrome Todo Extension/screenshot.jpg

78 KB
Loading

‎Day #62 - Chrome Todo Extension/script.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
document.addEventListener('DOMContentLoaded', function () {
2+
document.getElementById('add-task').addEventListener('click', addTaskFromInput);
3+
loadTasks();
4+
});
5+
6+
function addTaskFromInput() {
7+
const taskValue = document.getElementById('new-task').value;
8+
if (taskValue) {
9+
addTask(taskValue);
10+
document.getElementById('new-task').value = '';
11+
saveTasks();
12+
}
13+
}
14+
15+
function addTask(taskValue, isCompleted = false) {
16+
const ul = document.getElementById('task-list');
17+
const li = document.createElement('li');
18+
19+
const checkbox = document.createElement('input');
20+
checkbox.type = 'checkbox';
21+
checkbox.checked = isCompleted;
22+
checkbox.addEventListener('change', toggleTask);
23+
24+
const text = document.createElement('span');
25+
text.textContent = taskValue;
26+
text.style.textDecoration = isCompleted ? 'line-through' : 'none';
27+
28+
const editButton = document.createElement('button');
29+
editButton.textContent = 'Edit';
30+
editButton.addEventListener('click', editTask);
31+
32+
const deleteButton = document.createElement('button');
33+
deleteButton.textContent = 'Delete';
34+
deleteButton.addEventListener('click', deleteTask);
35+
36+
li.appendChild(checkbox);
37+
li.appendChild(text);
38+
li.appendChild(editButton);
39+
li.appendChild(deleteButton);
40+
41+
ul.appendChild(li);
42+
43+
}
44+
45+
function saveTasks() {
46+
const tasks = [];
47+
document.querySelectorAll('#task-list li').forEach(function (taskLi) {
48+
const text = taskLi.querySelector('span').textContent;
49+
const isCompleted = taskLi.querySelector('input').checked;
50+
tasks.push({ text, isCompleted });
51+
});
52+
localStorage.setItem('tasks', JSON.stringify(tasks));
53+
}
54+
55+
function loadTasks() {
56+
const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
57+
tasks.forEach(function (task) {
58+
addTask(task.text, task.isCompleted);
59+
});
60+
}
61+
62+
function toggleTask(event) {
63+
const text = event.target.nextElementSibling;
64+
text.style.textDecoration = event.target.checked ? 'line-through' : 'none';
65+
saveTasks();
66+
}
67+
68+
function deleteTask(event) {
69+
const li = event.target.parentNode;
70+
li.parentNode.removeChild(li);
71+
saveTasks();
72+
}
73+
74+
function editTask(event) {
75+
const textSpan = event.target.previousElementSibling;
76+
const newText = prompt("Edit Your Task", textSpan.textContent);
77+
if (newText !== null) {
78+
textSpan.textContent = newText;
79+
saveTasks();
80+
}
81+
}

‎Day #62 - Chrome Todo Extension/style.css

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
body{
2+
font-family: 'Arial', sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #f4f4f4;
6+
width: 350px;
7+
}
8+
9+
#container{
10+
background-color: #fff;
11+
padding: 15px;
12+
border-radius: 8px;
13+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
14+
}
15+
16+
#new-task{
17+
padding: 10px;
18+
width: calc(100% - 20px);
19+
margin-bottom: 10px;
20+
border: 1px solid #ddd;
21+
border-radius: 4px;
22+
outline: none;
23+
}
24+
25+
#add-task{
26+
padding: 10px;
27+
width: 100%;
28+
background-color: #4caf50;
29+
color: #fff;
30+
border: none;
31+
border-radius: 4px;
32+
cursor: pointer;
33+
margin-top: 10px;
34+
font-size: 13px;
35+
transition: opacity 0.3s ease;
36+
}
37+
38+
#task-list{
39+
margin-top: 20px;
40+
list-style: none;
41+
padding: 0;
42+
}
43+
44+
#task-list li{
45+
display: flex;
46+
align-items: center;
47+
padding: 10px;
48+
background-color: #e0e0e0;
49+
margin-bottom: 5px;
50+
border-radius: 4px;
51+
overflow: hidden;
52+
}
53+
54+
#task-list li span{
55+
flex-grow: 1;
56+
margin-left: 10px;
57+
word-break: break-all;
58+
}
59+
60+
input[type='checkbox']{
61+
cursor: pointer;
62+
}
63+
64+
button:not(#add-task){
65+
margin-left: 5px;
66+
padding: 5px 8px;
67+
border: none;
68+
border-radius: 4px;
69+
cursor: pointer;
70+
font-size: 12px;
71+
}
72+
73+
button:hover{
74+
opacity: 0.8;
75+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ Here we have list of projects:
7171
59. Snake Pong Game
7272
60. Wikipedia Searcher
7373
61. Api Quiz Game
74+
62. Chrome ToDo Extension
7475

7576
## Where is rest 39 Projects
7677

0 commit comments

Comments
 (0)