contribucion crud simple en memoria

hola les presneto un crud simple en memoria
sin librerias
Código
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
 
 
 
<div id="individual" style="display:none">
  <h1 id="title"></h1>	
  codigo <input id="txtCodigo" type="text" disabled><br>
  nombre <input id="txtNombre" type="text"><br>
  precio <input id="txtPrecio" type="text"><br>
  <button id="btnAceptar">aceptar</button>
  <button id="btnCancelar">cancelar</button>
</div>
 
<div id="list"  >
  <h1 id="title">Product Managemen</h1>	
  <button id="btnAgregar">agregar</button>
 
  <div id="tblProduct">
  </div>
</div>
 
<script>
 
window.onload=function(){
var products = [];
var id=0
//var accion="lista"
changeState("list")
 
 
 
drawTable("tblProduct",products)
 
document.getElementById("btnAgregar").onclick=  clickAdd
document.getElementById("btnAceptar").onclick=  clickAceptar
document.getElementById("btnCancelar").onclick=  clickCancelar
 
function toProduct(){
return {
	"id":parseInt(blankZero(document.getElementById("txtCodigo").value)),
    "name": document.getElementById("txtNombre").value ,
    "price":parseInt(blankZero(document.getElementById("txtPrecio").value)),
	}
}
 
function changeState(current){
	accion=current
    if(accion=="list"){
    	document.getElementById("individual").style.display='none'
        document.getElementById("list").style.display='block'
        document.getElementById("title").innerHTML="Product Management"
    }else if(accion=="update"){
    	document.getElementById("individual").style.display='block'
        document.getElementById("list").style.display='none'
        document.getElementById("btnAceptar").innerHTML="Actualizar"        
        document.getElementById("title").innerHTML=""
    }else if(accion=="add"){
    	document.getElementById("individual").style.display='block'
        document.getElementById("list").style.display='none'
 
        document.getElementById("btnAceptar").innerHTML="Agregar"
        document.getElementById("title").innerHTML=""
    }
}
 
function blankZero(value){
return value==""?0:value
}
 
function  clickAdd(){
   changeState("add")
}
 
function  clickAceptar(){
  if(accion=="add"){
  	 add(toProduct())
  }
  if(accion=="update"){
  	update( parseInt(e.target.getAttribute('x-id') ))
  }
   clean()
 
   changeState("list")
}
function  clickCancelar(){
  clean()
  accion="lista"
  changeState("list")
}
 
 
 
function clean(){
  document.getElementById("txtNombre").focus()
 
  document.getElementById("txtCodigo").value=""   
  document.getElementById("txtNombre").value=""  
  document.getElementById("txtPrecio").value=""   
}
 
function clickRemove(e){
	remove( parseInt(e.target.getAttribute('x-id') ))
     clean()
}
 
function clickUpadte(e){
    changeState("update")
	 update(parseInt(e.target.getAttribute('x-id') ) )
}
 
function add(toAdd){
id++
toAdd.id=id
products.push(toAdd);
drawTable("tblProduct",products)
 
}
function remove(id){
 products = products.filter(p=>p.id!==id)
 drawTable("tblProduct",products)
 
}
function update(id){
 var index = products.findIndex(p=>p.id==id)
 
 
 
 document.getElementById("txtCodigo").value=products[index].id   
 document.getElementById("txtNombre").value=products[index].name
 document.getElementById("txtPrecio").value=products[index].price   
 
}
 
function drawTable(idTable,products){
var table="<table>\n"
 
	table+="<tr>"
    table+="<th>id</th>"
    table+="<th>nombre</th>"
	table+="<th>precio</th>"
    table+="<th>accion</th>"
  	table+="</tr>\n"	
 
  for(var c=0;c<products.length;c++){
    var current=products[c]
  	table+="<tr>"
    table+="<td>"
    table+=current.id
    table+="</td>"
    table+="<td>"
    table+=current.name
    table+="</td>"
    table+="<td>"
    table+=current.price
    table+="</td>"
 
    table+="<td>"
    table+="<button class='update' x-id='"
    table+=current.id
    table+="'"
    table+=">edit</button>"
    table+="<button class='remove' x-id='"
    table+=current.id
    table+="'"
    table+=">remove</button>"
    table+="</td>"
 
    table+="</tr>\n"	
  }
  table+="</table>"
 
  document.getElementById(idTable).innerHTML=table
  document.querySelectorAll("#tblProduct  .remove").forEach(p=>p.onclick=clickRemove)
 
  document.querySelectorAll("#tblProduct  .update").forEach(p=>p.onclick=clickUpadte)
}
}
 
</script>
</body>
</html>