How to store task in localstorage than onload make it appear in individual tasks

user_19514757 0
Viewed 42

I am trying to make a To Do list but I have encountered a problem with storing it in local storage. I have tried storing the task in a var than it in localStorage but than when a new task is added it overwrites the variable and when I tried to store it in array and than when I tried to retrieve it from array all tasks appeared in a single task div. I want to store the tasks in local storage and have the task be edited, deleted, marked done also for localStorage too. I am providing the code.

<--JS-->

let tasksDiv = document.getElementById("tasks");
let oldTasksDiv = document.getElementById("old-tasks");
let input = document.getElementById('input');
var clear = document.getElementById('clear');
input.value = "What do you have planned?";

addBtn.addEventListener('click' , onclickBtn);
input.addEventListener('keypress' , function(){
    if(event.keyCode === 13){
        onclickBtn();
    }
});
input.addEventListener('click' , function (){
    if(input.value === "What do you have planned?"){
        input.value ="";
    }
})
clear.addEventListener('click' , function (){
    input.value ="";
})

function onclickBtn(){
    if(input.value.length !== 0){

        var tasksName = document.createElement('div');
        tasksName.classList.add("tasks-div")
        
        var task = document.createElement('p');
        task.innerText = input.value;
        task.classList.add("task");
        
        var del = document.createElement('button');
        del.classList.add("del");
        del.innerHTML = '<i class="fas fa-solid fa-trash"></i>';
    
        var edit = document.createElement('button');
        edit.classList.add("edit");
        edit.innerHTML = '<i class="fas fa-solid fa-pen-to-square"></i>';
    
        var save = document.createElement('button');
        save.classList.add("save");
        save.innerHTML = '<i class="fas fa-solid fa-floppy-disk"></i>';

        var chkbox = document.createElement('input');
        chkbox.classList.add("chkbox")
        chkbox.type = "checkbox";

        tasksName.appendChild(chkbox);
        tasksName.appendChild(task);
        tasksName.appendChild(del);
        tasksName.appendChild(edit);
        tasksName.appendChild(save);
        tasksDiv.appendChild(tasksName);

        chkbox.addEventListener('click' , function(){
            if(chkbox.checked === true){
                task.style.textDecoration = "line-through red";
                edit.style.display = "none";
                save.style.display = "none";
            }
            else{
                task.style.textDecoration = "none";
                edit.style.display = "block";
            }
        })
    
        del.addEventListener('click' , function(){
            tasksDiv.removeChild(tasksName);
        })
            
        edit.addEventListener('click' , function(){
            task.contentEditable = true;
            task.focus();
            edit.style.display = "none";
            save.style.display = "block";
        })

        save.addEventListener('click' , function(){
            if(task.innerHTML === '<br>'){
                alert('This task will be deleted');
                tasksDiv.removeChild(tasksName);
            }
            task.contentEditable = false;
            task.blur();
            edit.style.display = "block";
            save.style.display = "none";
        })
    }

    else{
        alert("Please enter a task");
    }
}

<-- HTML -->
<!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>Tasks Keeper</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/resp.css">
    <script src="https://kit.fontawesome.com/6bf6193572.js" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/9b41c17796.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div class="brand-div">
            <h1><span class="brand">Tasks Keeper</span></h1>
            <span class="made-by">Made By <a href="https://raghavsrvt.ml" target="_blank">Raghav Srvt</a></span>
        </div>
        <div class="input-div">
            <div class="input-div-clear">
                <input type="text" placeholder="What do you have planned?" id="input" value="What do you have planned?">
                <i class="fa-solid fa-xmark" id="clear"></i>
            </div>
            <button type="submit" id="add-btn">Add</button>
        </div>
    </header>

    <div id="tasks">
        
    </div>

    <script src = "./app.js"></script>
</body>
</html>
local-storage html javascript
1 Answers

You can insert todos as object into an Array and store it on LocalStorage. It is a Functionality that makes it Easy for you.

function LsHandling() {
return {
get: function (key) {
  const item = localStorage.getItem(key);
  if (item) {
    return JSON.parse(item);
  }
},
set: function (todo, key) {
  const item = localStorage.getItem(key);
  if (item) {
    const itemToArray = [...JSON.parse(item)];
    for (data in itemToArray) {
      if (itemToArray[data].id === todo.id) {
        return;
      } else {
        itemToArray.push(todo)
        localStorage.setItem(key, JSON.stringify(itemToArray));
      }
    }
  } else {
    const defaultArray = [todo];
    localStorage.setItem(key, JSON.stringify(defaultArray));
  }
   },
 };
 }

And you can use it Like This :

  1. for getting the todosArray : LsHandling().get(yourKey)
  2. for setting a todo in todosArray : LsHandling().set(todoObject, yourKey)

Note : for deleting or editing todos , you must define an id for each todo

user_192116040
Related