let data = [];
$(document).ready(function(){
  let el = document.querySelector('.col-md-4');
  let list = document.querySelector('.list-group');
  el.innerHTML = `<img src="https://randomuser.me/api/portraits/women/33.jpg" alt="">`;
  
  
  function updateList(){
    let str = '';
    let output_data = localStorage.getItem('todolist');
    let output_array = JSON.parse(output_data);    
    data = [...output_array];
    

    data.forEach((item,index)=>{
      str += `<li class="list-group-item">
      <a class="fas fa-trash-alt text-danger btn btn-lg del" data-num=${index}></a>
      <sapn>${item.todo}</span>
      </li>`
      list.innerHTML=str;
    })
  }
  updateList();
  
  
  
  let button = document.querySelector('.btn');
  button.addEventListener('click', function(e){
    let input = document.querySelector('input').value;
    data.push({todo:input});
    let input_data = JSON.stringify(data);
    localStorage.setItem("todolist",input_data)
    updateList();
    
  }, false);
  
  
  list.addEventListener('click', function(e){
    if(e.target.nodeName==='A'){
      data.splice(e.target.dataset.num, 1);
      let input_data = JSON.stringify(data);
      localStorage.setItem("todolist",input_data);
      
      $(e.target).parent().remove();
      updateList(); 
    }
    
  }, false) 
  
  
  
})