How to set css style to local storage for dynamically created list using Javascript?

Question

I've just started a Udemy course on Javascript, and the first project is to create a task list. I created it fine according the the tutorial but I wanted to add some features to it. when a new task gets added, I want to add the ability to mark it as complete.

I've been experimenting on how to do this using css (text-decoration: line-through) but have hit a dead end. Once the button to mark as "complete" is clicked a function is called that checks the list items for the class "check-item". I then add the class name "check-item-style" which applies the line-through to the clicked list item. If you could please help me to insert this into local storage and 'get' from local storage once the browser re-opens.

I'll try and keep the code as brief as possible. Only vanilla javascript if possible! I tried doing a code snippet but it wasn't working very well (maybe due to local storage not being available), so I have included shorted code below. Some of the code wasn't working without all the libraries so had to include sorry!

// Define UI Vars
const form = document.querySelector("#task-form");
const taskList = document.querySelector(".collection");
const taskInput = document.querySelector("#task");

//Event Listeners
form.addEventListener("submit", addTask);
taskList.addEventListener("click", checkTask);
document.addEventListener("DOMContentLoaded", getTasks);

function getTasks() {
  if (localStorage.getItem("tasks") === null) {
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem("tasks"));
  }
  tasks.forEach(function(task) {
    const li = document.createElement("li");
    li.className = "collection-item";
    li.appendChild(document.createTextNode(task));
    const linkCheck = document.createElement("a");
    linkCheck.className = "check-item secondary-content";
    linkCheck.innerHTML = '<i class="fa fa-check"></i>';
    li.appendChild(linkCheck);
    taskList.appendChild(li);
  });
}

function addTask(e) {
  if (taskInput.value === "") {
    alert("Add a task");
  } else {
    const li = document.createElement("li");
    li.className = "collection-item";
    li.appendChild(document.createTextNode(task));
    const linkCheck = document.createElement("a");
    linkCheck.className = "check-item secondary-content";
    linkCheck.innerHTML = '<i class="fa fa-check"></i>';
    li.appendChild(linkCheck);

    taskList.appendChild(li);
    storeTaskInLocalStorage(taskInput.value);
    //Clear input
    taskInput.value = "";
  }

  e.preventDefault();
}

function storeTaskInLocalStorage(task) {
  let tasks;
  if (localStorage.getItem("tasks") === null) {
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem("tasks"));
  }
  tasks.push(task);

  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function checkTask(e) {
  let check = e.target.parentElement.parentElement;
  if (e.target.parentElement.classList.contains("check-item")) {
    check.className = "check-item-style";
    addStylingToLocalStorage(check.className);
  }
}

function addStylingToLocalStorage() {
  //Please help here
}

.check-item-style {
  text-decoration: line-through;
  padding: 10px;
  padding-right: 20px;
  padding-left: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin: 0px;
}

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      src="https://code.jquery.com/jquery-3.5.1.js"
      integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <title>Task List</title>
    <link rel="stylesheet" href="stylesheet.css" />
    <script src="app.js" defer></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
      defer
    ></script>
    <div class="container">
      <form id="task-form">
        <div>
          <input type="text" name="task" id="task" />
          <label for="task">New Task</label>
        </div>
        <input type="submit" value="Add Task" class="btn" />
      </form>
      <div>
        <ul class="collection"></ul>
      </div>
    </div>
  </body>
</html>

programmerRaj · Accepted Answer · 2020-05-12 20:30:14Z

0

There is an easy way of doing this without storing CSS In localStorage. Right now, if your list of tasks is Cleaning, Sleeping, and Reading, then you JSON looks like this:

[
    "Cleaning",
    "Sleeping",
    "Reading"
]

Each item is just a string. If you want to keep track of what has already been checked, store and retrieve an array of objects from localStorage. This is an example JSON structure.

[
    {
        "name": "Cleaning",
        "done": true
    },
    {
        "name": "Sleeping",
        "done": true
    },
    {
        "name": "Reading",
        "done": false
    }
]

If you reload the page, you just need to style the tasks based on the done property.

Edit to your storing function:

function storeTaskInLocalStorage(task, done) {
  let tasks;
  if (localStorage.getItem('tasks') === null) { 
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem('tasks'));
  }
  tasks.push({
    name: task,
    done: done
  });

  localStorage.setItem('tasks', JSON.stringify(tasks));
}

answered May 12, 2020 at 20:30

programmerRaj

2,1783 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ParcGrowing Over a year ago

Hi there! thanks for taking the time to answer. I've just tried your solution but my local storage still looks same as before, am I missing something? Are you able to test yourself to see if it works for you (if possible)?

programmerRaj Over a year ago

I will test it tomorrow. Have you made the change to the format of the tasks array? Also, old arrays won't work and you'll have to reset your localStorage first before trying out new method.

Collectives™ on Stack Overflow

How to set css style to local storage for dynamically created list using Javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related