How to store line-through when checkbox is checked in localStorage?

Question

* {
    box-sizing: border-box;
}

body {
    background-color: rgb(223, 255, 237);
    background:radial-gradient(rgb(223, 255, 237), rgb(196, 98, 98));
    background-repeat: repeat;
}

#container {
    border-radius: 15px;
    margin: 200px auto;
    text-align: center;
    width: 490px;
    border: 2px solid rgb(126, 45, 45);
    height: 580px;
    background:radial-gradient(rgb(223, 255, 237), rgb(196, 98, 98));
    box-shadow: 0px 0px 20px 10px #8a3535; 
}

p { margin-left: 5px; 
    width: 100%;
    font-family: 'Stardos Stencil';
    font-size: 24px;
    color:rgb(109, 0, 0); 
    letter-spacing: 15px; 
}

::placeholder {
    color: rgb(94, 17, 17);
    border-style: none;
    opacity: 0.6;
    font-size: 16px;
    height: 31px;
}

input[type="text"]{
    border: none;
    height: 31px;
    width: 200px;
}

#list::-webkit-scrollbar-thumb{
    background:  rgb(196, 98, 98);
}

::-webkit-scrollbar {
    width: 5px;
    
}

#clr {
    width: 50px;
    height: 31px;
    text-decoration: none;
    background-color: rgb(184, 36, 36);
    border: none;
    cursor: pointer;
    color: white;
}

#btn {
    width: 60px;
    height: 31px;
    text-decoration: none;
    background-color: rgb(152, 230, 158);
    border: none;
    cursor: pointer;
}

.line {
    border: 1px solid rgb(184, 36, 36);
}

/*list items*/

.delCrss {
    float: right;
    color:rgb(104, 36, 36);
    font-size: 18px;
    cursor: pointer;
    margin-right: 12px;
    
}

#list {
    margin-top: 25px;
    padding-left: 0px;
    Margin-left: 87px;
    overflow: auto;
    height: 57%;
    width: 310px;
    /*border: 1px solid rgb(107, 25, 25);*/
    text-align: left;
}

img {
    width: 18px;
    height: 18px;
}

ul {
    margin:0;
    padding-left: 0;
}

.item {
    font-size: 18px;
    Color: rgb(122, 0, 0);
}

li {
    list-style-type: none;
}

.check {
    margin-right: 10px;
    transform: scale(1.4);
}

.checked {
    text-decoration: line-through;
}
.unchecked{
    text-decoration: none;
}

/* delete buttons*/

#del {
    margin-top: 20px;
    width: 310px;
    height: 30px;
    margin-left: 87px;
}

#delLast {
    text-decoration: none;
    background-color: rgb(184, 36, 36);
    cursor: pointer;
    height: 27px;
    border: 1px solid  rgb(184, 36, 36);
    float: left;
    color: white;
}

#delAll {
    text-decoration: none;
    background-color:  rgb(184, 36, 36);
    border: 1px solid  rgb(184, 36, 36);
    height: 27px;
    cursor: pointer;
    float: right;
    color: white;
}

#date {
    margin-top: 15px;
    font-family: 'Stardos Stencil';
    color: rgb(109, 0, 0);
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href='https://fonts.googleapis.com/css?family=Stardos Stencil' rel='stylesheet'>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <title>Document</title>
    </head>
    <body>
    <div id="container">
         <p>Things To-Do</p>
        <input type="text" id="text" placeholder=" write here...." autocomplete="off" autofocus><button             id="btn">Submit</button><button id="clr">clear</button>

          <div id="list">
            <ul id="ul">
            </ul>
          </div>

          <div id="del">
            <button id="delLast">delete last item</button><button id="delAll">delete all</button>
          </div>
          <div id="date"></div>
    </div>

    <script src="app7.js"></script>

    </body>
    </html>

A simple to-do app with one problem, I can't store the line-through when a checkbox is checked in local storage. After reloading or refresh the checkbox stays checked but the line-through is gone. I want the line through to persist after page-reload or refresh. I don't know how to combine the line-through functionality with the restore function or any other way.

const input = document.getElementById('text');
const list = document.getElementById('list');
var ul = document.getElementById('ul');
const clear = document.getElementById('clr');
const submit = document.getElementById('btn');
const delAll = document.getElementById('delAll');
const delLast = document.getElementById('delLast');
let checkBox = document.querySelector('input[type="checkbox"]');
let data = localStorage.getItem("TODO");
let todo = input.value;
let listItems;
let id;

// Load list if in local storage
if(data){
listItems = JSON.parse(data);
id = listItems.length;                    
loadList(listItems);
restore()

console.log(listItems)
}else{
listItems=[];
id = 0;
}

function loadList(data){
 data.forEach( (el) => {
        html = `<li class="item" id="${el.id}">
                <input type="checkbox" job="complete" name="chbx" 
                 class="check" store="${el.id}"></input>
                <span class="textItem">${el.todo}</span>
                <span><img src="delicon.png" class="delCrss" job="delete"> 
                <span>
                <hr class="line"></li>`;
  ul.insertAdjacentHTML('beforeend', html);
  id++
    })
 }

 //Make item
 function addItem(todo) {

 var date  = new Date()
 var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + 
 date.getMilliseconds()
    if(todo){
         html = `<li class="item" id="${id}">
                 <input type="checkbox" job="complete" class="check" 
                     name="chbx" store="${id}"></input>
                 <span class="textItem">${todo}</span>
                 <span><img src="delicon.png" class="delCrss"job="delete"> 
                  <span>
                 <hr class="line"></li>`;

    ul.insertAdjacentHTML('beforeend', html);

    listItems.push({
        todo: input.value,
          id: id
          }) 
          id++   
    localStorage.setItem("TODO", JSON.stringify(listItems));
    }
    input.value = "";
  }

// Add input to list by pressing enter key 
document.addEventListener('keyup', function(e){
todo = input.value
if(e.keyCode === 13 && todo){
    addItem(todo)
}else if(e.keyCode === 13 && todo === ""){
    alert('Please enter valid data!');
 }
 }) 

  //Add item to list use submit button
  submit.addEventListener('click', function(e) {
     todo = input.value
       if(todo){
       addItem(todo);
   }else if(todo === ""){
    alert("Please enter valid data!");
    }    
  })


// Line-through if checked
   ul.addEventListener('click', function(e) {
      var elem = e.target
      if(elem.checked == true){
         elem.parentNode.classList.add('checked');
      }else if( elem.checked == false){
         elem.parentNode.classList.remove('checked');
      }
    },false);

// Store checkbox states
   var boxes = document.querySelectorAll("input[type='checkbox']");

   for (var i = 0; i < boxes.length; i++) {
   var box = boxes[i];
   if (box.hasAttribute("store")) {
    setupBox(box);
       }
   }

   function setupBox(box) {
      var storageId = box.getAttribute("store");
      var oldVal    = localStorage.getItem(storageId);
      box.checked = oldVal === "true" ? true : false;

   box.addEventListener("change", function() {
      localStorage.setItem(storageId, box.checked); 
      });
   }

Could you add the relevant HTML and CSS and make it a workable example for us to check out? — Emiel Zuurbier, Aug 28 '19 at 15:23
In the click event listener you are adding the "checked" class, but in the restore function you are not adding this class — Luke, Aug 28 '19 at 15:33
That's right Luke, I don't know how to add the checked class to the restore function so that is stores the checked box as well as the line-through class. — Noud, Aug 28 '19 at 16:04
I added some extra code. The JS file is incomplete only the code relevant to this issue is there. Thanks guys for the quick response! — Noud, Aug 28 '19 at 16:38

stan chacon · Answer 1 · 2019-08-28T18:10:22.077

0

Hi here is a jsfiddle with localStorage and some remember me checkbox jsfiddle the basic of the code is simple:

First you must save the data in local storage to do this just submit the form with some data
if you check remember me and reload the page the code fill the fields if not it display the data

if you want to save changes you must submit again

you can also add some logic if you want for your checkbox in this section of the code:

 if(data.remember != undefined && data.remember){
document.getElementById("txtUser").value = data.username;
document.getElementById("txtPass").value = data.password;
//you can add a validation for you data.remember here which is your checbox checked value
document.getElementById("chkremember").checked = data.remember;
 }else{
 document.getElementById("result").innerHTML = localStorage.getItem("json");
 }

Hope it helps

edited Aug 28 '19 at 18:10

answered Aug 28 '19 at 17:53

stan chacon

768
1
6
19

Thanks Stan, I know how to store the input values and the checked check boxes. It's the 'line-through' I'm struggling with. There are multiple check boxes dynamically generated. When a checkbox is checked the input text is crossed-out. – Noud Aug 29 '19 at 05:59
@Noud check this another file it works with multiple checkboxes with the same logic of save the storage on submit and load it on reload, maybe you need to compare the values of each of your checkboxes like this fiddle https://jsfiddle.net/n2fq8pzu/60/ – stan chacon Aug 29 '19 at 16:15

How to store line-through when checkbox is checked in localStorage?

1 Answers1