diff --git a/todo-list/index.html b/todo-list/index.html
new file mode 100644
index 0000000..f11f16a
--- /dev/null
+++ b/todo-list/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+ Todo List
+
+
+ todos
+
+ Left click to toggle completed.
Right click to delete todo
+
+
+
+
diff --git a/todo-list/script.js b/todo-list/script.js
new file mode 100644
index 0000000..ec2ca20
--- /dev/null
+++ b/todo-list/script.js
@@ -0,0 +1,65 @@
+const form = document.getElementById('form')
+const input = document.getElementById('input')
+const todosUL = document.getElementById('todos')
+
+const todos = JSON.parse(localStorage.getItem('todos'))
+
+if(todos) {
+ todos.forEach(todo => addTodo(todo))
+}
+
+form.addEventListener('submit', (e) => {
+ e.preventDefault()
+
+ addTodo()
+})
+
+function addTodo(todo) {
+ let todoText = input.value
+
+ if(todo) {
+ todoText = todo.text
+ }
+
+ if(todoText) {
+ const todoEl = document.createElement('li')
+ if(todo && todo.completed) {
+ todoEl.classList.add('completed')
+ }
+
+ todoEl.innerText = todoText
+
+ todoEl.addEventListener('click', () => {
+ todoEl.classList.toggle('completed')
+ updateLS()
+ })
+
+ todoEl.addEventListener('contextmenu', (e) => {
+ e.preventDefault()
+
+ todoEl.remove()
+ updateLS()
+ })
+
+ todosUL.appendChild(todoEl)
+
+ input.value = ''
+
+ updateLS()
+ }
+}
+
+function updateLS() {
+ todosEl = document.querySelectorAll('li')
+
+ const todos = []
+
+ todosEl.forEach(todoEl => {
+ todos.push({
+ text: todoEl.innerText,
+ completed: todoEl.classList.contains('completed')
+ })
+ })
+
+ localStorage.setItem('todos', JSON.stringify(todos))
+}
\ No newline at end of file
diff --git a/todo-list/style.css b/todo-list/style.css
new file mode 100644
index 0000000..866d46c
--- /dev/null
+++ b/todo-list/style.css
@@ -0,0 +1,72 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #f5f5f5;
+ color: #444;
+ font-family: 'Poppins', sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0;
+}
+
+h1 {
+ color: rgb(179, 131, 226);
+ font-size: 10rem;
+ text-align: center;
+ opacity: 0.4;
+}
+
+form {
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ max-width: 100%;
+ width: 400px;
+}
+
+.input {
+ border: none;
+ color: #444;
+ font-size: 2rem;
+ padding: 1rem 2rem;
+ display: block;
+ width: 100%;
+}
+
+.input::placeholder {
+ color: #d5d5d5;
+}
+
+.input:focus {
+ outline-color: rgb(179, 131, 226);
+}
+
+.todos {
+ background-color: #fff;
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+
+.todos li {
+ border-top: 1px solid #e5e5e5;
+ cursor: pointer;
+ font-size: 1.5rem;
+ padding: 1rem 2rem;
+}
+
+.todos li.completed {
+ color: #b6b6b6;
+ text-decoration: line-through;
+}
+
+small {
+ color: #b5b5b5;
+ margin-top: 3rem;
+ text-align: center;
+}