TodoList part 4/n
Published: 2021-08-15 12:20:12

Let's enhance our TodoList. 

![TodoList](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wh93j5mq54803c0nwm1a.png)

Three buttons have been added to the status bar. Here is the code to display and manage them :

```js
 function createStatus () {
   selectBase(div("", cssStatus));

     function displayCompleted (isCompleted) {
       todos.forEach(todo => todo.dataset.completed == isCompleted 
          ? todo.style.display = "flex" : todo.style.display = "none");
      }
      
     button("active(s)", cssBtn).onclick = () => displayCompleted("false");
     button("completed", cssBtn).onclick = () => displayCompleted("true");
     button("all", cssBtn).onclick = 
        () => todos.forEach(todo => todo.style.display = "flex");
    
  unselectBase();    
 }
```
Could it be simpler ?

See how we easily we  reference and add events on our three created buttons.

You cant play with it here : [TodoList](https://flems.io/#0=N4IgtglgJlA2CmIBcBWFA6A7ADgDQgGd4EBjAF3imRDIHspaBDAB2fQCsCR8TaA7ArQTVesWCyJV8BEgCchsZAG0ADLhUBdfADMICLkiWg+jMIiQh0ACzJhFPfhT5lqAHigQAbgAJoAXgAdQggKIIA+VwB6D08wgL53L18oQJAWZnComLiEmOTUsEYIARD4TOivHO5CYnhyCH4DEAAmJABGAGYQAF9cY1NzGnomVg4uB2d4Z2oIMGZaWTJvYG9CgGt4XG8iUjIAIUYiLYBXAVryA6Jvbu9teTBvIPRouyCAbnj43gElgBVhgCCrG8flup3q-G8AAoyIxZABzeBkACUy0+fG83m+BCWACNYMd4PjGCQ1iDHiAEbioQAWNTeGnNLYoGnIoLozEQbTQgCEsIRSNRwHimMx-MRS1BDBIxzMznQuPoAE8PhjriLHmrsUsSL8lcx4OTtOCyA0MTD9ZssY4pmQtowyGRZBBcQQhRrMbIkcdZObvk47d4HU6XW6QWFVowNhaDfbHc7XVt-bbkarMd1VRrtd48qDdZaoUEYkFU1nGksrG1yfmDYWQJWS2nrT9fHxmMdJVi9bWgsV22RG2WW7iO3QMXnu-A6yPHfxB2qNQgll7tLAIDj-gwCOS+McxE2l946FvyUoNJmteWsQQCJvaEDmOSAAYe7wAd2gZCsSEwKAApE2mKFAAHgAtB+UBfkgNLYCozDAYBqzFOBn7fh0ABscEIa+zCMDAxTwu0WGIbh+F8PCoGKrOYCoPBiGFAixRICoQYdrQiG4iSazwvIpxQEgmJvlYpRNk+F6YtmJA3ne5JQqifgRi+aqYqRHjkbR2HKTm67MOISpIKu8CaaK3jsMcOJckqoHJs4SAELhJDwKBcK0Hx9FwvCyFUXQNEoPBYkcs2OLXgQACiziyEqMmgkpJkMZ5fCUbQ1ECW0xGvhBUEAJzYABOF4WphF+cZoqKrIUDwLIqXwdsQjQN4AAkwD4oSxKkhmGqxZqElXlJBAAMqwmQ5nPq+8XIXQzBEXRY0eV5yU+al6VaaICwCU1LVEuI7UcQsFVVd4bQ1YIa5QI1zUEltXEdVpqkERpiEUMBZDOWu8J8EgjmTLIoniUFOo3nsZDjt4T5lft7THXVZ08fAKrjR9zT+U2GrGnwEIYnI8AOvA4VOlFwzQu6Wk7HU+yHFOMR1kESY3njkV3sipZaZih62pF5J9h21PcMs3UmaKOJKggAlBJl35ZVlAHeODlVIHw-BlLzr4mbpJLwFYQgQxSXNLHw8BvkehOMHwZ3MF6N7eHjlVBPzJndMzAveOzSroPwGz6hb26gmjGPQvAxNO5y3JQvA6BCRAJBWCCfigp0gdB5iBV3qHEWu54jCXamdtBy76AZ5d5LsiAiH2yr6paacpMXBTckat0GqoyaZpYl6ON3gAkhQYAwsMCfV+TRBQiua4bsMbqvoeMTHrQ5ID5clNeDztO3sMclM+Xh5R3Uawz5zbbc8XWwrGQlqiyA2+koqwG2w7pfeIefZ76CuvL3zQsixShnAcx6CSzT3gC6EgEnvO+m8kQ5mIM-Vs-Y34nzPhSS+axr4AI-vAc+nh1wuj0CEfSwkYBTFvo7AW09hjoCgA6CmZB0C8DmEuSgRcQDaEzkQdkLMsRWB3jPN26MrAm0RLJeSEYkEp2AKQhgSZOGkhnlsJ+wwwHsIqrAbh-Ao78MNKCOS4ZIH0JTuI2gbJFFeBUXwMArkiC0E8JVQR2ioRKO4Wg-OWDcQ4NPowzBBAXQIHnE7fRPCzHmXgK5TsWiFLQnsWQxxHjsFrjcaCII+CKp8B8aKKu5xB5TmId4NJuwF5yUAl6YavptKeBnvXQKvtTSQixjjAAMuuMgd4CC9xPKCM8CdPTwFXA0ppc90l5KpkfCkd11LFRLIYkyM8CDoEKMwKEyc+6IRyWTPJEyK5N3RlUjESikTwBki0gxaItJTPJFM9AuhlGVRhNopYPJQQzyyUbBg6AvRmKsfk8pyS1SVJbgshgByOneEiJELEmc1zkVbtjCgndu7ZOYBQigR5OGAIgAbV8Jy2noCxVMpMbdoXDC7vAHuDzzyfMxBsv2IjCZQjEcY4YkiuH0pgTPB2RyTJbykRsM6eZOXcKQZQV8XJoT8qgICzkbYHGnwQDQoQCxyQAHIvRQHleXORzzHFPTIAAETqAsB0LdQTyvBU5L8vF4RWHlffPxCKqEyrobs7l3h5VOkJJa18DctLECuMKdharaDoEcatWQ5JNptTWPfP1AapVh01Tq3gsh9WQkNQrfWbqjGlLITaog1DaG6QdQq5hsAiBprLmqD15LvnN2qXi+Ag0HQjS0T6ky89a6DJAAAvqdbhpumIeXbMHh7J6QBGIGxYSznaAWKFEkVgDk3MidG8hOk9KMO-ikky5cfmQgHWrJUABhWg9qKBnShOufdh7KBitFOOyd07Z1jszZQ7Ndq81Hpjr4AgZ6X0MPLiZAA-E8-1jjt3LviUwhAN923sJMiA+dwsw7AcYEqRhKalaPPTOXPtV4CCazfJ++hjqiaYjCQhvdB6v1QDrC61DiFMMtnwfAPD+bNFCO0oOxDjGj11kLawkAaHE7lxnGOOsYKO2A2BsiHhJA1yknJCR4dsB76Cf4MJ+o7yJ68z6kDPgEnVHSbJKCejHHKCKdHMpoIub8OiYIFpnT6M9Nzxw0ZqANHlLLJrkPbOooyX803RiYoIQHwHLDE2q9HkkRRrg9WaSgJWCIUPOkPpuTa7ikFG8HOEka30wJv8vjNSKD1LHluILuWa1dvMnXSuZwksedfIUn0GJ0ifI1HV4pIXxUhAEv5sgD5cCvj+bQAS-XetltVDdeIRl5iLEgcwvcfwYvMDeNUAeZomidEwEgDooE2htHWyoHofQQAmDMNQKAdgxjVBsi4CwGdg0AH1OJHHuxTOtpI-BnlwPd2AtBXs8jaB9-gFsIAAC9cYIDlGQAgb3zzZgIJ4WG2hUg2DIFNYFb40fhw6G7BEkRmgqDx5EWH8IaYAAUO7ND8M0AAVAAWQdFYdApOPtoNSGgmm92tapAnc4cC8AIDmrIAJRUsBnNs5CJnSOnPHCgTQZ12E0mPjcFu9oSHQQucvU8SD8+H2XHwk1ZL7nGv0GHQ6CoPKivcTwlSJxUkPFXKm2srKg6bOLdKqt1xW3fEHdfYOkqhX2vYZQHJ0Ea33FeL26DQJAAxNoFAKg-f3fhEqN3Nuw9QC92tbw0ftAkHjxb2GUxk+h7t2niPmf0JZRQLn+Em1C8e-D47wXl0q96vIvAWvqf08HWjyQOPzv4SeNgFY2Q7fi+d4EgPofVelTEC+2+EfnvS9Z+0NoeA8Aq8RwoPP+v3uBIb7X33sNW+S8N5lttcNfenQmxVyAEPdfj87+8FSRgUI1Cv-UOgFQKBSzm-hG+S-Agj8x9H9q9n9mg0BcAwCUAIDwCVB0Av949XdzMT9fdndLpUhS9Np48TBPAk8kCH9sCVQ2c990CT89949p8xBaA588CM8KDZ948voKBh8ghNVXo+cPosRbRKoEC+cbBUhWDxd3oBJnR+d49JpUgh9TQSBM42ChCjYFtncFoD0JDKopCZDBCODvID149IAYAEAVDFhI51C3oODdC4B99Fdv4zD9Ciwl1EMBJv40sNDQJSgwACABJGDuDUCfROc9AmDG8fQoQkZgJv8mc+EGBqCb9aAwJsM8IqCBIOgapEjgIGQaoeJENc8+dYiIirdojpdwj4jvB0IapiiUjsA0iE1CDFcCBCgxB+oCjIjr58i4i3wBJgjvB2jkjvB0iqiPsyBnp6iWj+CjJ1cGiBJioiiaoaQapgDOIX91AFjYCaRWRMj4RfgBiGjhjnpmiIiBJyiUjOgaoJjZjn839X90BljQj2dypKpcibiDovxihapTptg9BJ82cFZZZmCoj7iBJ0pFcE0PBzI7j9pQJASIBzI9iZpFdIA+AIAAAlPCCE6-L4sEpEyE7wYqePEZS3IIHEto6EvonE1IfEw6I4mqI6FIrE53PnYnAqAiEk+k9SQ6f4pnWo2AWnRiPgAoOaDg4InQ3knkrk8Ywk27BGWpLpMgIUhKUCBAbQAXTE0UhGeE3gqUoIBGME1UkU7Cc3PnTkhKCU+U6U5COUhUtKUUnXfU4oFU-nY0xKEQmwJaUU4oQYnIoIHnXENYEIJKGIsY1sbNRUqkpImqUCdop-eYs49AdCFY0CMxIHH0nYwo4oAMiYiYro0MmqcMs49-aM1MJo7IpMs4JYVM4MlIjMlIrMxYnMlYxQ4CPwBPPfAAamuP2mbILLfA+yVGvnrK+LbIaObIt0bKCCzxz0UKgCVAADFwNUgSMHDwM0tv5QJVxCj5BDYFY3wE0FtTJzJTRtArJLtx8HInJcQkQ3xV8+B49PEKopyjJOdwN8jnQ+A1g-i4CGChBZQ+Aby6zVd7zbdWjvA49WMd05yjI0tbh7zlz-zVzvB1zNz49v4Zy7D9JwLQK2dv5+ojyARU9EK2NkLHDtyLI9yHdJhbJtgjznJU94LwMML1Y9hTzzycLgKUKEICLdz9ybRSL7J1YKLi9LypC1hcCQB5hPEtkBIPSvT1d+KVRvBhKQgzRx8pK0tJo-iLTgZmcxZUIlpiJvBOEtSOjpiWKgK9JOs+BjUlz5ygwTCXDu53DODvo0szJCL2KSKFTPCfpIxhTvB9iqKuzoiSTaARL5LbgIBgJjNSTSi3h8y-SSyUjSjXjB9uDUTwSMTvLb8O9F9l9MrtBIq9o5YkUniTp6oei3hTTxjTc3hlLMTyr-8CAJ1ZAaIjwE0BBxAKAoRQJY8-wth2rTdv8SqIFbtxByJjhGBEQ-A49+0281AC8-s7gKc+qlhBr4RhrERIclAiwlZesQBCFuBVdZAghzxfNuikRal+FlqpwURgBqE6BakqDKpd1ksJMCBjhXQnQoQ-tmhUw6qoQ2ZWwH5TqRr4A3QuQYR0BrrbrZB7qh4URY5FqzqCAlB4ANBkQWsMQBr-rRr4BuhDrakYRcBNhtNgAUbvAsLKj0B1wSbEMYRkRf0yAlA0ahqAaNB2hY56alqAaAAydm+AX9dBcnes2Gjm9mvgX9D6MgLGqtBrNiFxU2Km4ANmPwAAeVxHYDJnQAlGJ3kDoFPgNAVu0CptwG5KVpVvIDVqRAVrfD4A1toANEWCVAADkBhmkA43gvrH5vBaBuQCbVcJaghY5tagluR4AlAIANBOakCfhZBjhyAFggg7k-AIBOaYRg6NA-Ag6Q6FRigKMURkRuhxbNkW5pCxBcasV0AA5gBgalhkzYR0YA7vAJyJbkbvRikyAoQS6A486-ZbtZhJsW67Qy6ggcRHyicQA-bLQPajxE6pSlAyAkb5qYK-BqEEByIvwXaFgT1fqLrDxh8RiE1yAJy9ApgBgk6Q6JMvQ1ZHI6x0AaYghbtGxgbPBaB6oVBY4-APxTYqClBZAkbgA36IjP6U6fpDxaA-BpRZRbQaFMswdbQ6wZBnRmABxeM3hANZASAF7k7cB-V+Avs8I-AoQ5IFJgBn6-BQJQI+BOb4ByG5IHZcBQHwdrBsYoB0B0gpgoBd1hJhcoQDFugvVDRgaA4iaH76pMlc74hDrsHWH+p+pcb8bkRhQQBAltgQxyB3gbtfBX7M6qDyFvswH5Q8tQciVoGghwU1gSxcBt6AAfcx3+zR2h8BiUUKKB5wazKKEah2swGBuQCAeBksVQc8CAF5YgFnaNbDVfBB3AfxqwFcBe8JmZSgCARgVILBpDCDMx9AXCL0ZwO2+gMOZM1QuiuqqcCAMx5EXAbNX4WYIJbmXzOScu2JjwBJvgSxoIETHoHOw6tBaR2Rw8bk4ADMIm7musWgZWsmX2hese7kMgX9KEbklECLfQ9BQZ4Z5RkesZg0ceih9m6Z1OkpvgOZtvFEA25EJAaZvZ6J7TDurZZ2Z6Xe3uvGw54AQ6iAWWomsWrejBqHUpvwX7N4YGshzZyHCm12cm2QSo6ZpmTaoZ42hB0etZwO2R4Go21Wj2J2iTJe3XKwMIFQLpiBWARWpZ6hZF0OEphJxFk2oBQGol3AVBnkOPF585G9KOKEapi66luPV2iBSat4eAVwWAdANFle+ARsxs5EWm2ABGjQDQO5RgcVxO6ltoVMYGkgZEX57FpYNvXpn5vWt0dlpYWeJ4gmw8SHPgJQWgc8YfWmggLQIOy1+O4eHOnh52W181pQPgWe-1dsbDIl7hotQ0d18yGdFEah2gboOluqqdRl5l+FvWg1jlvwDV4G7VteoB36mNpYI1k1s1tBy1vGpQG1p52Qe1n1x1-NtB111MP1z19uh1itgNnOkp4NnVmCje5V7uUtrQGtk9bucV1MImhtiW4KsgfqdJNevuqN6ZvcXFhexuopC835id2Ofhpui87puN3oCAPFqF9AQlg54fUlgluGFF1e2Qb6jl36iAVV92+O8Vt4WQMmuzY4CqZpAxRO4101tB01nOomvgC5luHekkMgfe25mRwmpdq5y-cgXG3QQd4d49zYWmzQHZtp-t9gR+vgBWofTp8uvWnkRdmdo8TVqEPkad+rZ2N4bMQ2-Frdg9olo9k9yulNi94fY1kOiq-+1O-+kN0DsWw682JEU+WW+WgAKX6gVrtqjSHsslxt3DEFwFZANtSBpnXdthpmHzZaTYgUroxDLqAfY5noVzWpWdoETuH3lc2o0F6aeGKCkwfYpefc2dU5KbaFjlkCmfZE+BADuSM-Zrc72o878C8+U7868+mcbP85KfXYMXllC+Da-Z-chAKg1vOtkZRqCFcF47iBAEbN48dCVCpqHJACiHS6CDi4xFT2kbGuS9A7AD8Fpy-DSaoLeqmpKdq-pzK7IEpzAGREiDABK8avBGedA5a9BsjvRipt6+XJHcq7w6G4m+PcDcOsYFdAG+m7pyYaW-m-7YmzSmW5I6G-mDfEa9wA2-zshC+3hG24uqJqG7O4u6Q5O78z4ERNb2kfuZRp5BhFcADk5ve7IDCHOcOu1ATWKBe4Jpec+55qQF++FtFt69hMw6u9W7h9Hdh8YGAnh8G8R9R86d64lGp2B9HZA7w7bzttlBPNg5KcmaG6R7xqOcxsOtx6x4J-6b8BJ7ADJ8pcp8x7R9HaQDp-7fmGKCA6m-q2AB-jtH0kxt6-gh299AHpDHIlGf9vHsmYFyG7a+RHy-gmK-p6RGl8u6Xbl6HsV-GaPCmalOoTPu2inDxJSeLgkxDB7hKdZ-Z+zsh967hEqPJZB+F+KUEbOiIbQcRpFsh-Fd65qNoGSlrcJ5I7IFcBUF-RUEh7CDaF-TaEh8p3a6hE2xemO79nD8j+aBl4xFj-j8T9+5T7T9j7gN-Sp3a4FzaFDMpxhD8Ab5RAz967-b3oPqOyS+j+brves8fepgCBH5LBpoDWesHoIhBvEBxA7lNiMl1uH9H940bPlch4n5eqHpn8ODIHn4qmAiX6CEiBLDX7u79gqkVHBHOruYJtUYgBvdA+qdkdUfNeEgIHeY8h0Yh0+b+Z5Af6kzYxZA5TMwMEhPThc-AZTCpmAOf7l0-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-mMDWOcbNrrC1-GxQR2c7NqTwCkA-jL+aw3YYUZtMJTDZk-KbkRy352A36Qt1YAsM8km9WNnVJ1nZMqaBHEicVOMlMMqF38vBTRx4Y+SeQOo5UJ0IxCJDsQQgMOGdzrAIDvAewZULcGLzbSrqIxfdC5VTD8K9ROCn+Rw3br9Neut2HBTQuoHeASJv6EiewoNCcLf5VNJAKotdg4L9a6kv2OsBv7Aciaei2uBbL7qHM9JvyGADvOaQeKCauzfuRGx3EE0DZMcqSfHPHraZAJUIC2ZsF6aeL25VwMJRnOWaRLPaF7ddnEoNq4AQh5LcIciF8YbyYJ4A71lcBiXZKElwnUTuJwIiScCFdbKXh2F8UBDqEqCyqE7JdlHwEu8gZgH4tv5eL4uHC3Bb-P6XAd05+LGuTJInojSEAoUoIOFKmm-V1FeC2yvvVkDBQ6SCaMwEwW2Caw9wZ0E8u7UmWIMoZDHO6Y-nnksc8BZikZRw0qW9AC2OdDvopL2DKTVJzg+SUiEgW2g3lKksbodXJkCcOW8nMgJYzaCRCNOY1Cqq4AvI3jhWbeRxdOF842zikJkv2HwFdBzIpS8rC5W3mLiQr7pceBIIVIlkIrQugXN4ObEF5etDqlYdHnhyRUJI2gNMODoMoxBWBC+UcxlVGGt71hmgrKo7uyp0odAGVJHJlfWA6CCrc+lzKwDSDFXFIJVcq6VcKqsAoAFVGIJVSgBVVmj0IGqyMNGASToQdVdKubgYqVW+chVUvfVRKqlF3MZVLcWYADUw4rsJVswYejTxgUkc9xKDM5kw2URnMw+Vsm1bystkmwTV-bYxsAsrp+AJVjAGmJUOgVE0ImUTfeVLy9AhrDVQlL0NKsDmMLs6vXKmNyvFWhrbCngCNRpOgBLwCerq0tSAGLDcA2VXq4pHuIXQkZUgxQMyviG+wmNuA37bMJ2uKDwAtUXgeOjEHCamUh1MQMdV4B2EaSCARa26Y-KwlDxF1AcYVVeWrVLrQOOkwpmuqZi9cehsgPSPqt3V2Il4R8PEgFTkr8BhCxAfVFYjSziwVKLFXSvzhfW9ySmZ6qtZ4E6bCqlMfATNXyoA0Vq-YsgADSDyqEFsLlwDCDXaALafNAM0aZtRiHdZwhbQPy+UI4lkpbJUgXoFql4A2rTIcNZoVIItxOgRyaY0yU0n4Gl6kTpk4haXh-OmRvq+CSGuDOHFQjx1bxVGhULlVkCIkgSkOF1KNwgA44NeNvXjTVTqrHiaAp4nGG1Q6pdUOq3UjBh7JGLobn8-izJbGrrWapNNrK1FToMTr+Nz6GsLWLcQ-nDST0+cTOISCnYALDqE2E2BQnxB7INNbcaNWo302ebtNKG7YA3JIUUAyFhNKgu4SCAsruAMuW2PmWBz3QZY-Gn0mliPWQUBIiSKYGllhKgRWNCpDoGMlaalNAtL80hSenIWSY+EreeOjwg9iSiqtDAeEoDWBxt5sFbEQ3DE1LF0BDcS89NTSr7ot9ZGjbbksSs+5vAyVwU4ZXkkNkK8s5JslXsxFjjC0BcOaL7PrCDmEcsWwq6lc4FgCAa+tuKwbdCoSBr4xtW23uiUyBXCrxASUrzeuwlVXbiAgqiISl3CVGyZttdSZtguGUaKs6ea72UzCwWmKWG32-Wv40cTKlVSqQfLTEzB28lDSapEAFDooX9tu10iEYjdsgHBqk1oHQdfrBHW-r35j1BdOLFo1o8fpygg+NB12Do6JVA8Qzf5uIXFbgtpWn6TBN8FbI-FOzEzfXN2CUB9+t5D+Ujo0lIJr4N2gjsNOLhDTZGJ6PwBbKCAdw7axOAAKq-BDN9vS0OgU5QoIS492n8R4oPk8NpdEq+XUrpV2NqmYoNdXeZk13RF3gya-UeDttJBBEd9u2HZKUh1a8+1XOkVLXMc39tdYAc56OV16YGL9YhsBwf2AD1C9ugnS2pJHqwrYxMN1Cc2MlGSiWgmGrWprX4FgGHhze7-N4FANAFVMdxsjTeQuhy2pBmgwRGmKXo43l7N5cgBQA7N5z84eN+2eVr0Bj1DtdgiemsSnv9qs6-BjQLPTuIuo9Lrafi9-hC0H2bDA2uATvekh73J6taaegeGzrNBvKAAanZrbyRs8VhK+esNvQluxp91G5GVYFG0IzgaSco-dbXZ0us15iijirMys4Egh+2dARq4JhDv9j97O7nWTF50L86y5zMjrP23Dh6Owke4AIDyjr6Cg9DsA4X4BQ7FBuJx7ZqBTGfkJgkACSnXRgZdBYG12FO3A7iHwOZjUUwuAAOqaV3sDAPYBTKQA0tegpEo-TrvgF1Cj9xkyAT+uXhhxjJRBtOe2j87WbmDi3QJlwb7p8sRDsAPg3jXORkGoAlByCFYF8aT1v9Ou-UcTro2yHiA8h1CEUvBZH7dYMumtHWF1isq72-YaQ2HF0DaGFDX4JQKvJUPrhzDHYdQ1xs0PWGKDuh1efoe-1sKVlFigwxTpKbgyupMhmgxTM5oXaju3+3WNEacM664j0yYyd0AlCAJt91krjjEYp22bLo3QAMl7wuqBH+wOR+zWLXJ39hneVybTRcqKbD4cdw6peAqwsECHJdFy7kvUbx2dMb2gO8xRw3OYo1Ddda0w32vN3+1Ugu4NnjbG4C3t-DHDf+YLocUEB4Q0i7ngMpqMPSWJ-UpscPk3W-rL1NAEYrIQ4JuUqV160SsFVCrOZwqdEKKi0W1KBlJiKRCfIlUS3JVbKqVd3OlRPxL5MqOVX4vlQxCFUYYlRPqvKTKoARKqHVCqgeJk0gJ5NrVbqp1WWkqa3gz6jorHg92pgGdCYErRgOdo6cF11aozQFuqxTgENEG9Ob2u1xqVo0tmLEa9jwbIgCGt7H0U2L+aAa62Wwjqe5inAdBGRhQxPXa1wAfStZrkopuqSWMrHTGfbDSYcDWArHIN57C5cPmVlNjgGux5eCwUOMaEPCXBH6FeKVxoDr4+XNE2ASwiNhsT4cpnbQE9WGtIBRa4k2erXEUmQADwwGs7hpNwY6TemXBvgzCDAB-UrJnZv6WrqORx69de7pzQ5PUMXTWTD0z8C9OSYfTjJghoGfVGZJwmIZk2GGe5ARmMYnNJ5pyZCNDw+TNDAU4pM4YlMRT9UqyRgIlPLGbdvGUpldJNgZwCAzQLVEXxgoGxDF0hPgG2Y7NjcpMhwMA32YHNaooD5YSOtHTNWXVx+fCAgObUtq9LVCuXIINEjc0lhXh1CDc-oXKGQ842u59BAweglHmaa3+sc4cF01ZrLzBAavWpIvOtmrzsui+E+bvPcADmR+8gHWS-NvnTaZAJRZqjrDNAoApjI-QLycYfMj97ZMaikYgTiwMjAEx8-2cOCcbFDeR+C6hFlq-mUL0yYnWLVSM5bELMfZC22foaqkMLFYZvTYGwukXULde7oCeQSh0kvwNTL8-0QVDwBmLdOKhoPVoDRgS9F5ji3xYEvdBABcINi0JeAhAigBDWiDm-iP3ixEj5F-nDnWzT1J9Yk4QGXjStxn4E1YkuRhMbJ6IKolL7N7GW2Uvfm+WQ62w1YGibsXpLIl2tNGlTqWXhLx1IdVqkOAzpzm2afenUWjTN8xYwkUID1IcuyGArcGBepRb2UtFm+WLS6t-tuwwW7QkzL-U4asvtk9gBIEzugA6AZ83Ljlhovum9x4aQCEZRYnAVU3hX2yute4WQBBH2WpLAaBonVezQPCp2kPZq+2RKtFiTxV+dJraGK6pH2yxF5uklfbLdBjUipwSxlY4tMXigLFmdBT2as8j-gnTQq9Zc0u0A3x-8mq06H4vCMBqQ6ma4lbmvSW1rO10dpteNTrXW5n7MmIqbMartZGPgk-elY-4YCHmegWAPQb+xuU-rTQ8iCLBUDUNwrC1y2jxZKYqAhp3+-hAgDN7dXRBGZ8KzVTPEbXwrmtBTUfvhvwAacq3UnJEDaCwQVrGVvU+efOsBMIOpDHHLgBcK037rXVym16HksLF7rm1i2PoMyQPmyb30Cm9Misss3e6NNpkE5DE1MhGbmNx6-4vCak3pkFyWALgOasK2mx+1+QKJduxC2nrw+YPcADevs6Pr1Q762IEBsA3GhuN5iNQxhsL04bwNgZjVeRuq3mraN7G9gMxvJRsbtt+EAgHxt1dCbxNrFpZfJtS3qbfAWm-TYluy2mbAtji1rbfzs2pbOIaWevGjs0Jg7zVrWy9DDui2I7OS89qncFvS3b+st5SwraVuU2VbOdEgBABQYIBFTL1vW2bXevoSqhxt3679jBvNWIbS1p25TbhAkAQetNtQKTg+ql2fr5dmO9JcrubWnLVDW7NXdrtOK87Ddo-Qraq0K3LGjQ8K5dYxvNX+7g9pkMPbJxy2Irit9muFcrtiXYAsgeQU40ktOGILEOKHN0AS6CDMO4FwQcRqImi9IeuACXkfPmBoDprfW3W6vZ+soiN75jLe13a4uLWobyl27IA+FgnXPz3+su+feVs-Xe7k98TodbntIPgHZsgjtfuQHf7H7boC6V+ExazWcHO9oOjCLvH0P+xSoT6upyWA4qYVYis-RVQRnhXbrO1oOjPXQCMPp6zD55YIHlLAOdLut7phVTQfgOrDP1ze39hmakOH7n9za93fgdH7krHtMgNNas3yOxAE9mhBxentq28HOdXR5I5Qc0PTHF1noetfg79i7xzj9ACw9o6qM28EK7lovTP2hkuWCM4AKo25JJ1Eawj68QjTX4uOuuTIddmE+YeRPBWq89x7E7keU2AAjsNQKH6oSAu6H0FYicfithHR3Yp0qDzs51wrWTvCAmikL5PZAhTq68U9cdlPSnyTlx20+iepPugQFmW+u11v63-BLdopujLtvMRcAmsKqOZj1M0xJCSAdUtAHMLFcT7mVx2ys44uaph07BG204cmebXNUC8Y1Ds+mSSF9n8JqcDIw5se3WqONu277fpz+2Sbm1hW5Htxqv51n0lzm8nbaaOA3JAh0GTfj0vcAlOIALCvE1gDeSL7P1waFFcTXK3HAqdfLqtJvE29Vpv0hiBsDm7F3oZz1gZx+BFkzolT0hK4GXwvM13ABkGgtpFQplkcKYh0JALICUBuUU6NLZS5neLuVCqX5M7GOGmJeGhWgjL5lwSLMZKBcbKdGkFASP3sv8aOSgtrnTFJwhMX9dtQDrfgMEB8XjLIl3S9JdOH575LuuzLa5c0u+X9LwV3qZZdqAdH0rnJZy7zLGu6XArpl+a+FeMuxXfgCVwg+teVDbXh89pnDmBVqtQF3-G+TjET120pGhOFcJtUJyNgiauc6jrMyCU+WCGYcS083PDfjsZOia+-ZydcVDxSJ6Ky5oTmOv6wA3jrP2ZAxKFkAM3CSR0CjkiBo43wGOLHPCBxx44VABOOHNfRADGpY3oHeN2EKpoFyi5Wzf06m6K04mKAGbhATktppltqGebi54Qr+m67bptarNXuDp1fsyaNlQNYdSEAuqIE3JCVUIC3egddmrhYTQbXG5yHs0cB1603YNst34lCAEwVACIPzP-nHhqAGm8-fLO56x7utd++zSajb3E7l0MSd2abOTCqQU0tXoXoBMzNUIEFJEHhCbUKQOzHo3coowvnX3NI7gHh9NhEGhVOzXruCSuvYvimMG0pviLPC0dgGceWgLDMofn7aAQTyHC+eGN9B-an78j8s-qGETPWboHNqkJOfb6MhTNMT2gVpqmt3mznROgLc5SUACRnO-5ugB74+6E6an1RBVtGptz4sfgHXb+JKaoMjPMn2eowCw-A68RF21WcUlgC9dBNDQLfZdDLdt4vlZARPc4zcZJcCOAcRtpp2dgjzBHfjaNjQiU+ipt35LPIfOvSSUAnPtAQlMSjnkeevPbynz0wuHkBffq2nI97p1C8nMRUgimCjF7z5IgEvLnwkIe-umpfFJ3no+tApVbZf9WOm41np2Br+NyW7Y4r-4292svfpIchL3ztWO5eav18hSVW-q-uNoFcC41uE769YsX7BAJUOjDBAaTTssAJXEiEZZ9PGOfgRgG+CKBLAV8BL3GsAB2Wax+IQQAAOKhRTdEzhhpVHcJyNALtoUCP7SCCfvUBRhLZJEE4D8AyOfCDZUiD8DK6JyoEbAMVzvjA1b2-F6gSByerKIkAB3o74-jGDKYSm6TNPpsHSatBKh6TDoFgtzqmoqC3Zw2IsrXpPgnZvwYnJNIWA8hFG9aWyk1FvaMDu03QJ8MKqMh1BdFy30bgT2-HzI+fA9pk-6cBZk0CAgLKmtubewz1Uw5Hfb4d5CDeAraQssOGCky960nO8AljxeylLGtNAXLEGhbFmzQSsfZvuEEyCT1wg+TZS3hnrXF-AtQW665rzoNa+iOjf-jE38ohibm-TNlv33zb8LZXAW5jSulXW+u9IhTrW9ONjzKqiwDHlgNeYGcAMjF7emfTJ-tt4DZ9ALv9AT97d-u+cI8IT3rA0EFe-c4PvE8tIPgJ+9mg-vggC8momB9SkwfEPqH-b04S7aCG7Q6hHD5J+GwRF0qcRUEDKy2Urxpepn7tPH9Romfke-g75hMvchb2cfzmsv4il1h-LhoBWMd+Lz3mDaPZin3Nxn-do5--m6hP9+jMd+pgzff097Xu6L+0fFsZP0QFX8BN7IjQJe-deoayAzREfpEFyuxc9vA4QilU-e7hqZE-d-xT8E-XoGAZQ9bwBBEWJB2TrcGtLJ0BpCpXth4Q24ccjZ86gXTx300-YGhpA-ab-SwClQLtA2ZccIhmgshocyDHY7-DGAf8WTJPw-8RWSKAuUpSapTE50mIeDTNIAogFP8mAvgM-9ZbMS0WlzRN-2f8pwXgMkDI9QANzoHWNfymk6wBrTwgyAoaA0RQMa8RICGGNQJxgsBTBjMU6wAv2r16RQO0AxyveAFQCcQJvWL9ORAEBIBHIbxh2pq-XSFr9+AevznAmzcwJloSmH-3aYMnWJHgBI-RpEW4EAHzzGUKnZUzjYn-D-1ACMYcAIz88OJHGYBggmEEbJ5UX9Ayc-AfqFChakUKF3RfgGCgGA66eEgVpqcbYACDSgBVxAlg0cgwdlQoeElCgjwS0EYRYQTcxAB5UU+mYCzgYfTADaFXVlTprmf9jO9egIIB75BwJhB9o3tcekEDJA1-xiCzgThjkCzGMPkqCKAYIIABpBN0o9oNHTgR9JAuIK2QEg-zWSDUglFxABMgyAXSRvASnFuB7gVaXWlvAWpA7hqcDuEKDItLoKEDeg+IP6DHWAdz8UilBXAX9pg7kGkCP-TmjBDFgmV1qN9A1YMCDgg34FCDhA2o0wELla-BphcWfYNiDoAgjj+Z-gsFhY9qHdgI3YkWajgiFr8d8E4QvQCkH31OWXxxY9AnBFUxYFPClRAAgwU2Aw9SmULlppEadINSB5URsja9xWDQHSCggeVDs8OVP-17p8uS4IHgbgu4IPQHgxsgocFgogG+Cjgi6noCtkB-15ZVQjZl1DugqGjuYUQrhnqEw+U6CqMG7eWm-U20avQVAKYYMATBwWbkglBNDRxBy0IBV0NJ1XDRQ18CQGC9X+cNKRQw-UdKaiwVJ-ietmvM+VLj03kLQ2pxfly2C3QNA8NdRBph2NaVBI1+APDXvVTQDUW4B-UDg02BBnRoCWC7QYJ1UIjCduz+xsMKgie5EQQGyapEQR0LwMj4WEnGcQIIiDUBZ8JAH9RYSCZ14IewngTvFyWVAFBt62N2GXw6yNQEwZl8JPGnD84CsMLopmGcL3I-AdCEK1Q5RnVs4+gBYGxFP3SQkrCqNaNE-dxKb0mYY4QbMyNwCAOMNAgDwwulBNwwuiHkIP1fj2tstPa20aZzGaXRNwZDRxA0M0ef+W5I2gWPF-Cy9MMJJ0wWf7U4YJw7QDrJ1wiXVHkidVCDDoWjRCNr0ww14XXZgIqah9CvwCCMAi-AH8NTcwIiHSY1wWdMMhFmAVIC2xMTDBlwi7LCLTxw-wNMP1Fy9RiNNx3gO039QDJYvAIhd0OcTIA5LV6X81AzdRGJ08LVCEb4Vwu8VEjW8cvRY0wwqSJgjynWSNGoXzBtU2pMwjgnw0H1CwgHJ4QfPGY1wPV+WgjGwzYFUioUBMK5Mz1ccOzQ6w-AL6Dbpf1Fnxomf1GEhzUVy39RJRBFHgB7IqhjojvInGHsj1Qs0BqZgaZyKoIZdKcyKBANSo2PYIot8Cd5SeK5F7DigJKMmN4oocPIjrAXgiiiI6GKKhA4o6CPcigpXACKjUoj+XKiso8cLvDM4PX384XkdRBy1IgaCJAgpxGZDSikGRqNbxWI8CL14m+NyN4J2o2fGyizI-UUY1ueAaKHD2okqI14VwlhzoixoxxBo1peaSPHClopCMUMIIiyPFhg-eAGJCdo1CBajew1HnajYSRMI2iONf8JhApokqOGiqCUaPUR9RFaMmiEoxsjWjFop6I1RrabaOUj1or6JIjbSVaO6jEQD0NzoAo+FCCj1ENUxataw9RFf9ZjCjAsj62Mj1gcaghWj4BAcEHFlpbsAHEa0QcLz0E9a2aPXQVFdAYUX1NaVPQNAYJEKOUxCjDmS+1VlQ2yMYIAe8w71SY8mMUle9ZfWpj+wWmN207HcS2PYKeBmNuVvtCfXXBNqNcDZi59DmIaQKYvvTT0hY-mPvtpkdpVkAY9BTn2wQhCqF0B9YHeVXMoQGPTJj5YrmKX0qYzYF7AbKGmGAAJQQ4NCi9fHSzo9BtDegvM8FIOTdBLqY53C9f5D2Pv072NBRYkZDD1mJjtFDcPti6YwWIQAJLE+wKgxuahhj0FaTmKrduYi2Jpjd9YaURiJYj-hZiZYxOOTi6Gc2P70+YjOIvNo44WKO5RYoHSZiW7XOI-MsBfONNiU4ouKVjy4lWLsd1YzWOLhegHWK6Qh1A2NtojY9BSTim4wuMpj-aTakvcbYu2Oz0NOJ2IOo2HJtieIvzd2OyZPY3PQytV4x9n9jO49BWDiiJQNjDjs0COIFizrAW3LjsHEpUDY74Q8FxjhcDGIa1DcdRnfom3PGMNxUTDRlfjMY-GLbwUzf01d9DFN+Ka0vPOeVxjv4w3C88PfW4XASmtchkwCf4r1jvioAB+J-jOaJBJQSutOtgvAJsBYCWAQsADS2BnNU2CRDI9TTS2BImLYEcUTgRAWF1oiYbE5BCgREC2AE8JVC2AYECAxGItgZgFwBTtbXFpImSNDw1BkrBolwByZWRHHVDFL4mYS3jLhK9B6EsihNg2E3dS2AJE4sytBbsSaGkTKANhMrBugJbHSQVsagHQhoIZoH2x+gY7AsBzsCYADAZgOYFwTlgKhJJNOpI4Bko5EmSmsiV1K0C4pKhbJEQFXEwXmuAFQh4HlRngDbzGAVUOEjsSpsGSDuBFQkJMiAZ4dIHCSLwSSBrRJwWSH9oWMDUFiUn9WRPH0WMJFQnjXE8fSTAn9ZmHiBgUbJFNBYkVFDvN0YK8FzBIUduALB5UGIE6DVQbMErBqwNJILBmVecHiBH4CKFnhmMbRBCwz1W0OVgQAZ9V-BpYBGD+JWIOgE-UcIR8hbouoEyF+B3+IMGBAPhBhEOAgwB+BCB9HQ0DUQxAaiTDhvADZN9Z8WQjXfA9kugBlhjgX+SDBy4O8AGEtkx8HMg2pJJm8AOgMDkqgTAWADW8MYbcGT1MECqEOUkMRgEARKoJDDhJHIA5PJk4QJDFFh2EVwChSdKKJlrdkcdwmBQukXCERByEeAEiAzJYlJYlbsTWDMB8UolLMFpLGwFeAQAHIEThXAbxMUYorGgiqgSAJUHDUGUsySiBvExlIFgogRgDCAr6LSE59XwPcChA1qdhG8S6wVwFxAwgRxSiAFU7wAcI5UWoHBxtwPLDNBTGdLAUTANVLgVTd1ZVIjA1U4NA+E2pbol4hmANqQ1TbQd8xKY9U2VMNSwgNRJNTVU2RWDQWGS1I9wbUiFDtSnGEsCRpXwDUDUSKsD1FEZ+2PRnn4DrRtEXAIEKlMSxnExeF-V5UToLWRBeeQAqxMQMNLWQiaKlNGx0QAHjST5sQjBCxDwYyWgRxkgMPGQhwYKESTgQUEBThK0vuH5gG0tgC6wpU3sEcF3k-ajWRc0psCJoW0hgELSvkQ6n6hSgMtI1Az1ESitBg8T4zkUW8REBLBXwelSCBXkhpHfAQgaODMkAELU22IdTNyhLAc4aNKGTs00UH9l5sc9MxBq01NPlR7xKZM0oZkt4DmSAKBZPYgNSZSlxxMTNZBUgVkqECfAFaH0AuThgN5PXBvALJ0nSLMXZFkQlgIWSIAQUp71KAa6EunFTKsGyNDTuTAGUMQI0r5AnTWqQxHRB4gC7DIwD6WQGoBOIJKX0TdgQxIsA2gYxI6BTE3oHMTBgGhBvASMlygoyZFfBIXS+IYQmrxaQekEZBmQGskvAH8MgniA9E6QAMTGgagDT42gGkC2wkAZoCygegLQEOwBgagDvAtlMgEiA+AHoCAA)

Here is the full code so far :

```js
import { make, selectBase, unselectBase } from "./dml";

const TodoApp = function (target) {

  const blueblack = "rgb(40, 42, 54)"

  if (!target) {
    target = document.body;
  }
  
  const cType = function (type, content, attribs) {
    return (content, attribs) => make(type, attribs, content);
  };

  const div = cType("div");
  const h1 = cType("h1");
  const input = cType("input");
  const button = cType("button");
  
  let reflistTodos = null;
  let todos = [];

  const cssTodoApp = `
    width:75%;
    max-width:480px;
    min-width:360px;
    padding:10px;
    padding-bottom:5px;
    margin:0 auto;
    background:  white;
  `;

  const cssTodo = () => `
    padding:5px;
    display:flex;
    justify-content:space-around;
    margin-bottom:5px`;

  const cssEntryTodo = `
    margin-bottom: 10px;
    width:98%;
    padding:5px;
    border: 1px solid ${blueblack};
  `
  
  const cssStatus = `
    margin-top:10px;
    margin-bottom: 10px;
    color: ${blueblack};
    border: 1px solid ${blueblack};
    padding:5px;
    text-align:center;
  `;

  const cssBtn = `border:1px solid grey;margin:2px`;
  
  function createEntryTodo () {
    selectBase(div("", cssEntryTodo));
      let entry = input("", { 
        style: "width:99%; border:none", 
        placeholder: "input new todo and press Enter" 
      });
      entry.onkeypress = function (e) {
        if (e.which === 13) {
          addTodo(entry.value); 
          entry.value = "";
        }
      }
    unselectBase()
  }
  
  function createTodoItem(todo) {
  selectBase(reflistTodos)
    let divtodo = selectBase(div("", cssTodo()))
      let checktodo = input("", { type: "checkbox" });
      let inptodo = input("", { style: "flex:0.99", value: todo });
      let deltodo = input("", { type: "checkbox", style: "visibility:hidden" });
      divtodo.dataset.completed = "false"
      checktodo.onchange = () => checkTodo({divtodo, checktodo, inptodo});
      deltodo.onchange = () => deleteTodo(divtodo)
      divtodo.onmouseover = () => (deltodo.style.visibility = "visible");
      divtodo.onmouseout = () => (deltodo.style.visibility = "hidden");
    unselectBase();
   unselectBase();
   return divtodo
  }

  function createListTodos(todos = []) {
    reflistTodos = selectBase(div("", "padding:5px"))
    todos.map(addTodo);
    unselectBase()
  }

  function deleteTodo (todo) {
    todos = todos.filter(t => t != todo);
    todo.remove();
  }

  function addTodo(todo) {
    // calling createTodoItem update the view
    todos = [...todos, createTodoItem(todo)];
  }
  
  function checkTodo ({divtodo, checktodo, inptodo}) {
    let checked = checktodo.checked
    if (checked) {
      inptodo.style.color = 'red'
      inptodo.style.textDecoration = 'line-through';
      divtodo.dataset.completed = 'true';
    }
    else {
      inptodo.style.color = blueblack;
      inptodo.style.textDecoration = 'none';
      divtodo.dataset.completed = 'false';
    }
  }
  
  function createStatus () {
    function displayCompleted (isCompleted) {
      todos.forEach(todo => todo.dataset.completed == isCompleted 
        ? todo.style.display = "flex" : todo.style.display = "none");
    }

    button("active(s)", cssBtn).onclick = () => displayCompleted("false");
    button("completed", cssBtn).onclick = () => displayCompleted("true");
    button("all", cssBtn).onclick = 
      () => todos.forEach(todo => todo.style.display = "flex");
  }
  
  function initApp(todos) {
    target.style = cssTodoApp;
    let app = selectBase(target); 
      createEntryTodo();
      createListTodos(todos);
      selectBase(div("", cssStatus));
        createStatus();
      unselectBase();
    unselectBase();
    return app
  }

  return {
    init: initApp,
    addTodo: addTodo,
  };
};

export default TodoApp;
```