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 2c240cc

Browse files
Add README for To-Do List project
1 parent cb5d5df commit 2c240cc

File tree

5 files changed

+257
-0
lines changed

5 files changed

+257
-0
lines changed

‎to-do-list/REDME.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# To-Do List – JavaScript Project
2+
3+
This is a beautiful **To-Do List App** built using **HTML, CSS , and **JavaScript**.
4+
It has a **dark theme**
5+
6+
---
7+
8+
## Features
9+
- Add, delete, and mark tasks as completed
10+
- Dark mode
11+
- Persistent data using `localStorage` (optional)
12+
- Responsive design – mobile friendly
13+
14+
---
15+
16+
## Technologies Used
17+
- **HTML** – layout structure
18+
- **CSS** – modern styling
19+
- **JavaScript** – task logic and DOM manipulation
20+
21+
---
22+
23+
## Screenshots
24+
> *Preview*
25+
![To-Do List UI](screenshot.png)
26+
27+
---
28+
29+
## How to Use
30+
1. Open `index.html` in your browser
31+
2. Type a task and click **Add**
32+
3. Click the checkbox to mark as done
33+
4. Use delete icon to remove task
34+
35+
---
36+
37+
## Learning Experience
38+
In this project, I learned:
39+
- Handling dynamic DOM elements
40+
- Working with arrays to manage tasks
41+
42+
43+
---
44+
45+
## Future Plans
46+
- Add `localStorage` support to save tasks
47+
- Add drag-and-drop to reorder tasks
48+
- Add filters: All / Completed / Pending
49+
- Add sound or animation feedback on actions
50+
51+
---
52+
53+
## Connect
54+
55+
- Instagram: [@codezenashish](https://www.instagram.com/codezenashish/)
56+
- GitHub: [codezenashish](https://github.com/codezenashish)

‎to-do-list/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
<link rel="stylesheet" href="./style.css" />
7+
<title>To Do List</title>
8+
</head>
9+
<body>
10+
<div class="todo-container">
11+
<h1 class="todo-header">To-Do List</h1>
12+
13+
<div class="todo-input-container">
14+
<input type="text" id="todoInput" class="todo-input" placeholder="Add a new task...">
15+
<button id="addButton" class="add-button">Add</button>
16+
</div>
17+
18+
<ul id="todoList" class="todo-list">
19+
<!-- <li class="todo-item">
20+
<input type="checkbox" class="todo-checkbox" checked>
21+
<span class="todo-text">Complete Svelte tutorial</span>
22+
<button class="delete-button">✕</button>
23+
</li> -->
24+
</ul>
25+
</div>
26+
27+
<script src="./main.js"></script>
28+
</body>
29+
</html>

‎to-do-list/main.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const todoInput = document.getElementById("todoInput");
2+
const addButton = document.getElementById("addButton");
3+
const todoList = document.getElementById("todoList");
4+
5+
addButton.addEventListener("click", function () {
6+
if (todoInput.value.trim() !== "") {
7+
const newItem = document.createElement("li");
8+
newItem.className = "todo-item";
9+
10+
const checkbox = document.createElement("input");
11+
checkbox.type = "checkbox";
12+
checkbox.className = "todo-checkbox";
13+
14+
const text = document.createElement("span");
15+
text.className = "todo-text";
16+
text.textContent = todoInput.value.trim();
17+
18+
const deleteBtn = document.createElement("button");
19+
deleteBtn.textContent = "X";
20+
deleteBtn.className = "delete-button";
21+
deleteBtn.addEventListener("click", function () {
22+
newItem.remove();
23+
});
24+
25+
newItem.appendChild(checkbox);
26+
newItem.appendChild(text);
27+
newItem.appendChild(deleteBtn);
28+
29+
todoList.appendChild(newItem);
30+
todoInput.value = "";
31+
}
32+
});

‎to-do-list/screenshot.png

21.7 KB
Loading[フレーム]

‎to-do-list/style.css

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
6+
}
7+
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
min-height: 100vh;
13+
background-color: #121212;
14+
}
15+
16+
.todo-container {
17+
width: 90%;
18+
max-width: 500px;
19+
background-color: #1e1e1e;
20+
border-radius: 20px;
21+
padding: 30px;
22+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
23+
}
24+
25+
.todo-header {
26+
color: white;
27+
font-size: 2.5rem;
28+
font-weight: bold;
29+
margin-bottom: 20px;
30+
text-align: center;
31+
}
32+
33+
.todo-input-container {
34+
display: flex;
35+
margin-bottom: 20px;
36+
background-color: #2a2a2a;
37+
border-radius: 15px;
38+
overflow: hidden;
39+
}
40+
41+
.todo-input {
42+
flex: 1;
43+
padding: 15px 20px;
44+
border: none;
45+
background-color: transparent;
46+
color: #aaa;
47+
font-size: 1.1rem;
48+
outline: none;
49+
}
50+
51+
.add-button {
52+
padding: 15px 25px;
53+
border: none;
54+
background-color: transparent;
55+
color: white;
56+
font-size: 1.1rem;
57+
cursor: pointer;
58+
font-weight: bold;
59+
background-color: #3f4240;
60+
border-top-left-radius: 15px;
61+
border-bottom-left-radius: 15px;
62+
}
63+
64+
.todo-list {
65+
list-style-type: none;
66+
}
67+
68+
.todo-item {
69+
display: flex;
70+
align-items: center;
71+
background-color: #2a2a2a;
72+
border-radius: 15px;
73+
padding: 15px 20px;
74+
margin-bottom: 10px;
75+
}
76+
77+
.todo-checkbox {
78+
appearance: none;
79+
-webkit-appearance: none;
80+
width: 24px;
81+
height: 24px;
82+
border-radius: 50%;
83+
border: 2px solid #444;
84+
margin-right: 15px;
85+
cursor: pointer;
86+
position: relative;
87+
display: flex;
88+
justify-content: center;
89+
align-items: center;
90+
}
91+
92+
.todo-checkbox:checked {
93+
background-color: #2ecc71;
94+
border-color: #2ecc71;
95+
}
96+
97+
.todo-checkbox:checked::after {
98+
content: "✓";
99+
color: white;
100+
font-size: 14px;
101+
font-weight: bold;
102+
}
103+
104+
.todo-text {
105+
flex: 1;
106+
color: white;
107+
font-size: 1.1rem;
108+
}
109+
110+
.todo-checkbox:checked + .todo-text {
111+
text-decoration: line-through;
112+
opacity: 0.7;
113+
}
114+
115+
.delete-button {
116+
width: 30px;
117+
height: 30px;
118+
border-radius: 50%;
119+
background-color: #e74c3c;
120+
color: white;
121+
border: none;
122+
display: flex;
123+
justify-content: center;
124+
align-items: center;
125+
cursor: pointer;
126+
font-weight: bold;
127+
font-size: 14px;
128+
}
129+
130+
.todo-item:hover {
131+
background-color: #333;
132+
}
133+
134+
.add-button:hover {
135+
background-color: #333;
136+
}
137+
138+
.delete-button:hover {
139+
background-color: #c0392b;
140+
}

0 commit comments

Comments
(0)

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