TodoList in Javascript  part 3/n
Tags: dml, javasript
Published: 2021-08-10 08:07:20

In this post we will begin the creation of the UI.
We don't need anything but our 3 functions to construct it.
We will not bother (for now) with css theming.

Here is the live site : [UITodo](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ALAOgIxYDQgGcBjAJwHtZZkBtABl1oF18AzCBAm0AOwEMxESEBgAWAFzBV8RMtzHw5yEAB4ADiXgACAmICeCALwAdEC1liAtAQgAveEiwYATBrAmAfEe6bNAFREQBJqBmmIiWgQA1vAIYrKaZCwJAK4kfmRQZACCqqqavLmaYLxQWgDuEGGaACIAsgAyXj4A8qn5hSEycrwQ3PBQwd5hWmaUZBXcAOaaUBAAbhiaAOpaAFbJOpqqvARBw5oA5NAH+UG8JJPJAnJNoWQpab4Z2YUsydxEYhCyXsoA9Op4J5uMpZnNglBjCACqoPP8wcDfoDtHpDCYzHIrLZ7I4XPA3CBgZoAMpiXi6ULvfqaMxpfZ9AAeYi25zEGHZvwBGkR3C8fO4IHwBBi8E+324nCEAA4kABmJwgAC+uB4-EEIDimRhGFWnGk5gUYiUEDAqjIJGZwCKvGiuG0Is+ACEdvA7e9hQgnS7NIqaeQwJoTBg-lBJCYANz8rqbJ6ZHJ5Aw095i+IACjJF3gYgAlJpgLdo8zSPBePIAOIAMU0ibeHy+ab0qldmi68jkdtLYhIEAARgRc-nvD5NBoxKlvKnW4aO2Iu73+9X3NboundE2Z3O+3ap3Js5Gh4r9wXZJswdWWxpS-BK6mTGCTHvjxLmSIsOfi1ebyZXw-9z5C4MqjJMyiYfuWFa3iAvRAWIv63LcsQjvALCwIEYixmQQSJtwySUEeQ4AUQuzxlkl7ngABrcPgVFAYRIAA7AArAApH+w7FAyFg0XRaBSrQqgMmxPiQNwXHQHRsooPxglUZoPa8EQkSTOQ7xQEgZLcEJLIwL0kwONJWnbDpUwWD2ZCzmQYBIIxAlacUFy9EgtD5MBZDhuR+H-ieRa7BhFGyfJinKWQqlIBoUCGSUsxTNZtmybMBCqLA5JICh8AyUOPjrDoEAsLoFg7mISCJQp8AWOcIXcBFsn2ZMvSmeZcRWTZDIefyXnPi2uwAHLwGUfmJpolGZdaDmiWZFlWZoWAGYGI3cSISAAJxSqxAUKUpKlVUgynwLokXGXpLVsW1Q5PpsREEKSpYbP5I21fVcSqPpcX3ecdXjY1lkvRlw6aAty2rVpgWbZVam7ftslGdFR22adCFZncmRYZo1CMJ5mh-AAVMEpoINcZL1t4WN-LctYpt4ZkMqmOj6PAA6yaO472p6YjOsKqZgpBJh2rTCDZtmtyKvBQ7k0TF4lvIAASJalCQqYMyNXMmH58Y83mfP2OR8hMuVqGTNwSBEIa8AkOGD2fZNSBOAZGKWNYdjW2gAnkYqj4Hu1SZ1uKEtXr1-XPJoCt5gFZDU8AmtGz1fUYW7WmIYaJAUom0HAdzgp5nNf0+JHgYgADS1Lcx6tJaVIgUHLSB5wAonIpuaH0ZRI-cFhbBouyaLX8hpNEugmD67t-YnugYLIveAh3g2pvTi55tPGBlAERAiNWiZYLKuYAGSb778gYdPchJxgcy8LAyT04esnug6bMugrQsiz4Ys+2B8D75qZCK39HqirfHMaChNCGF+yyUQmCD+54qa3hGj4COqJ7CXVjoPYciFl6ikiBAlO3AYLpztFaRs9g85oMUlTfucdQGI2gpgwCacTDqytLndECAGROQwIXdWJ8z6EIgeQkaYCYjUNTmIXBmcCFVxMMQyIpCM6MJAHMQIvZ2CVF0EgAIMAFBkOQT4P4fx4BzENAQeK8wP6j24GAEKwoyD6LSImYOBglycwEc8DAmtj4KJ7EovQ54TDyOsD2BAcElbGOcbIcxGx4AhRAkHXM9ig6lFgCY1xvjFGoS8Ymb80BSi8hAFozQ19Wbs3gArIS+Tf6FOKQ-Xkotkzi1fsA0iJZ0zPBRmjL+w4AGoR0MAyBYdUxwLpkgEwINgqhX8efcM2kYaxQZCYN2skP4EAwMUVQk5Lx72eLk0pXoOaCw9lUp+NSfZRXfhskOI0FnnmoOyDACy7Qf3RvM5pSyCirMlm-DZGNhb7K9hTXe8BrpjiCMHQc2coH9IQFHK6hMNi8OzsrQg0KgjyRIPQzWmhxEgBkLAc0SBF6VHgLMzZEob7lNzMOSpPgyaHPiK-Eil4mnIzaTnEld8MyTCzLmHRoR3qI2ULE+SwothkF6MyXo1oxXiEkCydlslmUFLvvC+hKIBldQIHSksA9cl-VfjLEopsKkwOHK-f2+8tVGrWe85GDTeAMswma-8FqAUbHvoarZf8ilEp-tsj1lTbhMxIN4EFw5eiVCrrS3I1rcCyWOc8KuMbMhRoPPuS+VT0pmgtDMZCvBcLMgwvGcMgpCA33FJKEAtAnIWBwFga2solQqhAHwAQShQywB1HqTFBpFBCBPmkAA+gK10-aXTXUUgYNGuB+3YtHQAQjwL22Q7dsTV3xgYsd6MAIEDmLtFgUJxBiGejosoR6F6ylHhcP4NtaC0D+JuyYPMAAKABJJwBgnBY1qKWEQGAn0Ts1lCTWPN+0VyhHbLi8AICTHEFXMysBqqCl7ZUU+EAiAgfMFYeBVdEOoSIJGeDLACCocxA7QhgGPGTB1mIQj9tsRV3XrQNa8GeyTChMMraUACoUBxXnCdTHwosY2iMqqHHsUkCruFXDPHdpQBfUMgTbHhNcYAMQsEYrQCT-bJi6H40FeTWKlMsBYDh0jkxdoKG06DVSCnROaEUygJajF1NMbGfAczgn2N6es85xzkxzS8CmC52TOmwZWarspoganjPWFgNY1zunOPWai9Y7zugYjYrKLF4LHnQsGYM-AeA3m8XyAy5ZrL-0AjyG8-4jaxWhOlaq4pbzXY-MEcCxZ2r8WxOTHkqmegvWGAYFoIxR8jHJhlCaxKGr7mOsji6zapwjFGK4Hm4t5b-Whvqb4xI6b4nSNcKhHVrh6m+BzC01tkTVdjuQ3g4VgLHbztlfxeplLYx0tna489tL6njZ1xIFCCjesIOGxbCbM2gHuyQcoyYf7SGDZiYg+IdTT0oTWK+EQU+APYd3FUI5r6YBkem1R+jmHQOJpNXU5AGAaI5EE+Q0T-WQOKdwHy4BtKDJGdU4SqXFRNJmETOJxYfFYACBhpB45s+v30TsG7tB8XqYnACWG7+kQJRxgsbDlYZXmQyhV1lAJTQuuGSaGdob5S5JHMQYIJr1XQz1eW5V9rzQKA9dO8N1KPXpuru-uKJQYkVvXsgCphr+3Vd5eG9D-r93JAzeAbEEyX39u-vpXtn7quLVHd6+Nz4C43W+u9YwGgNAiv+0Qd8HHv3ifdZ2611XN3hv1567TzNnPDAW+0Hz4XnHJA5Zq676bKuYQxUEAoNAbQ7AkuAe4GQMyveJcB-NJXTQBkwclAgBsHvcsLBR9mBsGvcV4MiQgAAJRX2vm3M-N8n+F5oY6gHoa6ShHfmKmhQ+I8f8xkwb-aMN711gb-MlGMQb3pRT34f7AFP4zR75e6nywAfpjRQgWwh6QG9oWzwHvSOTX5IEWz1DISQ7gBoGiQIAsBFQYH-4ToWyH7w64EWyb6UGp5IFkawEfTYFEGoFjQWCEHEEQGkHF6TCMG9AUEQ6sEfQ0EQ60ZL7wa9Dx5a5QhgY9iRCVANScRV7jCYbErMhp5p4G6aAWDh7Z42q579boB7gWDmI2CKFB7V6DDCjqF-4R6G46F656E9at6GEd6B7KEO69DWEkE+FaEOGG5OEGFt5GE44MgGAaY3YADUQGM+0RHhE6ugVM4R0+cscRfu0RTGkRJgymhmOOUAugFYzCUInOyU3OrOEyrOFgKEKhI44wDc4wUe2Omg2UXweUHGdccgVcJUxspkWYZQeWmkgG1gpQhR6UIGzCGu3Y3AkQVcbeDmgGWKVw3AoxYRTC6UFgwUDuamMwgQXOVc5RT8Ex1RDu5ATck+ZQjR6mrOxRuxpR+xvOLOzCxI2wxspEYMNxiUdxPO6UEyLRuU+UhUXRLxZUFUqkVxTxwJjofRAxHxex3xgkzRGwrRAJnaxB3RIJbG6mOUikp2IAZo1gRMVcsh8h9sqOkQ+0QqBJ4oXRZJFJT0sx9BYgz4dMUIAM00V6tkmg4QtBz+xuEyOxnxKUgwqEfQVRvO+Q9OAu8gQuIuP2vxSJ-x7RbYxB323cEyCBmgte4JiRYcD+mElQ1JNIEADI-Q4Yn+6egk7hKePhaeLuo+0Wps4YKRpsF+2+V+WprGmW02OROWLATp8+feoQAQ3gQ+qEAwHu4YHBqe9G4Y9J1+MZ42BAtIU0iZyU8gqYFgqmzEdomZ9Gw2kZiMvayUUwyQvA7KBgamAEpQFZuAZmeALAv2TgBZzIxZlwZZ8ABG1Ad4BKgoJgGivZpgKKIA6Mz88Q7KYg9QfmbZ7K6Y2YwAbIcQ9Q4wpsAAwqytmC4skH2F2KmHgE4HuLSKmAnIMJoK2aWeyv2LlOmDcmQEuf0SQGuRzDmAYAYGee2QQNQPAIwNmP6t4EWVOeeS5vAIqKOd4PUOmLWbgNwHOb+ZoKRFHiPIEPBeSLOQAPxiDUD-klntmMAOAvlYXTnwDbzwCoX2AvrhFvnsrbzcCoWGxiAgXUreDZpxAeJVSznAAJwGDNA9irC-wYDjn3rkBxAELNAsCzlQVcU8V8XjnNBlDcCCVkBNgWi6DdRqgEDTwHnmhHmUIJBJDQX5imCMUmAvkEKJCaDwDUAQCMDbxbbPgkDJCfDmgmDTovkQDbzpiWWMAGAWVWUYCsVQCznZiKgMXew0rQEQXXL0zABXmirPh+bGxmUViMU-lZjMzCKRVBWgWaAIamjmjCJiC1lzkmA6BTF3ogAmVrgRJJBiDuWUbUBiDfnNkNwGBsgIBTBhDhiHkQAnk5gcWIy-ZJ5R6fAVjsAKBqgeVWUbkaClzGyQQYA8wmC9q-hXlzDCoDC0AvkGATBa7UAkDfnADbXjC7VeVmyIRkAGCZBEBXCGgYCvzLr4iGiQTEDdiqCwQ5LhhkAuIkAoYYVWW4CfWyDYolAGCpgKz2LAAbUGAWAWDcDEXEUKxuy4CXXXVyCiCywYAwgKBQArkBCwapifyKgxCCpXn0ywWrUj4erBVeBZVA3Y3EjEgQWuj6UmDhIojdifARg9rBBbW9Ba4YDI0Ey3UWr3UEyQQimRAPi4ADUAA+0th1ZQ-NZAV1gt45ItBijougvgZZqlAgT1pAEAr1D4dA6MEAGAGgsA-68ClueWb1uAptIgACLVdtSy-QEAvAUIgNFIMygoJAGA2wGgcg3UGQ8AGAXhBOUJtIRSEAUt2YuA1hvgJoESacoFCs0VLtsw7t3AstJg0BhKIVvymsjNc5iE3ABgwAh4sFJFkEU+vFHN5VLVlVZlYgqFqYpdOYLi8C3lSA1dUlddFVTYZlRFm8rd3lsd3AHdLJOYUF2Y3d49f6BV0F+d4sg1Ck+VkF+lWVEA7FsF9FiEJA-1a6cdBgs64YV5sNw9BGyFiFaqJACFrdAsUaIANdv8xlDdA9SQUVV53FtdbIvc6l9MGAbV5GIg7gtAxdiMFt39fFf9GluA7tUDnwx8p858-9sdKG06amO9GAtI1cCkIgqYKdvV6Damh5nFam8AygraQDHV8AkRkR2YGFsAn5jAjALlvAzD7l6DWAe4V5RA2YZ94DzILm5dp9Yl-YpDiM9wYq+liEBG3A1AZA6Mv2GFBAzAFlqjBgW9JAQVRNWgLmWjLV1A3AjVn1QEluGlhNsAgqpjGw+DOYiNZAioWDODeDBDjF7FAjfVQjZdh4V54jWlZ1J5MjiMcjCjSjhjqjtZ1AGjWjOjVjejmjqYyjRjJjfttjFjujCQaT5j9jsdjjEjzI3gYqOYguhjxj-12T+DguzDe4sF+TjFRpYgxIN8WlBVn9YlOElAJlKVY4AaojrduEFto9v5TVpd5ddtklP9GAMDU9v2CDv9e0qDnVATiMWgYqEAgjCQmjzD4YvtvQRAZ8pQ6ln87l8jijhjijQVsF3AS9PsK9w1lQjN09wAldTIQ1a9bATTLT8sroGFTAY9mVDTqwwq3AzQ1iRd0VYl06pNqVAaoQ-T06OYld4YAEpd8z0zizGlyz8siE3V0jmzv28jVlsZx13lx1TjsLQwtz8QgIs4ug7FnFAAUsSM0N1B3aVf8RBZ07ALgIXhJXQoKBAFCNxr9iQys8yLFeZZs+dRZQ1bhl2fXWQO5b9tw4-YwOXUGPs4cx2fjdmMqxWbHVgC+SQC3XQnyCAC5Uq5vGa0OZazZSAHnHa8PdwJEQYJ-BM5-EgC626xS7094Dc1lVFIJUUr1b+SYGoNyCYJEbS3oLOVkSoFyECLMllWxozQay85S0UAYB+mEH7eMLufQPTLgDm1+qm2IFjGANmH8GANS0MPZR8NvZmyWzcvW0QLObWzzmQK0zBU25+tg9it2x27wH2I2365oM28O+pfY1lWmjNKO8zM22aGUAW7gNOw09ipMHO6G727mxu1u4C6FUU9wMfv5k8-pb+dOumMoPTNvJe2IO4IvVlYWFHr0Gez22O2INe6RepA+7RepB2yJBC7Bc24B20we78hxEBzu1+pB2Bx2+ObUK+2Bxm2Oy5t1FcD2PqkW83SB0h4VUgMBVlQh7wNTMh5XQYOh2AJhz87HTh327B-h4Rw02aCKlB368ACwgVSosBR2wJPOwGsVXOFMK-aZdVehUgM22W9mPGwJMmw0+OXx9u364J6VSJ43WJ+mC1WbfADNUUh-t7Y-Q+C2yaArLgJR9R4Ff+4G7feSJwufG+yh8zOTetZtRhV+X+254wB2wQOYuZHY++2lcoLQKheWve1gKhdWuW+W6mLKBYJYGu4e9oL52EE4Px0MEFyFz++F5F8oBgIxKhW+lFw4DoVjJp1gHF9mFjPRTO286vSNW1eNUp2laHR8Nq+pWa0YJ1zkuhZuduaVdeclDoI+lVOlKJdzJ1119J9w+pL1yVbpANzsGIMN6UAyGNyYKTDkpEdwx26UGZMmCG+vXOVzRALs5mynUd+cCOC1QEAQAfe9CjWILd3I7eydwcyWCQAnQIJEqmBsxM-HYnd9+d9FQYNy1BbLWyDCLAPS-vQTYVXHdvBD7kFD0k-9UFR24EE8A5SINUHoshh6o5wJ0-XICFMvDoKyCYGKvLbLcdhBqWOaM8gyJj8vPeiC496A9T7wPIpMHT77ULh+ozyTyICzyKgQKA+jwQLUFPqNTj-IrNQF3CzT9z3EL7eEiQFkOyqjbzaN2JSYJLx4gEjkmL1lQhtwI82R5m854vq59+9Vw09Yc0K9SWg57i5M9A5i9Bdi9pcyGkOs9K9s3teGJb7QC5WS4o+hWE6H7hRhec2c15zt1HpMGrXIGmxg5s9wHbVLf9UfaDxbbOnAzWShmpledCz08164FYvANXPonIPUGhAoPqlDoL2TxaDzMkLHZb2yOX-olX4aLXzoPX-LCYGEsKFrtkrgG351Q08kBpcAEBbLfLRgHotOJRt5TcjyjVcPSHYkPhlmAAJruDzay2QRxBY-N9vWbUh0EIt0DU3lY8dnG23WoSGgAAa5UB9l-gv9-TAj-EAhou-BUM9JJqvwOa-85Ar-XgO-x-5-8ABuAXPvQAFo3UooPfGvnXz6CD8NQn-KqDzBEC4BZ0sdBAajSQHV8JyqAhvhgKx7mJ9EPMFgLgNVYECIeMAZASQP75oDIIw-eAMkFhCCgcBeApGkrQe4Y1GBxAvvm2DIHsDKBPZXADQN4H0C-KGQEeK4iuokAh8s+CQQ+HA7ix-OLzEHgfWjq588AsgrvpX2EGkD0BJ-NBFgO4G0D8B-AwWkYKYEiCB+x-QXmoMFDSC6Btgm6vYJMEsCxBFiDgVwNwA8CPBytLwfiAr4ODTBbA-wa4KkHWC+BoQ1GmZHyIT0EAt1VICoOKJZoc0cnRLmJSiqwB3KIdQEMQJx4sBs0CSUzo3woEV9X6q-K-iPQ-538Py3-EAS-03wTMmhaCFoYwCgFyB-+nrRoX0LECv996QrEOm0P6EWB3WmdXAChmjqENDuwAOevAhbbNZkyf2KPBKDTLwBZQAVKNmIBk4Mg7QUbWhvpztBgNZkrdDPlPQIDbw0clAGmALF9bNciBvfKIdUNJ4ZhbayQeIQwKgCRDfB6A9gaP1b5-Cbu3nFlE+Xl5-kB0I6SIJU1TBDphQsdZEf8jJCKRAGCgYBu4Bmi0B3Kp8AnJBDqD1BzKt9LjGiPhFgtTYxxE8j2FsakpJalIjEZEDXSoiB0ltVTvXVE6hBUKsg1WiujkAa1H0AVHMFZzt49h2KXqd1O2yI5ZhSUBPWES6A7YkjxyxIe9KnVgrMiNoWI9qiIBVENBrC6otNiYBJFGj70D4SFumHcDajMR1DEQNmEJEWhII1cckT728CnD42doeEUKhFT1xMOaWTNNYHCgkgLR71TJoeXDC2iER9o9wGIHDDZg0RyRYdCyLzYrJammbaMbqOAYGj6gy8SIMaMoyFsoQiHXYLpDyTEp5UOyS0bBVVFZhjR2YFyhvydHCJTRDQMkeQGszRjR8dgIoIEGKBiBl42hPOJETOEZxMOkdDFJEUOHqxeARBQMlGzrFNMNRD9LMfaI7aSJCxhVLxs1SXENiJmwiDMWOxJH5jjR6fIthAA7ZupyklGPAC5krT8sQA14l0JaIKbc0i+ygeMRADoZzkrya47EWED5RgNgALY4ke2NNidiq43Y-EK9QpBiozQqgRke9R7CXhIgioJMVmIQmmcgQFZbeHuJXEuUh6oEtsaSIgkUi4RLInsVoEgA+dSwQ41uFGxdbqwJx5oEjCAFHFej8g846zIuIaBqiVxVzTMRRJ1Hrin2IgSIL2knylAPGOvBFFyP7pVVQgmzFzK-CerbBskR45mCHV6BoCpYvgBoE7WAo70O2FGIOtJKa5wtZBdSJPGZJDYaCfY1hLILOG7D0j5AU7bcWGzkm6Q1O79cykULLqRxgKsdEwM-T7pv1FJQ9dFjAwAYuNl4bjQ9vfR3HjCUm-TQTnTGcog8GGLiLME5M3DAQik6fDZuGF0Zp1PijzCMEZ1in4MU67TGfiXVX5lTWxyAZamJXIrj17RykkHg-znBgBTOQreRlgF6E9TikbIVxNYQUpKVY2roDZsFTdjBVaOG4i1E5Od6UILqng1GndUFHCJ6Yp3Mdo5Ocm9h8p6laOtBVXYY1cgWNHGuwACq-dLxT7C1CtNFRrTEhbITaQ9WT45hdpzMc+k9SE5lUFJZlGiqbR0mmw9JBkw2KbUxpVQrpeNaCrHSHr7S8pbkn7nDzukNMoZUAG8Z1PzGSTg6s5fpmiMTEDpzpTYaGbjQCo7SSpxfWQckN0Cl84WlvaMBQBDobtII3LTQI6HkE0gwYU4hcknhXKok9wNM+QSTMunkyLGldDtr2gxlYzFR2VAdKhTRGiyyZ102ckgGFkpCMZ4lW3ol2KArg2mzzWCjLLviqSDZcModjAAmnuSmac5celVPikUxEpV5FTt5O5HqcG4WUqKK8ivDTwVQyoOGcVPibBBZJoU8-uFMBmbMhWqkpmrgHRZ2cdW0FY2nuH+E-c4mgqFOdHL9m4BmWrLdlrpE5Zwygq9kmlsBCtkOc2QIMkgGDPqBQgeYQbcgKoGtnT0h2F0lWbBibnM0n6vdN6k2PdnNiEAzokwK6M7EnkMZMMqAFfhGrKDmQQBKPAIG7jaBy4uEAYJhwSDdzfwb4vFv6wJZdTiWiPUmdjXFmZzxm2jNHjOy2nCjRRMImYOtLZACj3pbMXQCKNlENMUJDLVZhJTECy0sAnvRCEWNjLKBNIhw+hi5j1l6cA8Q5TSXCyY6JduAfYFZLeM6kCtf5iMUumphBDxiXWIC11v3AjDqBWOF8LKq+DY7MwwFkEH8IKF+bFzvAIgVLubzHZkLvwTgHmFQo7YiBZQJCuFowpADsKWFq7ahVyTQCcLvA3CkQGgD4UJdfkIgRiMIuXDgLpFEigRSIBQCyLRFKARRWwvlgWSRFNoeRUOX4W8dVFuiyCIENYWb1igM5ZDvVO4UmgyqhVL6Qry+o-UoKGNBJE7QDZ291JRilcMVXUkaKaavQSII9O5rcLeAPMdPp9Ngr21Ha003jhoG8XgLAQEimyXjJzACKuY9C0hcYrvDzB-FDTaAPMAhbWLslIAe8JQv4UOL-WqQkOiUXJBQhegIpMqP4iVoS1BQNzACA0t6DwBqg8wTRmCDtrcBGlYIPpfMEn6JcCAGSjyZm2lHlJJl9MARcMUKWZK4WMyu+AUrmBF0BFFfEgKUVkWrKOYiqAcviQNKyAxMMQUsPMHyz-RxIi0RfJyW5KiE7l-+B+vsqjpzLnhWVVyXEG4AJLIIXyn4OUskXiwSA-yn5WbIz7aMdx51UFRBW0ZH1PqmsSpVk39qGgk+o01YccqJhQhzaFyqgYKEWSYrxQUISdhQHyk8xFkHBAwHxyLaLIkcfHU6YsgeXiA3W1SheDcs0ZHDyVcgmfMfjdItVW2P3C9NJ305crEyGwqHFsIIA7CMyWZHMlmUFiCh6miXCjOcEaRmzI5BgbhSqsvAsKoF-rdyqbV07lxYMpsTKauwNVIM9sU9NGYlzTR+YoAw7BAL4CTyqqbU6qpKS1RdX0p1VSKxGS5KOkoyXm4wYXCYCwDkqMM-cdwrYF0jQYAyJARQhMm2XHEq4aiLJOqXqhMriCsoFqISjjo5SDprknVtHQvGmJl4U5fRqYl7icDNGitQ-B2WxA1rmK+pOwM7SbXEY+pcS1jm0wMDcNgAb4tBeGBBD5YsFjo1uZjLvguzhObs3yc3SKiQ0aKRUV6dij6C2TUwqfARfgrkCwAwVtZHtXOX7UVlB117QdT+M3X5VY6b8gRclADHBKhW3C69TED4Ue9PJc3KdQDLE6Qyx1489MCkvMkCwkAn6g+d+utWsryClBKEDmsFagb8CzBXApBrtodtmlikCjLeoMAlQwVeq4Ul0p6UbKTpG5VxAtCpXUwLx6PbBMBGaasxUN3C6Ubqt9X5qkZRa1GYIKgAO8iYU7MehaulH9BluYxU6Tat+SSIoE7q3Fv0w34Csmxc5H7gYFUkmBH03Ue9AAFVfAuqjcgQn2zhASEYcCMA+tgBPMZpujKTdwrk2KblNlCgWDckqrqb0E0iJFabVcRgbBCJgeDXZtWFYEcCEG2Tm0otWSJ+gZq-jeLCETOqmQabcutfMbjZVAtSeIuoqGrlBaxA1qNFX7SErmRKqGNVyMRgMBA8-513QIOGH+5fdk67jOcuirpho1wNJgJwKHh5gla0hmarTs9QoCwAZYlBTlXWm264Bq5FG3+IlvUDmQUtTYZjaxpLSZb3GvVeuYpSnY3dH6ilImNVqCodb9J9QLrZ8B63JaCE2U1mENtkAa0AAasgxcyENlJKCwpoeowU3dR4jvE8NmI6ojqry08HLYshm0loUmNyfmYLJa4HNkgRzQKmTTWrphztT2q7VxqgA8awii9FFoNyCAm8YIcW4AM+wcrK8QtbsWfgYGBa9BqR8sYAAOlykuSkA4zHTTjt7B47lQQiQnT2GJ1SDf+sGJYDcqQDjpMgjoVCUgAwbKhsO52nTSD0GartztHIxZRsoFa1k-KLoMncFJAAZSN+-2wIIA2HYxARlGytptLoDEi7BdbAGIFABp20QRAxtWquzpl2toCN7K6ldgyp3q6blSch+gPkWRCJpND0inmRttraT7dyukOqrup1m7BpOuqXUIlZWEajdru03ZruoCDSLdPOl0MrMPmqzLdLXGCLHWfE7JBdDO1CdvEvXc6vd9u1PRSr10Z6hdwoRUOOU0DxzNRmbKPd7vjmKhvChe3qiXvt2Wrz4LVYKpvXt3md9UwmyhFLU0aDLsNhSnhrJPF1p8O9jSnDUXV2bh7v1i9X8oZpKVCJwl5mtTSYBwhUdTYPMX2mPPFm3SAOBASYJzNI5LCXe+E0zr9j524IocSeDHEDlVKOlCVpyo0iaQijmkXc-pJQtaQ0LO49ciWR0s6XjVb5V87pWyJ6RKzelfSBmf0jPn7zBltAw+cMghQLJEFoyrEOMlmVjKSrky-eSVdKtzLZltC8q8MGyXmzSRfwfqw6cjP3o7SzqaGjJZhteVJML1wEb5dXVaU8YmSmsDcrIBAGjpQa2YcGr7SMGmdz6PyoueP0rFlI74G8JGgnzRXUHcAJ48ScaOjpD9N92+yWkqt+Q7BIg2+s9nbR3n768maG9Zcfo1Cn7icspNUlG17QoQdSDIeNrgdUyea9whBwtcc3sWyNyDSyyg1CKKTusYVJgXfh2VIxMH4ELB1rshlZEcHwan1Hg2PSsIaQEqSQJKoe2ooI0aDFkH5SYCDp+HmS-MUtdhhCNg13AwAcI+EP0R9Soj8VRSXEYpjbwt6AhuPUUlENQBxDW03VlIYaCniNR+9eQ1vq005I46G4vzCfAIBOBqgaXBuH1Gypo5uA-RwY+2wOY7Aod4xyY9UDh3eR7KjlLRcVp67K4CAsleSg3IJz0sfE7iA3tmCP5shkk-iFzKn3Uhl0zjEKFnWdJuMkUo98xnYJqpKXPHDEgoMUU8b6MvGZNmKH4x8f4XZ7PgYRb4xMZ2D8UswAsuuMFoq1QBJaUeljnIE7LMAo9HhCsnnsRgLQi9H7c7e8bZWa7y9WJm5exTBP9GCTYQevfnszU4m0qeJgE2VohxEmXw4GCHKSfpPgnGVrJ5lfRUw4fQgCYQVOk8djx+V4A-Jz9AjRKpkAVwxWvEyKalMynFQb3c4EKblMMhH+73OtZ8GcL0Ao9C0bPZmqCrWFa+fQXwJVTK67qhkyURSOErZEGUF91HHyYpJ+ml0UmtHNU4Ay6Ua7KTBVYU+qYVPoiWSvzD08aew07B8Gi9awvV1gCkg6YmnEwDdktF+njdPuTuvRW8IeFNOwEqPb2nRO+mW6yZjwo6HFw9qMAsoKrsCflN+4BZImbFbNh1Ot48uCqys-6b9yiUd+Iwp2oWbbMGZrCu-FqjPW7P24az5oTYc1hRU3AlQ+ezM9fJzMeFFQjSjQxs3nIem+TvQAU-g3dNS6QTSyCvk8CLotnPTppsgNcN+6Fmuw0pymkWS6VLnZT25kUxIP3NgdDzjS-c4VMEnanwV0dX7KFojhZgttEoSXbd33p9r2AsAZnXgAv2iY8+U5CFLQERrJm1z8lCU7HWD4PaMaUwBAAWZDOc8PUh51Mj7OfPJmhKhF87bBfgDvo+2T6P4FgD4hbnFkUF9Ch6Y0DamYaF6XAALnYvvn1IzF3+A2ffOHn24yvD1IObxMg4mL959UyxfypsWnAtZTi3Je4vEW+LX5+iymcKGbxkzbAR4WpZ3MBmEavaaS0ufb2-n7el2wC5bsz6gXKAEFuYSDlsvkWnIiNNC1HvIvYXJLLiXC6Z2TMEX0yRF5i+ZFItS7yLlF3NtRdotgNgT4l5S6xe4DsWFLUFTQzxY8tGW+sAl5SzoFYkKxRL256K7xc-OyX5LEALi0lZitr0Y5Z587dpY0taWwLCNIgBAG+oIAlzPjOcmZbY1AWM+1l8C7OgQurmxT65lC4efOBtszZ7F+gE+n3LZ7qrCPD09Ve8shmLzip3tA1aasHcKrrVlc1Luqs1rqrstPPsmcfMnn-LHlka2e3Gu4BJralma5pbmt1WgqBzEgML2ROqmpdSJx7mukVBBtWeELRE6zwJXpMOO6kXANxzmlmgoei57tb+aj07WXdYF-a3gEQsDXkLgptS72nBv6AbzU9GG2BdmseX5rul+U0tavMY3IbR2u7S5i-nS0-rIvDcrGOzMemjr08B-scIsrf86Zx20ID2oAUsyAJIgWMj+OTOvmTzsrXoazfqq9C6ZwVIfEQUhu7rfzJdWMlVbAur89r0tPPm3XB7nb3rt3JG+KdRvZ7cziQMQIudOk43KAeNhiyKYJuHn9LQVI27Laxt3mrb6ppm38zFursH+HNw8lzRcw-yKGrVPmzoWKk-jgAXNUuh5S-IYBLDbnLbmLarZyWhWkdyW9OM-Jx2MAdMi9ErY8sABHUsvUYuVEAVyqQfRE+eYbR3PbUd3QIlZmnJm87JQKPKjmLskBS7x18u8cM84Z3K76dju2ncGkZ2gqKGr85tfatO9LL0dECZhfsD0By4omCRCDh5go5Bk4ATJAbz6seWCAXlwm+qYoxZB6c6F2e-haTyFJGl6FlHPhbQM+ybZglwK35bItT3QrX6cK3RcPPVW4tEFXrNve06ZX4lmVcwCaLF1tKWM1phg0KxMCkQ3asAJM3ddTMskIlc18wN5XjYjiZxeJQ3FG0vH2RogWi9ehM3oA-nkdBACoIOKqZzk0cgqULnicatvcND2jJ0qhJRbehq0JAagFBa8oYNs9Rl8FenzocoSSwkQRh4KicBhRWHIOdh-g+oDkWvKaARbFHq4e4OeHaPZAucGwctX8HI94h3FOXPkOtAlDqXSteofNXwVvDhhzo+mgiO2Hx9XU+dsMsqWFHMdeh-w8EdaBhHLDyxxw5YdSODAMjw2-I5jmKPZpWVW9O-O8ZWThaW07qAzVvQAJH6t6X8LBSimYt269s0unkZDr2H8pkTgZpQESsYVjGAh42RzCLYwKC6W6a830BCfmVnpAgt6QTCyffhZwB6P4EegVplBT05oSYBeivTXo4nA5RpfE8zaJPdA7G7BuaFwZxTUns-bKfFoLWZOGaoPCJW6cRqFOikxTq8bpqsWoLXjPip8VA7M1Irx6guAjAvQ7YUAilWz7hRQFo3XNQ60pY51BQ7b+7rCSOtq-+fMuTbAgkFPqhrygBk7l71Ak3fYf+dKg9wxSnZ086zAAu1d9hzDePV3v72TAHBarVp2mrWmikfwTGJMEfp5wx6o+o+bbpAAIAfnPMIl1jTJ38Kx6Hbb-cddwffnpWcdWAWuk97nU1MZAT8ddv5tkBQ7BGP49PsFDzlKqy96l7mtbRmN8G-YKJmH0WTxzI+xUWvZTbCYH1jW7lBixpuiCQhU+UFFVxgEbQuY+N2r1g8rn8yaNQXiMd2jpqeFzDXyeujypc3DC8A8XqsvhrgEvUvC4WsADtryu+B7auElTlzPyKzBoqCAGtHWnZP6b0w3xkrAoVs9Fv9Nx6PmqAPTKqVl7IRrMfoF67ICPppSfr6pyrUDdbTg3KlRrj3o0qRuTy0bk7bG7Pq3U1X-QJNw3Ab128swGbn1-Z02cnaA3YgINyG+LdxvswZb-Fh6vkZysryptGVy+RhZjtTaCbqxwhshFiAM3oO85x29vmQmu3Bbnt7rU+kuny7M71Pl9YIC6APgPycWC2jMNZg4pqlncb9l4BlAegzIFgBe7sYqh555cNSCYDLDVxTNQQ2WKbGFwGVoTypOLpVRMDL3IetOImH8F1CyAUWyuZQVmAMBKaKwFgKULMjjhXlfa0pmERmwIA5okAt7+9yODbSyBTO-tatK6H9rCP0+-tWUABuCphBTiIxpuMPK0rkQ9Jvge9B2PNDToUQN0K-AABIXmHdPj4qHIgCL0oooaWYe4bbIcHhumnYEe7bacG8jV9UOjfTvo5gTjY6BqnuFRYGACPlQTQApRokh1wqn0q8kaxB4cvNmlGeRkwGKnXl24OaM6WR5c-nA5LbIGj2nLWZiVVPSFGzvS3mUDvt5Q7iWw59NpOeEkztVz4avc-RfzgG8SxoKgKlFy2FjTssFmFvPXuy6ZE0TED2VDtwzQxKVKEVvLoV0zuT7iCsAFfcZBl7n779+ED1TKC8dJgQD4aGA9NhQPOdJHhB-FBQeh8mkMtfB8oxIeUPaH1TeEDBXg1i+bILDwx7qJMy0hrMkwE6ivwHDhPgKTiet7J6Ao4tou0Ck6bMq+1cv28Y726Mgj1ctAk+B92DDm1QVRjLHrRRt42B7ekVbIaD-wbdg3JJvmnPI+iCMrTrFJ3BjskV+FCnfv7oP9azXYEMkA0v+6DL2IDoW0ud5s-N0SV4SlzkCvIPk8PYHy-Khzq4W5-g0CliNO61edjsvGLqamJLw+RHb6KCNflkgeV5NACZXO00-dAAKIepelZ9S6dvGwX8bJIO+A+jvEPnHwwyTg7jKMOctlv7Q5gFHEoOP178D4V-EpbzSpuiVoOV+Q-8aov4lHFuR-BVMmZ3zsZBDrUlAOfhMLQC+RQds-ZYFvq8PNoBqkzII9X6rbgMisIrm38AcnzoF1RyxIIWQIgMbENoDlwPaOSDx96UPZS2KsdWH0E5zupJrwWYLWucdDcdzND2XnD5D-R+OzMf5XsdnulUAI-0wkRA4KhRzsGBiQ1ceoNXBXK+AG4aoTQBWEPzNBag2gBP-imUf980gSwKWNXEPzVxQglVbxBqEdU9kDgU1bH8ShG0JTeqZB+5mvXGbz61QcEQyoe0O9JAtfOP8H4V5x-40DfUtbzh3-LBZgAA0kk9pcx0oVZdXf8V7x9IrC-xf1B+X7Q03xNAOMBspZBHFjjNA9QR9LUEfR6-MNRyRdfYUBn9HZOf1WZXeRBhmYk5XDCF931LJlv8wfTeHl9tfCqxjp8fI-0T8EfFPyMdL-GHk2YWsQB0Zcs-HHxz8iYVOmCo43beCGd1KaCg5dQGGz2gCFmYZ3vo8tYVkXhTYLQAjA3xFzHIZ2Xe0RDsQFUBhVccFB1ntUcXOOldZPOUvyhADgSImHdmGRgFL8TAA4DdcaFdL0y9n-Cv2lF3-P0C-9PRfsFACDtUbSKo1-CmA39TyEwO3hW0ZAKh9vzVHmVAPXIJzDIW9Ta04oqDPQwF02QAdE7AXJB+lLoFOYjVZVDTCZmCD54A3U11Y-C6kKUBdBM1p0nlCZEzUGSZ5QPobFe3Wq0XENwMbtNwPcE+o59EAC2EZURVVZUr9UuhMAcVL4DxUKmDkVdBR7E8H38CqMOxpwHhWy0txxgE9nZRbLYoMlhNwYF1wARIJyEGCSOfSHoA0sJAE+oRIIIXhxJghnlwB45ayHgs8mUeAMwwiegABoDMLTA2Dj4VoNPgW6TYLygDAFADzUZnBjUcN8jbsENBl7FHFpw9nOOgjUQAYkgUJMac4FKMuiHIIsBbgh4RgNiCWaDjJxCZyxco3KTeDQss6aWik1ZQQth91DdamF+5S6LAFUxBdVxDq16VAWEAFDgsIhODxNBqVWEFoe1gyl0nVYUzUj+IVkRDoQqIMpM+OeEIMAoQ5EOJDuTSjDRCVg1xCRwTAStFsMKmSkJEAoQPEWLhSglEMZDeQq9H5CmqAjE+pxyTmVUhdIFcif45ALU0PEkVcI3LVCNRZAWgSuTEIqZegurS5NKCDUNWC8oLUPLUbdN5EggylR+nKCzlNMkuVcMDIhMwNABQFjoMnZGWVD-MI0P8x-A3sFj0hDb1FM5PfBd2NDFhKKk+o0sJ2k+oAgSDG8oKmTgQdV5ALoMppow1QFjD4AeMPADKAgXx19Qw59h6AflZvXlgQw8YFjo8wnXxEgiwjDn1Qpgkjgfpww+HGk1ljHMNTBiwmsMgwywxfXzClkXoFbCLOSsIZBqw3YItA7g5gNdD2UTNT+ASwkjmmEOwj3mHCiQ0rVRDSOUrmbCRAScLSw+w3oNZU6VBcPHDOIJcOk5DgumXdD2UVlUpU+OTEJWD1w7kKI0dfXoIWhvPSXxZUbwm5THCewycNLCPqM2nLUYQzXSvDouJcJXDCw88M-DXEE8IXCCwsoEiIzww8NnC0hTcJ19t+A8JnDQgoUNPCPw-zENNgqRMOTD4wv0JcRy4MoHjDwfVfVVkZwvJipcBrbv2aBuARdDsB2KedCoj61OwCDdERexmrkFNEQVW0+tdbSig0w8UFJNt4IiPblOrRFwgA5tZUFYj2IraSS1OI1LRggeIkjyr08TBABVNaOfiK-VyZD51u5hI0SIW0GgNiLQgOI4SlS1lTX7CB5q9XSUW1a5OtHRZSgNgD6AJpPY1TBxI-SMkjetQyPXAKeO5x5hgAccgoDeImz13U0YTmyPYgybc3JlbJfsHnJ0LZeGulwol7Urlq5QXTFd22SWVODfI+SOdsNTZSOz0vZexkRpq5ZoAkiH5KSLcjTPGADkiMNeclUigNdSKEjCXESM+N5tfKMKjBaVyP61ihYCHKj2TbcyUj5YFSM3gBIieVqjUIbSKajnIoqNaj1tYyM6iMo+KIsiBWZUGsjkILpXsjlKRyMW0CosaJai1tSqkfojnLyJ8istRGG7VAo-tR6o8TMKODoIoyjCeMLoo5jijuAcyIaBEo9JnsYUo6wjSiKop4x6iFrYKxgB22OOEQh50WDEoi61DLQX4F0BiPyxwY+iIy1QjPI2C9sqCGOIwg3TqTojqIyvgLcwvLfhhjsQYimp9IYixiBiWNY9khjt4ImJBiCYouXwg00PKjzBQVO0BQkXXWg1kA7QO1Sqgx-OLVdU7QB2jtAwFN0B5ZZUE0HbI7QDTHCheYdSW5j96GhHQgk8O0FUBcAM9R4xACMAixdsqeIkZiIQeYBFjP9EWO-0NgcWL8xtwNVypg7QFmGENhQO0H6UKxV5RFinoXWP6BTY18EVBC0aURLQlAWjykg60VUCbQhANtELRCoY0FyoM0PNFeB-QQ4GDAP4bUF1ADgfCAAhI4woETAQ4lZBhB3YeONUAWuR5gVZ3gdWG7Jkgb2m-J+Qf2MshVAUahIBkAUHiLRWYN2KEBaPeiC9iG0NUCUBbqXYCLiOiI0CEBaZM5B8B-9baHqwBHY8HuxAiJbAWwGAd2GdihQYtBPAlAYRywAloJUGYAG4n2MrjzYxAEVAgAA)

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

const TodoApp = function (target) {
  const createGF = function (type, content, attribs) {
    return (content, attribs) => make(type, attribs, content);
  };

  const div = createGF("div");
  const h1 = createGF("h1");
  const input = createGF("input");
  
  let reflistTodos = null;

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

  const cssTodo = `
    background:red;
    padding:5px;
    display:flex;
    justify-content:space-around;
    margin-bottom:5px`;

  const cssNewTodo =  `
    margin-bottom: 10px; 
    width:98%;
    background:grey;
    padding:5px;
  `;
  
  const cssStatus = `
    margin-top:10px;
    margin-bottom:10px;
    width:98%;
    background:grey;
    padding:5px;`;

  const cssHeader = `
    text-align:center;
    margin-bottom:20px;
    font-size:24px`;

  let todos = [];

  /* implementation */
  function box(style) {
    return selectBase(div("", style))
  }
  
  function createHeader() {
    div("Todo App", {style:cssHeader});
  }

  function createNewTodo () {
    box({style:cssNewTodo});
    let entry = input("", { 
      style: "width:99%", placeholder: "Enter new todo - press Enter key" });
    entry.onkeypress =  (e) => {(e.which == 13) && createTodo(entry.value)};
    unselectBase()
  }
  
  function createTodo(todo) {
    selectBase(reflistTodos)
    let divtodo = box(
      {style:cssTodo});
    let checktodo = input("", { type: "checkbox" });
    let inptodo = input("", { style: "flex:0.99", value: todo });
    let deltodo = input("", { type: "checkbox", style: "visibility:hidden" });
    //events
    divtodo.onmouseover = () => (deltodo.style.visibility = "visible");
    divtodo.onmouseout = () => (deltodo.style.visibility = "hidden");
    unselectBase();
   unselectBase();
  }

  function createTodosArea(todos = []) {
    reflistTodos = box({style:"background:blue; padding:5px"})
    todos.map(createTodo);
    unselectBase()
  }

  function addTodo(todo) {
    todos = [...todos, todo];
    todos.map(createTodo);

  }

  function createStatus () {
     box({style:cssStatus});
     div("status bar", {style : "color:white"});
    unselectBase()    
  }
  
  function createAppArea(todos) {
    selectBase(target) // target <=> base point in main html page
      selectBase(div("", { style: cssAppArea }));
        createHeader();
        createNewTodo();
        createTodosArea(todos);
        createStatus()
      unselectBase();
    unselectBase()
  }

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

export default TodoApp;
```

Here is how to use it :

```js
import TodoApp from './todoapp.js';

const todoapp = TodoApp(app);
todoapp.init(["un", "deux"])
```
The html part :

```html
<pre style="font-size:1.2rem">
  This is the skeleton of our TodoApp app made with DML
  Our app is contained in the following div. We just pass the 'id' as argument
  to our TodoApp function
</pre>
<div id="app"></div>

<pre style="font-size:1.2rem">
 Stay tuned for the next part...
</pre>
```