diff --git a/README.md b/README.md
index 7afa775..4c188fa 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,5 @@
-# todo-list-extension
\ No newline at end of file
+# TODO-list-extension
+
+A Chrome extension which is an instant TODO list app
+## Demo
+
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..2ad291f
--- /dev/null
+++ b/index.css
@@ -0,0 +1,114 @@
+/*
+light-green: #F6F7D7
+Blue: #3EC1D3
+Orange: #FF9A00
+Red: #FF165D
+*/
+
+html {
+ padding: 0%;
+ margin: 0%;
+ box-sizing: border-box;
+}
+
+body {
+ min-width: 500px;
+ min-height: 100px;
+ font-size: 10px;
+ font-family: 'Lato', sans-serif;
+ background-color: #F6F7D7;
+ color: #2A363B;
+ padding: 0 2rem;
+}
+
+.heading {
+ text-align: center;
+ font-size: 2rem;
+ margin: 1rem 0 1.5rem 0;
+ font-weight: bolder;
+}
+
+.input-div {
+ display: flex;
+ justify-content: center;
+ margin: 2rem 0;
+}
+
+.task-input {
+ width: 30rem;
+ padding: 0.5rem 1rem;
+ border: none;
+ outline: none;
+ background-color: #ff990091;
+ font-size: 1rem;
+}
+
+.tasks-list-div {
+ display: flex;
+ flex-direction: column;
+}
+
+.task-div {
+ display: flex;
+ justify-content: space-between;
+ margin: .7rem 0rem;
+}
+
+.task-div:not(:last-child) {
+ padding-bottom: 1.5rem;
+ border-bottom : solid 1px black;
+}
+
+.task-text {
+ justify-self: center;
+ max-width: 20rem;
+ word-wrap: break-word;
+ font-size: 1.3rem;
+ vertical-align: middle;
+ line-height: 1.5;
+}
+
+.task-completed {
+ text-decoration: line-through;
+ font-style: italic;
+ color: #2a363b80;
+}
+
+.task-controls {
+ display: flex;
+ align-items: center;
+}
+
+.task-clear-div {
+ display: flex;
+ justify-content: center;
+ margin: 2.5rem 0 1.5rem 0;
+}
+
+.task-btn {
+ min-width: 4rem;
+ border: none;
+ outline: none;
+ padding: .7rem .9rem;
+ background-color: #FF9A00;
+}
+
+.task-btn:not(:last-child) {
+ border-right : solid 1px black;
+}
+
+.task-btn:hover, .task-btn:focus {
+ background-color: #FF165D;
+}
+
+.task-input, .task-btn-edit {
+ border-radius: 7px 0 0 7px;
+}
+
+.task-btn-submit, .task-btn-do {
+ border-radius: 0 7px 7px 0;
+}
+
+.task-btn-clear {
+ border-radius: 7px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..baaedfe
--- /dev/null
+++ b/index.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ my todo list
+
+
+
+
+
+
+ My TODO List
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..408267d
Binary files /dev/null and b/logo.png differ
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..e555bdf
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,16 @@
+{
+ "manifest_version": 3,
+ "name": "TODO list",
+ "version": "1.0.0",
+ "description": "A simple TODO list",
+ "action": {
+ "default_popup": "index.html",
+ "default_icon": "logo.png"
+ },
+ "icons": {
+ "16": "logo.png",
+ "32": "logo.png",
+ "48": "logo.png",
+ "128": "logo.png"
+ }
+}
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9aa39b4
--- /dev/null
+++ b/script.js
@@ -0,0 +1,109 @@
+var taskArr = [];
+
+const updateView = () => {
+
+ const tasksList = document.getElementById("tasksList");
+
+ var child = tasksList.lastChild;
+ while(child) {
+ tasksList.removeChild(child);
+ child = tasksList.lastChild;
+ }
+
+ taskArr.forEach((Element, index) => {
+
+ const newTask = document.createElement("div");
+ newTask.setAttribute("class", "task-div");
+
+ const taskText = document.createElement("div");
+ taskText.setAttribute("class", Element.isDone ? "task-text task-completed" : "task-text");
+ taskText.innerHTML = (index + 1) + ". " + Element.task;
+
+ const taskControls = document.createElement("div");
+ taskControls.setAttribute("class", "task-controls");
+
+ const taskEdit = document.createElement("button");
+ taskEdit.innerHTML = "Edit";
+ taskEdit.setAttribute("id", index + "edit");
+ taskEdit.setAttribute("class", "task-btn task-btn-edit");
+ taskEdit.addEventListener("click", (event) => editTask(event.target.id));
+
+ const taskDelete = document.createElement("button");
+ taskDelete.innerHTML = "Delete";
+ taskDelete.setAttribute("id", index + "delete");
+ taskDelete.setAttribute("class", "task-btn task-btn-delete");
+ taskDelete.addEventListener("click", (event) => deleteTask(event.target.id));
+
+ const taskDo = document.createElement("button");
+ taskDo.innerHTML = Element.isDone ? "Undo" : "Done";
+ taskDo.setAttribute("id", index + "do");
+ taskDo.setAttribute("class", "task-btn task-btn-do");
+ taskDo.addEventListener("click", (event) => doTask(event.target.id));
+
+ taskControls.appendChild(taskEdit);
+ taskControls.appendChild(taskDelete);
+ taskControls.appendChild(taskDo);
+
+ newTask.appendChild(taskText);
+ newTask.appendChild(taskControls);
+
+ tasksList.appendChild(newTask);
+ });
+}
+
+const addTask = (isDone) => {
+
+ const task = document.getElementById("task-input").value;
+ if(task === null || task.trim() === "") return;
+ taskArr.push({task, isDone});
+ localStorage.setItem("savedTasks", JSON.stringify(taskArr));
+ updateView();
+
+ const taskInput = document.getElementById("task-input");
+ taskInput.value = "";
+}
+
+const editTask = (id) => {
+
+ const taskIndex = parseInt(id[0]);
+ const taskText = taskArr[taskIndex].task;
+ taskArr.splice(taskIndex, 1);
+ localStorage.setItem("savedTasks", JSON.stringify(taskArr));
+ updateView();
+
+ const taskInput = document.getElementById("task-input");
+ taskInput.value = taskText;
+}
+
+const deleteTask = (id) => {
+
+ const taskIndex = parseInt(id[0]);
+ taskArr.splice(taskIndex, 1);
+ localStorage.setItem("savedTasks", JSON.stringify(taskArr));
+ updateView();
+}
+
+const doTask = (id) => {
+
+ const taskIndex = parseInt(id[0]);
+ taskArr[taskIndex].isDone = !taskArr[taskIndex].isDone;
+ localStorage.setItem("savedTasks", JSON.stringify(taskArr));
+ updateView();
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+
+ const savedTasks = JSON.parse(localStorage.getItem("savedTasks"));
+ if(savedTasks !== null) taskArr = [...savedTasks];
+ updateView();
+})
+
+document.getElementById("task-submit-btn").addEventListener("click", () => addTask(false));
+
+document.getElementById("task-clear-btn").addEventListener("click", () => {
+
+ localStorage.clear();
+ taskArr = [];
+ updateView();
+})
+