WarriorWhoCodes · AnkushSinghGandhi · Oct 12, 2021 · Oct 11, 2021 · Oct 11, 2021 · Oct 11, 2021
diff --git a/README.md b/README.md
@@ -1 +1,5 @@
-# todo-list-extension
+# TODO-list-extension
+
+A Chrome extension which is an instant TODO list app
+## Demo
+![Screenshot from 2021-10-11 20-07-31](https://user-images.githubusercontent.com/75582834/136810984-0dfca7fd-4696-46d6-a9b7-ba444f87d93f.png)
diff --git a/index.css 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;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>my todo list</title>
+    <link rel="stylesheet" href="index.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="heading">My TODO List</div>
+    <div class="input-div">
+        <input type="text" id="task-input" class="task-input" placeholder="Enter a task to fulfill"/>
+        <button id="task-submit-btn" class="task-btn task-btn-submit">Add</button>
+    </div>
+    <div class="tasks-list-div" id="tasksList"></div>
+    <div class="task-clear-div">
+        <button id="task-clear-btn" class="task-btn task-btn-clear">Clear All</button>
+    </div>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/logo.png b/logo.png
diff --git a/manifest.json 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"
+    }
+}
diff --git a/script.js 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();
+})
+