Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 90b7710

Browse files
todoApp
1 parent e16f574 commit 90b7710

File tree

4 files changed

+215
-0
lines changed

4 files changed

+215
-0
lines changed

‎Index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,22 @@ <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
212212
</svg>
213213
</a>
214214
</div>
215+
</div>
216+
<div class="main flex text-center mt-10">
217+
<div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
218+
<a href="#">
219+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Todo App</h5>
220+
</a>
221+
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
222+
<a href="TodoAppProject/index.html" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
223+
Read more
224+
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
225+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
226+
</svg>
227+
</a>
228+
</div>
229+
230+
215231
</div>
216232
</body>
217233
</html>

‎TodoAppProject/app.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// let parent = document.getElementById('parent')
2+
// let child2 = document.getElementById('child2')
3+
// console.log('parent ==>',parent);
4+
// console.log('parent with children ==> ',parent.children);
5+
6+
// console.log('child2 ==> ',child2);
7+
// console.log('child2 parent ==> ',child2.parentElement);
8+
// console.log('child2 previousSibling ==> ',child2.previousElementSibling);
9+
// console.log('child2 nextSibling ==> ',child2.nextElementSibling);
10+
11+
let todo_input = document.getElementById('todo_input')
12+
let add_todo_btn = document.getElementById('add_todo_btn')
13+
let delete_all_todo_btn = document.getElementById('delete_all_todo_btn')
14+
let todo_list = document.getElementById('todo_list')
15+
16+
add_todo_btn.addEventListener('click',function(){
17+
if(!todo_input.value) return alert('Please Add Todo')
18+
19+
let list_item = `<li class="todo_item">
20+
<span>${todo_input.value}</span>
21+
<i class="fa-solid fa-pen-to-square editIcon" onclick="edit_todo(this)" title="Edit"></i>
22+
<i class="fa-solid fa-trash deleteIcon" onclick="delete_todo(this)" title="Delete"></i>
23+
</li>`
24+
todo_list.innerHTML += list_item
25+
26+
todo_input.value = ''
27+
})
28+
29+
30+
function delete_todo(element){
31+
element.parentElement.remove()
32+
// console.log('Delete == >', element.parentElement);
33+
34+
}
35+
36+
function edit_todo(element){
37+
let previousValue = element.previousElementSibling.innerText;
38+
let updatedValue = prompt('Enter Updated Value',previousValue)
39+
element.previousElementSibling.innerText = updatedValue
40+
console.log('Edit == >', element.parentElement);
41+
42+
}
43+
44+
delete_all_todo_btn.addEventListener('click',function(){
45+
todo_list.innerHTML = ''
46+
})

‎TodoAppProject/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Todo App</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" integrity="sha512-DxV+EoADOkOygM4IR9yXP8Sb2qwgidEmeqAEmDKIOfPRQZOWbXCzLC6vjbZyy0vPisbH2SyW27+ddLVCN+OMzQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9+
</head>
10+
<body>
11+
<h1>Todo App</h1>
12+
<!-- <div id="parent">
13+
<h1 id="child1"></h1>
14+
<h1 id="child2"></h1>
15+
<h1 id="child3"></h1>
16+
<h1 id="child4"></h1>
17+
</div> -->
18+
<div>
19+
<input type="text" placeholder="Enter Your Todo" id="todo_input">
20+
<button id="add_todo_btn">Add Todo</button>
21+
<button id="delete_all_todo_btn">Delete All</button>
22+
</div>
23+
<ul id="todo_list">
24+
25+
</ul>
26+
<script src="app.js"></script>
27+
</body>
28+
</html>

‎TodoAppProject/style.css

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/* Reset some defaults */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: Arial, Helvetica, sans-serif;
7+
}
8+
9+
body {
10+
background: #f3f4f6;
11+
color: #333;
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
padding: 40px 20px;
16+
min-height: 100vh;
17+
}
18+
19+
h1 {
20+
font-size: 2.2rem;
21+
margin-bottom: 20px;
22+
color: #111827;
23+
}
24+
25+
/* Input & buttons section */
26+
div {
27+
margin-bottom: 20px;
28+
display: flex;
29+
gap: 10px;
30+
flex-wrap: wrap;
31+
justify-content: center;
32+
}
33+
34+
input[type="text"] {
35+
padding: 10px 14px;
36+
font-size: 1rem;
37+
border: 2px solid #d1d5db;
38+
border-radius: 8px;
39+
outline: none;
40+
min-width: 220px;
41+
transition: all 0.2s ease;
42+
}
43+
44+
input[type="text"]:focus {
45+
border-color: #2563eb;
46+
box-shadow: 0 0 5px rgba(37, 99, 235, 0.3);
47+
}
48+
49+
button {
50+
padding: 10px 16px;
51+
font-size: 1rem;
52+
border: none;
53+
border-radius: 8px;
54+
cursor: pointer;
55+
transition: all 0.2s ease;
56+
}
57+
58+
/* Button Colors */
59+
#add_todo_btn {
60+
background: #2563eb;
61+
color: white;
62+
}
63+
#add_todo_btn:hover {
64+
background: #1d4ed8;
65+
}
66+
67+
#delete_all_todo_btn {
68+
background: #dc2626;
69+
color: white;
70+
}
71+
#delete_all_todo_btn:hover {
72+
background: #b91c1c;
73+
}
74+
75+
.todo_item i {
76+
margin-left: 10px;
77+
cursor: pointer;
78+
font-size: 1.3rem;
79+
transition: color 0.2s ease;
80+
}
81+
82+
/* Edit Icon */
83+
.editIcon {
84+
color: #f59e0b;
85+
}
86+
.editIcon:hover {
87+
color: #d97706;
88+
}
89+
90+
/* Delete Icon */
91+
.deleteIcon {
92+
color: #ef4444;
93+
}
94+
.deleteIcon:hover {
95+
color: #b91c1c;
96+
}
97+
98+
99+
/* Todo List */
100+
ul {
101+
list-style: none;
102+
width: 100%;
103+
max-width: 500px;
104+
}
105+
106+
.todo_item {
107+
background: white;
108+
padding: 12px 16px;
109+
margin-bottom: 10px;
110+
border-radius: 10px;
111+
display: flex;
112+
justify-content: space-between;
113+
align-items: center;
114+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
115+
}
116+
117+
.todo_item span {
118+
flex: 1;
119+
font-size: 1rem;
120+
color: #374151;
121+
}
122+
123+
.todo_item button {
124+
margin-left: 8px;
125+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /