0xali3n · NasreenParween · Oct 11, 2022
diff --git a/Todos-Application/README.md b/Todos-Application/README.md
@@ -0,0 +1 @@
+# Todos-Application
diff --git a/Todos-Application/index.html b/Todos-Application/index.html
@@ -0,0 +1,47 @@
+<!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>TODOLIST</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
+    <script src="https://kit.fontawesome.com/9874c95f52.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="bg-container">
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    <h1 class="main-heading text-center">TODO LIST</h1>
+                    <h1 class="side-heading"> Create <span class="sub-part-heading"> Task </span></h1>
+                    <input type="text" class="input-text w-100" placeholder="What needs to be done?" id="inputText">
+                    <button class="add-button" id="addBtn">Add</button>
+
+                    <h1 class="side-heading"> My <span class="sub-part-heading"> Tasks </span></h1>
+
+                    <ul class="todo-items-container" id="todoItemsContainer">
+                        <!-- <li class="todo-item d-flex flex-row">
+                            <input type="checkbox" name="checkbox" id="checkboxInput" class="checkbox-input">
+                            <div class="label-container d-flex flex-row">
+                                <label for="checkboxInput" class="label-element">Learn HTML</label>
+                                <div class="delete-container">
+                                    <i class="far fa-trash-alt delete-icon"></i>
+                                </div>
+                            </div>
+                        </li> -->
+                    </ul>
+
+                    <button class="save-button" id="saveBtn">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Todos-Application/script.js b/Todos-Application/script.js
@@ -0,0 +1,186 @@
+let todoItemsContainer = document.getElementById('todoItemsContainer');
+let addBtn = document.getElementById('addBtn');
+let saveBtn = document.getElementById('saveBtn');
+
+// let todoList = [
+    // {
+    //     todoName: 'Learn HTML',
+    //     uniqueId: 1
+    // },
+    // {
+    //     todoName: 'Learn CSS',
+    //     uniqueId: 2
+    // },
+    // {
+    //     todoName: 'Learn Javascript',
+    //     uniqueId: 3
+    // }
+// ];
+
+
+
+function getTodoListFromLocalStorage(){
+    let todoList = localStorage.getItem('todoList');
+    let parsedTodoList = JSON.parse(todoList);
+    if(parsedTodoList === null){
+        return [];
+    }else{
+        return parsedTodoList;
+    }
+}
+
+let todoList = getTodoListFromLocalStorage();
+// let uniqueIDs = [-1];
+
+
+saveBtn.onclick = function(){
+    localStorage.setItem('todoList',JSON.stringify(todoList));
+}
+
+function checkedStatus(checkboxId, labelId, todoId){
+    let checkboxInput = document.getElementById(checkboxId);
+    let label = document.getElementById(labelId);
+
+    // if(checkboxInput.checked === true){
+    //     label.classList.add('checked');
+    // }else{
+    //     label.classList.remove('checked');
+    // }
+
+    label.classList.toggle('checked');
+
+    let todoItemIndex = todoList.findIndex(function(eachTodo){
+        if(todoId === 'todo' + eachTodo.uniqueId){
+            return true;
+        }else{
+            return false;
+        }
+    });
+
+    let todoItem = todoList[todoItemIndex];
+
+    if(todoItem.isChecked === true){
+        todoItem.isChecked = false;
+    }else{
+        todoItem.isChecked = true;
+    }
+
+
+}
+
+
+function onDeleteTodoItem(todoId){
+    let todoItem = document.getElementById(todoId);
+    todoItemsContainer.removeChild(todoItem);
+
+    let deleteTodoItemIndex = todoList.findIndex(function(eachTodo){
+        if ('todo' + eachTodo.uniqueId === todoId){
+            return true;
+        }else{
+            return false;
+        }
+    });
+
+    todoList.splice(deleteTodoItemIndex,1);
+}
+
+function createTodoItem(todo){
+    let todoId = 'todo' + todo.uniqueId;
+    let checkboxId = 'checkbox' + todo.uniqueId;
+    let labelId = 'label' + todo.uniqueId;
+
+    let todoItem = document.createElement('li');
+    todoItem.id = todoId;
+    todoItem.classList.add('todo-item', 'd-flex', 'flex-row');
+    todoItemsContainer.appendChild(todoItem);
+
+    let checkboxInput = document.createElement('input');
+    checkboxInput.type = 'checkbox';
+    checkboxInput.id = checkboxId;
+    checkboxInput.checked = todo.isChecked;
+
+
+    checkboxInput.onclick = function(){
+        checkedStatus(checkboxId, labelId, todoId);
+    }
+
+    checkboxInput.classList.add('checkbox-input');
+    todoItem.appendChild(checkboxInput);
+
+
+    let labelContainer = document.createElement('div');
+    labelContainer.classList.add('label-container', 'd-flex');
+    todoItem.appendChild(labelContainer);
+
+    let labelEl = document.createElement('label');
+    labelEl.setAttribute('for', checkboxId);
+    labelEl.id = labelId;
+
+    labelEl.textContent = todo.todoName;
+    labelEl.classList.add('label-element');
+
+    if(todo.isChecked === true){
+        labelEl.classList.add('checked');
+    }
+
+
+    labelContainer.appendChild(labelEl);
+
+    let deleteContainer = document.createElement('div');
+    deleteContainer.classList.add('delete-container');
+    labelContainer.appendChild(deleteContainer);
+
+    let deleteIcon = document.createElement('i');
+    deleteIcon.classList.add('far', 'fa-trash-alt','delete-icon');
+    deleteContainer.appendChild(deleteIcon);
+
+    deleteIcon.onclick = function(){
+        onDeleteTodoItem(todoId);
+    }
+
+}
+
+
+
+function appendTodoItem(inputTextValue){
+    let inputText = document.getElementById('inputText');
+    inputTextValue = inputText.value;
+
+    if(inputTextValue === ''){
+        alert('Enter Valid Input');
+        return;
+    }else{
+
+        let maxId = localStorage.getItem('MaxIndexId');
+        if(maxId === null){
+            maxId = -1;
+        }
+        localStorage.setItem('MaxIndexId', parseInt(maxId) + 1);
+
+        let todoListId = localStorage.getItem('MaxIndexId');
+        // uniqueIDs.push(todoListId);
+
+
+        let newTodo = {
+            todoName: inputTextValue,
+            uniqueId: todoListId,
+            isChecked: false
+        }
+        todoList.push(newTodo);
+        createTodoItem(newTodo);
+    }
+
+}
+
+addBtn.onclick = function(){
+    appendTodoItem();
+
+    inputText.value = "";
+}
+
+for(let todo of todoList){
+    createTodoItem(todo);
+}
+
+// localStorage.removeItem('todoList');
+// localStorage.removeItem('MaxIndexId');
diff --git a/Todos-Application/style.css b/Todos-Application/style.css
@@ -0,0 +1,87 @@
+@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');
+
+.bg-container {
+    background-color: #f5fcff;
+    height: 100vh;
+    font-family: 'Roboto';
+}
+
+.main-heading {
+    margin: 20px 0;
+    font-size: 40px;
+}
+
+.side-heading{
+    font-weight: 700;
+    font-size: 32px;
+}
+
+.sub-part-heading{
+    font-weight: normal;
+}
+
+.input-text{
+    border: 1px solid black;
+    border-radius: 10px;
+    padding: 13px;
+    margin-top: 10px;
+    width: 100%;
+}
+
+.add-button, .save-button{
+    margin: 20px 0 30px 0;
+    background-color: black;
+    background-color: #25AAED;
+    color: #fff;
+    font-size: 20px;
+    padding: 5px 20px;
+    border-width: 0;
+    border-radius: 10px;
+}
+
+.todo-items-container{
+    margin: 0;
+    padding: 0;
+}
+
+.todo-item{
+    margin: 15px 0;
+    list-style: none;
+    width: 100%;
+}
+
+.checkbox-input{
+    margin-top: 12px;
+    margin-right: 12px;
+    height: 20px;
+    width: 20px;
+}
+
+.label-container{
+    border-left: 5px solid #70d2ff;
+    border-right: none;
+    border-top: none;
+    border-bottom: none;
+    width: 100%;
+    border-radius: 5px;
+    background-color: #d6f0ff;
+}
+
+.label-element{
+    width: 85%;
+    padding: 10px 20px;
+    margin: 0;
+}
+
+.delete-container{
+    width: 15%;
+    text-align: right;
+}
+
+.delete-icon{
+    padding: 15px;
+}
+
+.checked{
+    text-decoration: line-through;
+}