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 4902908

Browse files
Merge pull request #36 from tajulafreen/ToDoList
50Projects-HTML-CSS-JavaScript : To do list
2 parents 7f7003e + f0003dc commit 4902908

File tree

6 files changed

+194
-0
lines changed

6 files changed

+194
-0
lines changed

‎README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,17 @@ In order to run this project you need:
375375
</details>
376376
</li>
377377

378+
<li>
379+
<details>
380+
<summary>TO DO LIST</summary>
381+
<p>This project is a simple web-based To-Do List application that allows users to add tasks, categorize them, and filter tasks by category. The application is built using HTML, CSS, and JavaScript, with JavaScript modules to separate concerns and improve maintainability.</p>
382+
<ul>
383+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/ToDoList/">Live Demo</a></li>
384+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/ToDoList">Source</a></li>
385+
</ul>
386+
</details>
387+
</li>
388+
378389
</ol>
379390

380391
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/ToDoList/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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>To-Do List with Categories</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>To-Do List</h1>
12+
<div class="form-container">
13+
<input type="text" id="task-input" placeholder="Enter task" />
14+
<select id="category-select">
15+
<option value="">Select Category</option>
16+
<option value="Work">Work</option>
17+
<option value="Personal">Personal</option>
18+
<option value="Urgent">Urgent</option>
19+
</select>
20+
<button class="add-btn">Add Task</button>
21+
</div>
22+
<div class="filter-container">
23+
<label for="filter-select">Filter by Category:</label>
24+
<select id="filter-select">
25+
<option value="">All</option>
26+
<option value="Work">Work</option>
27+
<option value="Personal">Personal</option>
28+
<option value="Urgent">Urgent</option>
29+
</select>
30+
</div>
31+
<ul id="task-list">
32+
<!-- Tasks will be dynamically inserted here -->
33+
</ul>
34+
</div>
35+
<script type="module" src="index.js"></script>
36+
</body>
37+
</html>

‎Source-Code/ToDoList/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { addTask, deleteTask } from './module/main.js';
2+
import filterTasks from './module/filters.js';
3+
4+
document.addEventListener('DOMContentLoaded', () => {
5+
const taskInput = document.getElementById('task-input');
6+
const categorySelect = document.getElementById('category-select');
7+
const taskList = document.getElementById('task-list');
8+
const filterSelect = document.getElementById('filter-select');
9+
10+
document.querySelector('.add-btn').addEventListener('click', () => {
11+
addTask(taskInput, categorySelect, taskList);
12+
});
13+
14+
filterSelect.addEventListener('change', () => {
15+
filterTasks(filterSelect, taskList);
16+
});
17+
18+
taskList.addEventListener('click', (event) => {
19+
if (event.target.classList.contains('delete-btn')) {
20+
deleteTask(event.target);
21+
}
22+
});
23+
});
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
export default function filterTasks(filterSelect, taskList) {
2+
const filterValue = filterSelect.value;
3+
const tasks = taskList.getElementsByClassName('task-item');
4+
5+
for (let i = 0; i < tasks.length; i += 1) {
6+
const taskCategory = tasks[i].innerText.split(' (')[1].split(')')[0];
7+
if (filterValue === '' || filterValue === taskCategory) {
8+
tasks[i].style.display = '';
9+
} else {
10+
tasks[i].style.display = 'none';
11+
}
12+
}
13+
}

‎Source-Code/ToDoList/module/main.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export function addTask(taskInput, categorySelect, taskList) {
2+
const taskText = taskInput.value.trim();
3+
const category = categorySelect.value;
4+
5+
if (taskText === '' || category === '') {
6+
alert('Please enter a task and select a category.');
7+
return;
8+
}
9+
10+
const li = document.createElement('li');
11+
li.classList.add('task-item');
12+
li.innerHTML = `
13+
<span class="task-text">${taskText} (${category})</span>
14+
<button class="delete-btn">Delete</button>
15+
`;
16+
17+
taskList.appendChild(li);
18+
19+
// Clear input fields
20+
taskInput.value = '';
21+
categorySelect.value = '';
22+
}
23+
24+
export function deleteTask(button) {
25+
const taskList = document.getElementById('task-list');
26+
taskList.removeChild(button.parentElement);
27+
}

‎Source-Code/ToDoList/style.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
margin: 0;
8+
background-color: #f4f4f4;
9+
}
10+
11+
.container {
12+
background-color: #fff;
13+
padding: 20px;
14+
border-radius: 8px;
15+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
16+
}
17+
18+
h1 {
19+
text-align: center;
20+
}
21+
22+
.form-container {
23+
margin-bottom: 20px;
24+
}
25+
26+
#task-input,
27+
#category-select,
28+
button {
29+
margin: 5px;
30+
padding: 10px;
31+
border: 1px solid #ccc;
32+
border-radius: 4px;
33+
}
34+
35+
button {
36+
background-color: #007bff;
37+
color: #fff;
38+
border: none;
39+
cursor: pointer;
40+
}
41+
42+
button:hover {
43+
background-color: #0056b3;
44+
}
45+
46+
.filter-container {
47+
margin-bottom: 20px;
48+
display: flex;
49+
justify-content: space-between;
50+
align-items: center;
51+
}
52+
53+
ul {
54+
list-style-type: none;
55+
padding: 0;
56+
}
57+
58+
li {
59+
background-color: #f9f9f9;
60+
margin: 5px 0;
61+
padding: 10px;
62+
border-radius: 4px;
63+
display: flex;
64+
justify-content: space-between;
65+
align-items: center;
66+
}
67+
68+
.task-text {
69+
flex: 1;
70+
}
71+
72+
.delete-btn {
73+
background-color: #dc3545;
74+
color: #fff;
75+
border: none;
76+
padding: 5px 10px;
77+
border-radius: 4px;
78+
cursor: pointer;
79+
}
80+
81+
.delete-btn:hover {
82+
background-color: #c82333;
83+
}

0 commit comments

Comments
(0)

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