Как добавить количество непроверенных и оставленных в списках предметов?

Question

Итак, у меня есть мой код, и я хочу добавить количество элементов в <ul> и количество непроверенных элементов в нем. Я также добавил локальное хранилище, чтобы оно могло хранить данные. (Это прокомментировано, потому что фрагмент не принимает localalstorage.)

Вопрос в том, как мне его добавить и как мне убедиться, что после добавления нового элемента счет обновится? И было ли хорошо использовать LocalStorage для хранения данных списков?

const clear = document.querySelector('.clear')
const list = document.getElementById('todo-list')
const input = document.getElementById('input')

//classes
const check = "fa-check-circle"
const unCheck = "fa-circle"
const strikethrough = "strikethrough"

// var
let lists, id

// get localStorage
// let data = localStorage.getItem("TODO")
// //check
// if (data){
//   lists = JSON.parse(data)
//   id = lists.length
//   loadList(lists)
// }else {
//   lists = []
//   id = 0
// }

// //load 
// function loadList(arr){
//   arr.forEach(function(item){
//     todoList(item.name, item.id, item.fin, item.bin)
//   })
// }

// // clear button
// clear.addEventListener("click", function(){
//   localStorage.clear()
//   location.reload()
// })


function todoList(toDo, id, fin, bin) {

  if(bin){return}

  const FIN = fin ? check : unCheck
  const strike = fin ? strikethrough : ""
  
  const item = `<li class="todo-container">
                <i class="far ${FIN} co" job="complete" id="${id}"></i>
                <p class="text ${strike}">${toDo}</p>
                <i class="fas fa-trash de" job="delete" id="${id}"></i>
                </li>
                `
  const pos = "beforeend"
  list.insertAdjacentHTML(pos, item)
}

//add item
document.addEventListener('keyup', function(even){
  if(event.keyCode === 13){
    const toDo = input.value
    //if the input isnt empty
    if(toDo){
      todoList(toDo, id, false, false)
      lists.push({
        name: toDo,
        id: id,
        fin: false,
        bin: false,
      })
      //add to localStorage
     // localStorage.setItem("TODO", JSON.stringify(lists))
      id++
    }
    input.value = ""
  }
})

function finToDo(element){
  element.classList.toggle(check)
  element.classList.toggle(unCheck)
  element.parentNode.querySelector(".text").classList.toggle(strikethrough)
  lists[element.id].fin = lists[element.id].fin ? false: true
}

function dumpToDo(element){
  element.parentNode.parentNode.removeChild(element.parentNode)
  lists[element.id].bin = true
}

// evt

list.addEventListener("click", function(evt){
  const element = evt.target
  const elementJob = element.attributes.job.value

  if(elementJob == "complete"){
    finToDo(element)
  }else if(elementJob == "delete"){
    dumpToDo(element)
  }
   //add to localStorage
  // localStorage.setItem("TODO", JSON.stringify(lists))
})

  html, body {
    background-color: #eee;
    margin: 0;
    padding: 0; 
  }
  
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  .center {
    align-self: center;
  }

  .header{
    background: rgb(255,102,209);
     background: -moz-linear-gradient(45deg, rgba(255,102,209,1) 0%, rgba(243,254,137,1) 100%);
     background: -webkit-linear-gradient(45deg, rgba(255,102,209,1) 0%, rgba(243,254,137,1) 100%);
     background: linear-gradient(45deg, rgba(255,102,209,1) 0%, rgba(243,254,137,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff66d1",endColorstr="#f3fe89",GradientType=1);
     animation: color-rotate 300s;
     animation-iteration-count: infinite; 
     animation-direction: alternate;
  }
  
  .flow-right {
    display: flex;
    justify-content: space-around;
  }

  ::-webkit-scrollbar {
    display: none;
  }
  .container {
    font-family: 'Montserrat', sans-serif;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: white;
    height: 100vh;
  }

.title{
    font-family: 'CharlieZonk';
    font-size: 144px;
    text-align: center;
    padding-top: 2.5vh;
}

.alpha{
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 2rem;
}
  
  .input {
    font-family: 'Montserrat', sans-serif;
    margin-top: 1vh;
    padding: 1vh 6vw;
  }
  
  .todo-list {    
    margin-top: 20px;
    padding: 20px;
    -ms-overflow-style: none;
  }  

  .todo-container{
    width: auto;
    min-height: 48px;
    position: relative;
    border-bottom: 1px solid #000;
    list-style: none;
    margin: 0;
    align-items: center;
    justify-content: center;
  }
  .todo-container i.co{
    position: absolute;
    font-size: 25px;
    padding-left:5px;
    left:15px;
    top:10px;
  }
  .todo-container i.co:hover{
    cursor: pointer;
  }
  .fa-check-circle{
    color:#6eb200;
  }
  .todo-container p.text{
    position: absolute;
    padding:0;
    margin:0;
    font-size: 20px;
    left:60px;
    top:10px;
    max-width:285px;
  }
  .strikethrough{
    text-decoration: line-through;
    color : #ccc;
  }

  #input{
    border: 1px solid #ff66d1;
    border-radius: 1em;
    text-align: start;
  }

  .todo-container i.de{
    position: absolute;
    font-size: 25px;
    right:15px;
    top:10px;
  }
  .todo-container i.de:hover{
    color:#af0000;
    cursor: pointer;  
  }

  .todo-container:first-of-type{
    border-top: 1px solid #000;
  }
  
  .clear{
    width : 32px;
    height: 32px;
    position: absolute;
    right:32px;
    top: 32px;
  }

  .clear i{
    font-size: 32px;
    color: #000;
  }
  .clear i:hover{
    cursor: pointer;
    transform: rotate(-45deg);
  }

  @keyframes color-rotate {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(720deg);
    }
  }
  
  

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&family=Montserrat:wght@400&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/d3c48b0328.js" crossorigin="anonymous"></script> 
</head>
<body>
  <div class="container center">
      <div class="header">
        <div class="clear">
          <i class="fas fa-broom"></i>
        </div>
        <div class="center title">Web App <span class="alpha">α</span></div>
        <div class="flow-right controls">
          <span>All items: <span id="item-count">0</span></span>
          <span>Things left to do: <span id="unchecked-count">0</span></span>
        </div>
        <br>
      </div>
      <input class="input center" type="text center" id="input" placeholder="Add something"> 
    <ul id="todo-list" class="todo-list">
      <template id="todo-item"> 
        <li class="todo-container">
           <input type="checkbox" class="todo-checkbox">
           <label></label>
        </li>
      </template>
    </ul>  
  </div>