diff --git a/WebProjects/todo_app/index.html b/WebProjects/todo_app/index.html
new file mode 100644
index 0000000..c29f8b3
--- /dev/null
+++ b/WebProjects/todo_app/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple To-Do List</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="todo-app">
+        <h1>To-Do List</h1>
+        <div class="input-container">
+            <input type="text" id="todo-input" placeholder="Enter a new task...">
+            <button onclick="addTodo()">Add</button>
+        </div>
+        <ul id="todo-list"></ul>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/WebProjects/todo_app/script.js b/WebProjects/todo_app/script.js
new file mode 100644
index 0000000..84fcd67
--- /dev/null
+++ b/WebProjects/todo_app/script.js
@@ -0,0 +1,33 @@
+function addTodo() {
+    const todoInput = document.getElementById('todo-input');
+    const todoText = todoInput.value.trim();
+
+    if (todoText) {
+        const todoList = document.getElementById('todo-list');
+        
+        const todoItem = document.createElement('li');
+        todoItem.className = 'todo-item';
+
+        const span = document.createElement('span');
+        span.textContent = todoText;
+        span.onclick = () => toggleComplete(todoItem);
+        
+        const deleteBtn = document.createElement('button');
+        deleteBtn.textContent = 'Delete';
+        deleteBtn.onclick = () => deleteTask(todoItem);
+
+        todoItem.appendChild(span);
+        todoItem.appendChild(deleteBtn);
+        todoList.appendChild(todoItem);
+
+        todoInput.value = '';
+    }
+}
+
+function toggleComplete(todoItem) {
+    todoItem.classList.toggle('completed');
+}
+
+function deleteTask(todoItem) {
+    todoItem.remove();
+}
\ No newline at end of file
diff --git a/WebProjects/todo_app/style.css b/WebProjects/todo_app/style.css
new file mode 100644
index 0000000..21bbf61
--- /dev/null
+++ b/WebProjects/todo_app/style.css
@@ -0,0 +1,79 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+}
+
+.todo-app {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    width: 300px;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.input-container {
+    display: flex;
+    gap: 5px;
+    margin-bottom: 20px;
+}
+
+#todo-input {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+button {
+    padding: 8px 12px;
+    border: none;
+    background-color: #007bff;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#todo-list {
+    list-style: none;
+}
+
+.todo-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px;
+    border-bottom: 1px solid #ddd;
+}
+
+.todo-item.completed span {
+    text-decoration: line-through;
+    color: #888;
+}
+
+.todo-item button {
+    background-color: #dc3545;
+}
+
+.todo-item button:hover {
+    background-color: #c82333;
+}
\ No newline at end of file
