<! DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Document < /title > < /head > < style > body { font - family : Arial ; text - align : center ; margin - top : 50 px ; } input { width : 200 px ; height : 40 px ; font - size : 20 px ; text - align : left ; }

button { width : 70 px ; height : 50 px ; font - size : 18 px ; margin : 5 px ; }

ul { list - style : none ; padding : 0 ; margin : 20 px 0 ; } < /style > < body > < input id = " user-input " type = " text " placeholder = " Enter a task... " > < button onclick = " todo() " > add < /button > < ul id = " list " >< /ul > < script > function todo () { const task = document . getElementById ( " user-input " ) let user_input = task . value ; const item = document . createElement ( " li " ); item . innerHTML = `<span onclick="complete(this)"> ${ user_input } </span> <button onclick="deleteTask(this)">delete</button>` ; const list = document .…