"Html+css+javascript" Implementation to-DOS (pure DOM implementation)

Requirements: Implementing to-dos

<!     DOCTYPE html>#todoList {List-Style:none;            margin:10px 0px; padding:0;        width:600px; } #todoList li {margin-bottom:5px;            padding:10px;            border:1px solid #ccc;            Background: #f5f5f5;        position:relative;            } input {padding:10px; Font-size:16px;        border:1px solid #ccc;            } button {padding:10px 20px;            border:1px solid #ccc;            Background: #f5f5f5;            Outline:none;        Cursor:pointer;            } #todoList span {position:absolute;            right:10px;        Cursor:pointer; }    </style>varinput = Document.queryselector (' #content '); varBTN = Document.queryselector (' #btn '); vartodolist= document.queryselector (' #todoList '); varspans = Document.queryselectorall (' #todoList span '); Btn.onclick=function(){            //gets the built-in of input            varText =Input.value; //Create an LI element and add parcel content to the LI element            varLi = document.createelement (' li '); Li.innertext=text; varspan = document.createelement (' span '); Span.innerhtml= ' &times; ';            Li.appendchild (span); //Add the Li element to the ULTodolist.appendchild (LI); }            /*Spans.foreach (function (span) {Span.onclick = function () {Todolist.removechild (This.parentnod e)}})*/        //Delegating Mode BindingTodolist.onclick =function(event) {if(Event.target.nodeName = = = ' SPAN ') {                 This. RemoveChild (Event.target.parentNode); }        }    </script></body>
"Html+css+javascript" Implementation to-DOS (pure DOM implementation)