JSFiddle - React, Tailwind, and code Playground

by GuNN

HTML

<input type="text" id="inpt"/>
<input type="button" id="btn" value="save"/>
<ul id="todo-ul">

</ul>

CSS

li {width:230px}
li input[type=button]{float:right}

ul, li{list-style:none;margin:0;padding:0}
ul{margin-top:10px}
li{background:#eee}
li-ref{background:#ddd}
li{border:1px solid #aaa;border-bottom:none}
li:last-child{border-bottom:1px solid #aaa;}

JavaScript

/* localStorage.setItem('test1', '111');
var a = localStorage.getItem('test1');
console.log(a); */
var cnt = 0;
document.getElementById('btn').onclick = function(){
  /* console.log('enter'); */
  var todoWord = document.getElementById('inpt').value;
  if(todoWord === ''){
  	return;
  }
  localStorage.setItem('todo-li'+cnt, {'word':todoWord,'delYn':true});
   var ul = document.getElementById("todo-ul");
   
   var li = document.createElement("li");
   var span = document.createElement("span");
   var edit = document.createElement("input");
   var del = document.createElement("input"); 
   
   li.setAttribute("id", "todo-li"+cnt);
   edit.type =  "button";
   del.type = "button";
   edit.setAttribute("value", "edit");
   del.setAttribute("value", "delete");
   
   span.appendChild(document.createTextNode(todoWord));
   li.appendChild(span);
   li.appendChild(edit);
   li.appendChild(del);
   ul.appendChild(li)
   
   document.getElementById('inpt').value = '';
   console.log(localStorage.getItem('todo-li'+cnt.word));
   cnt++;
    
    
};