Using arrows to move a DOM element
Tags: dml, javascript
Published: 2021-09-08 20:02:46

I needed a simple way to move a DIV, but didn't want to use any external animation library.

You can test it here [AnimDiv](https://flems.io/#0=N4IgtglgJlA2CmIBcBWAzAOgGwoDQgGMB7AOwGciFlDLYBDABzPihHzIICdbkBtABlz8AuvgBmEBGT6gSdMIiQgMACwAuYWGxok18XdQA86zQAJ6JAOYBeADogo8ewD5bJU6ePw6UV+4+eCmp0pgQqdJzManYgAK5qYgC0ABz2pgD0fgGeahBqCM65+fCG6UUFbtmGQSFyCjEAbhDwAO4MRJxqacS6+tH2LdBqKtaOTQTwiYNQw7imECR5EHSwiRwr8NYAjBj8aZmVHoelKt6+xwBGRFAAnlkBhhycEAxq90f+HqVPL2-H6Vdbn4ThpYH5tMwEARcqRpEoAJxIAAsIAAvrhZPJFMoAFbSfA9PQGJTpdLqNRMJCk+BiBh0SzwDCOdIAEQAsgAZVmcgD6KiICjpDPSsAgF25HMSkBIGDxbgaEVMPIudGYuGVqvgAGVggQANbWXiiZWwIj66wAQi26tInHgZAgAC94ABRBAKXRkQ3CADcPTIalMZAaljtYhi5IYVPSLVjGBamA6lnSACZ+On0sHLPZcAAFACSKesKYAVGy6MMMAX1QGbggYrWEDnlZQoDExKQ1FN4BBLOokKYrrAoD7m3kVhACO3O2s1HX4APx6KCKO2DyxF77B3dGsnQvTM2Lr29AAPfogbddh3OgdbND8ACkq-VFxs9hV+tDRFiJCgiWIpqcAOh6hiwMQfnqX4-n+AEdAOdojiBCFFu+dCftw0H-pQcGmAAxGIKD8M+yqWDc4FoZBGG-lhgEDvhYgriBoH6OR6HftRsFAXhWDwigxGvhcsCxJsqFsZhnEDoJwn8ZYHR0FYIkgBBUEcdhXH4QQREgQ6sANPAnCsZR7EwWpA46XpnAyTc8CwKaLSGSpJm0XhYiuWI8DwDJLQqHkinKVRTk4d5vkyYJFEOQFNE4WF+oyWonDyZuSkUY5UVcZwlgqgAFIIuVCLsKAAJRefFiURcZaXwZldBZSmKB4HVDX1flRXEQhMQSaYCH8UJimdVJnnNnIDRkfYnXDTcxHBXoHWmaY02DWu1m2UQ9ljXNy12cREy9AZ9inl2E6WCQA47XolnNggYjngdiRHSd5g0mobW9uoMS3fd8Gvc9zZqEQDCNPpuQECsd2isdA5-Qw-FEGof1gIDnSTqDn2DrD8PEZAMD1vYFnAyj4MPVjcCLeqYgICexM4w4EBkAw9A3AO5PwCePqmPdiS+WAZCnX0+k9bEe0XpI52SUJnC1QwJ7Fc2ZDhFAq3gUQJ5rPLq0DmgUumJrJ6mEiWuhnQk2Hr2cs+Ir77K6r5stAOWBa-buvJAbCXG2uZBgCssBamra1KVbZsK7bpgplroe6zrpiG276pqGePs2+9LNXr7A4oA7Wv67rXXVTlQj5-wGBIkiMtrkelgACrx77SdntbQcDs7ut3lr6fZxl2V5blRclzDnCOELVz9-pkM+e4FCilAQaSBZxEkEQQ8D0rw9cfwUv8b2ABKPgQLESWL-piQJVAu886YWxt21O978vA9H9fZ9N5jCwQNvJ835bK-3+-Z+X82dIwAWG+EAACT5WAHOHYiFIfBgOAaAoBt5W5ay2Eg1mJtLC5hgUAmI8DwHnzXmg92ntbLlgygsGInsyEPUgc2ShlhyH2DoQsNO69aERHoSQDkT0KHsIWIkK6agWGEPVEwkgm9vo8KoUfb6QiN6WFIRwrh11JEcP4U9W8BC5EKIWOIvs55RHSL0Ro1ha4FgJyDjEbsFw9R5ESFcFWgd1bzHIPAQMbdTDuMjokcOOdO4F3ylgXuUoiCOjsQHVOziogeNQdrLW3itYdxql3AJvd7H1ycQsKJ7jPFxJ8YkvOXdsC90PMrawJEFoAGoWwryqY4lo6obj2LKQfTgtTfZVNfBU+w9FGJl2uDcAAYhTGIJ86YMyZhTNmzMVbkycdwFoph54tAStDUwOI965DEDcLCvRdBmTpBMOxriWgeRIMRB0jghks3bBTVWzwSB6gHIXPizYAKxDACQK5J4bks0SF+YORFTCjPpkbCZLM2amGmYkWZwd5mLNWis4i0yRm0xBYzSFkzmzTK1Ac+AABBAKKKxmgoxeCtZGyIBbJ2USQRQZcV3QCkiimOK0LwAAELHNOUStFYLWbkoDJS7ZhI+j7NZQy4y5zgZ6lGiAogDoYQPSsTYq8UrJqmHaPKiApAzKqrZlDJ5JiXxqHIHOam0xhgaM0aYU4MiQ5ZwhcC8ZzjRQkEmNMtmHMuZnzOvzflmyhWdhFaEPmllTCiMboa9csBGmlPsBqpY2rIUQBPCwH0uDLB23XmkupQjom60dtPXS-MWnf1PhG1m-kKqdXom5MQPoWmjwWEGSg0Ao6ux9AItOj4fT6o8d20q5AOycDAJDBK5B6B6CyokQiD45jTsfKXDtrilQWEsLEekmwiL+kDI4awggWLWjEAZFMS7AyrvXQyL0vB7COBzPYfQd6LycHsL6MQP5oRavcAyNQHJ5Jro3VlNQhVgBqAwH9Dkq19IAGFNSAcKhgMgsQLgBgltaFMxUh1ZQQIGeAzjzB-ovfaQqlLANgaIBBk5nAYPMDg9Yaw56N1kF4PAYQhU7RqEFu4HkDGGTWHgKiN9JAP2kFMByQDuB4C4BIMB9jnHTAEtdhgWmCmjZwYAPxqF4NxgjG7hBIC2HR7TVhCMADITPwDUwuIsZSePwDMyQNTJ01ACffQq9m8QF4LCgHB4A2HTCbAAPIXBxPAaEGBv25m4H9OcDB4ABbEHBqT1ggshbC9+gLLQSCRf+kDG4AA5LEZAsrwAwx0LDy6ICmCIGIRZwGtyuc-fYOjMX4DVf87wCAwgzPrRNZwWI0IOj2AtHRiAZnAMdeEHxibGAjy-jg4VVELmhNuZBrZcTGANsleACRwMmTghCdazVgZDXSBsdcXJtQWUNsYBK0t4TXGIBgHaJ0cTW37AoaAU16wLW2tqDG9EXgahWOnsWd9jACArDDB9JhyrTagO+eXQZZOCVoQDMkPoLE43OvwbtCCiYWV7AYEfTyewxUSMNCIK2-gdHrCDF-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-rbQZMMLTOIewnnmQLgA4Y7XoT-rWb-tXqBnbtGllJwMrgtrgGvjIRaNMXKd4JwPfgoN+JduKeyVEEnY-pdkQHlVHWZsHQwPTKBeHa7otg6bTBXN+GECyPAOMIHktb7hoboFXSoAGBEOgU2vXi0LXsNL2BWB0J-iFZXf1ioLmE6WoGQDYT3XQE0JYP3bvtzMVcPWEGPQsBPTYWRbTGyJ5ggDXXXe-pqTPX3ZaRgHvPpHigyFbl5jLQlvYNvUeE2CdRvQ6TyC-CaVtkER9aYF9VlQuFmSJVEAFq8J+jyUZfGWMWGYKaoVGeVoGDcfCRKV6BAJ0V-fwMNlNr0Rpm8f0b0R5W8SqcIGXSJVAAlJYK3iXgIZaLYcIYskvlXsrt7RIVHXurgOPkRCRp6dSVzXaGAEQHpC6HpLoByLTESOlftC3W3Z0DmAQDfl-aBjw3w66IIz+iI-oGI+AN+MwEHCQNIxhnZW4cAJsPALXl3Tdso5lXRoyMEBlK4mNoyNVhuK4gAJrOB1S16l5-Qj2SNUGWNgYbW4FI5kYj32hD4C6ih9AAAad04hVjLdITIgYTzQugTj-CpBYdfGiTkT0TXojIcpSTagKTlRjDARuAje-OMCAjfQwjAYajEs4jwTv4OYsQuAVoN+ZTVuFTyj1TojdTIAnjYQvDekOYKgLTY57TwdMAlTQjqjrqvTvDZ9sQDATTozbTueTenTVTMz6j8zzAgzTgbAIzrTpTaz-OgIihTBAugsFAQsezpOJtYesQVFP+4hV+DhVoxzvOTeCj-DXTWzvT-TpwjTbAzTRz4zo+ouijUzKjNTszHjLdtzBzKzHzee4LezUL3TtTpeOz8AizyzoLJzVu3zSjmzML2zmjELQziL+Lnzpz-SRB84lzkQHQIyNIdAFJ6BZF8xwGRAdje+doyjNdYgbLsAl2N+9TAzijX2GTLWuBMBsTwTTGCTeTWT4dYx8rYQ8TwgmTyTawaTcr2ragUTqrGTyrOrruzDJArDUxppBxr17Bk+tFiUQ6CM+0Y6ZAE68AaA3m9gFSagM1J4cwPr8A-rcwthgBeBdDQGGprFEzUA6LfzcLXj1j6BuABASLsb8bpLcz5L2j0j6bPkj5DpkIlBbKsGnNPpGozAOoFEyxERlb1V9b1b+oqRVhKgMN6YY2GwL29g7IHI-mj1OEjbuoeoLp+kMKeGFwcxpbNGhUleQ74URoN+9bE+FZ61NBY1YL365DugHe+Y3mQG91ADFwPmxb0I07n59zbm3657B9rF9bZFvb36WouYt7Ul87zbEOrbD7nIUQz78FPbP7riz7pO7pgGzg77eoLbwwhUXb4uIALoA78DLZFSwbOYpgTbeo6q49+kg4Nkq0QK9oEACE6HuY0uixmGPoEHUHbbz0hUy7VH7QLVWJd7KoVbw71H37HIYQeof70Q+6MQcVZADoVgpgP4p7agN7s7J1b17gj7QHL7hUw2f2JmsHpevb-b3AXEEH08zoYatMnsagYQpgiQyHqHbAuHF+wEgFfraHdA10I8yHcnBJCnS7rH2o7Hn7wwZFGr+ovHpV0B1gTnf71532mu9tUlvb3Hf7lr1VQxDpYnRJZ7Zb2wfxiQ1oMB9gCXFp57IHTRu2e6Uhhgz0EAmRZJWUVHnnKghgCFqnAHfb+kmnA42nourwm+TajHkn0uFwdodAeoqI9HbnGHe+-0F1-5e6ZmQXCnw2JutXIA6nDXg7g3w7OnuGkAHsFYRnJnPr95aHaVlnpn4FcwdnosjnnIT7LnT5cmFXlhXnDp3HPI88jgRxt9K16t2YI1G1v2EpmwBek672dIOjJ14X5V3NszAAEhXJyIvvxlsWRQdEfk9+W+4GC79-ABXMnAjxewDa4ninDM8JO3oKAx-RmYNaux9+u3QZsMAEwY1UAeOZocnuT5tSbpA9yW4RgKEeEfsabYceA1NhMXSYNfOFudJqBlELj0NQT4Hpa+KUkZ8fAB-mMvqSnqThzzsVzy-ra1tiRt2XCRk0r3B0gNLiRtZjKJV994mQk2dRdWMR0VsFq9b8VGLw61ENlrFp0KBZJuKYtmsYtmof-Tz6ED13oLj69TGaMAS-nsH0XqLiXpGUEeL3j2KPEHOVftJplbboXfoFAI7pIN5mnXF3ZdH2HxVhHzS1bqj9u-wcx1JTIX3m92u5tQ5iPgsOD5DxyD-kgCPnbtn7n87tJjfibon5Lyn0VlfrF2RT37+De-DrUfd49xe3SfW3R255n-bjn07t5pGSMaBxaGC2c1w7Sfv3S1Pxv3n8CUaWRTyKfzPw3Vxm52pvW2v735v3BkgMf7cM-3NiwQH2Hp7MYa9SCI39YMqPJypezALvluATAO1mr04C7EIimvHnqoVA6k9hq1BJvtkVtwwAsooAyTGyQH5y8viL3Bnj41Gp89cBUmXAGGWepzlpMQ+J3lgPz5u55ewRRgTgOL54D0QxZUsuWSASCpVCwBX3tmXiBu8iexlUDK330gQ8oex1KOjAFEFOVJ+WfB3JvzEFCENCThdAkp0+41ZlOs3BDppzwyn8++UAM+GjkiCBhMECUIIDhzljfhhwuHKrJoOlx5d5gLRCUgZA6KdYe0X-M-s7goFslOAgglmsXh3Y3A92eNZHpH2bxqAq+u7fduAJEzdd8yOGJLGoFrySFXBfHHtIYDOR+ssimwf-oHnfAHka+5VMiiQGQwtUGaFvY6jAwC5EQSARXH0PeQKGXl7AAAIZbJpp7kl2W7A6RUBbBWqcmIoaXkGE5hrSiQ9wCoFxoJUkKvXYoSABmETDMqUw61GgGGE+lRh9gFQGgBWEY0w8KgJEJsPcDbClhSIfYWsJUAoAThYaBYWMJQCXDOWWAW4WcJUBYAnhAw26jJzuEACdhB5VYb1VeH3C40nwvSp7AZBukAuZwx7O9zyrA8fS7BeXJwVtwitOCANAHsCL+ErUAeYIwPuXhL75czhdAHMJayAwIj4SqgBfF716p2gsRiwv8vsIx7H55sZFE+A0HpGl52ReIsPNAAgAciEq0IkETTAaCXCKRiyelggCZCooGYMQBYC6kmCCQzQFeNgFqW3TOoFg8AFkPyKmLsil8JABUeyN1H8jocADdkbcPE43tzRpJNYRcn5EWjEuEnWDHyIFF5U1hijTgAzAdHZdYM5o2QXGjlQJoHoY+CsPyM8jzQhgKgA1HyhtRGJv6JiNQpaOdHWi3RZFAnn9EOJzDWKZw9MaQB5FuZOAuYzMWAzoZBCaGXoIseJiCGMNZcTBcUbLn3x9Aq+koxkPGgVQxAQxuQSlt7WG6apSAMQQSpQBT45gUiAiawH1WqopEoY440KunxSKxi3otYh1uahGAlcDqI4mbB0AHhvxT432OillAgCphCo-rDcQOjIDOt3obrD1lOhnRzoZ0UnZXHD2TgRBvAhIjPGcIOgviSRbAePqxTr4j48c8AfkMOH0g-4b8ynA8RgBoHfZryLNMSvJCgA8UEA6PM8F+LfFPFnxPXJyvWJx5J8peY-DEPMh5j2AtgOYGnmkGzROgEEaML+PYjZgeiYUA4HyDAH0BsxpQiQBcbSjQBtxACN+Yfvj1H4Hjc6I+UgGEAMpTEMApAFwoswkkKxN4hHZ0BJLZZ-RrwXvW3B5lUk29aRa9eCmUWACuCYCjQiyi0NK7ACaMqAtakz1+y149cDmQRPnlNCupMeWUAIoIOzK9DYAxYzYHpIMkFcmhnkVoYVBzI6SWCyQtYfQDSqwB0J1gM4RFJsgrDpMFIiye93QE4Fu+ygvwfu2ZGI87q6U9fiYMSwj4LmoiXRG9HsA8S2ARUh1qIiUTngKpS+NMaaH1AHRopdMeSHBnFHyjNR2ojkWn3gwXMVxM4jKoX0D4LBASBJR0dFLOHicJhZQn0vxOT6E8hJsXRgUAwVRCUpMY2IqY6JYA61rk6fEaWHh856h7E6Euksp2OpKc-aoA+wPmDyy5gAAqhXFmlL4-GsWDqKcH1D2IU8cUqKQISXzMCviMU4UXdMenPSfx15N6X1E+knTlYKeIIlVIZYlSJE5U2apVJbGD0qEtUmIPVP-EC4YZYEA6ZvRIDjSUJ79Oonf0WStAlQY0+IGTMgKohpBHIMmQSm8DNicysMWGBtXUkqS9w1gX2jQ2iCu0yAMuO-A-hTrc97s7+Z3gy04kxAUw4cHMDLKlFyyxeXAWgGDx7B6ITxaIZcpHSZnmlKC7MqLFzNiyrTgGsIfmba3hyQD-oPJAtvTwtmA9ARuAA2Y6ONmcyWsCGR0WtM-Qd4AAaisGEhWykBs-AsvUL15GThZkkp2bLkq4mSsiOvb7AWxjnrSfiDvZOFBkDS6AJM3NOUrEAVLzZP6lOfdinP+jrTvZFpXadLW+RcE-QEtMgDTJJl0zk4wAeyv1ktLwU4ClMzYDiCdKjsJYwANzhL3x5IA2Sv0keWKDHnohaZagSeRcGnmmlmgw4AAOqRikARoY5myh66PIAi6IaqtHN+n+1bImVFOW5yHIui5aP4mbJqHnlitdyh5b7P9hTlHzL5AhcHDxRsh3zc5EgGyFADXkzAVAQ+Z+bTA-mRSMZg0icRz2Xn-zIx9A-3inNnnWAbpIAWeRMO5rjTv5jIX+avLgX28QFsuWeRAsjFDTsFMCgBcMF4D28EFoC1fsYNf7RzZ5N+LLiW1gyD8c8287wHqDMxhTT5oCohUgsYXNyCCQi8aWApsjJzQFv0vhYQuEU3zmAki2XG5xkV74XxugfkoopUWzzUQ36UwDQNfYXZEFcimgaiCiT6L4coi+IFBKDnMEiGo04RVdRuroTRCXU11D1LC4kZLpMEmhjAVcVaj7RpJGYvQvP5cEEZwM7EWgtVGQyWsMQGstdX0g75fBBUgvj5TICWA2UysaKZNwuoGQ7RHI-0X02ThgxewD0H1JZDbGfomYyaVNOmkzQVpwkNsXNO4gLTmRi0W4w+MfDLSmAn4lacSHNBrRuR607SriK7XHgtop40cJdNdC7RPhe0M6HtG62dajpEo14+dLOmM73ifQK4iBIRDRnFQFp+EsOvCJ7JkBrRc08eI6JvbVjKxGhFUUahNTzh4Mok5cAaE1za5EKqLRRhdRkKHFI6LCpLjRjQBtNSGVfMOjfki4qAeOL7K-IwjSUZLDqfEyfmQD1DwqDSAMmhgZGyV8SL5foh+eOQ+iExeYu0VcFUnJgxoTw4FbZSHF2UIrRZc8vCYJK9qRk-MDhU5QEvOVBhLlsGc1jcpABON7Qh4Y1EwSeU81JwryrXDrllxEtvlkSfbBMDazHYee9mM3LgF5VH5BVDyhACKrybmg3lkqz5XpBt6yr5I8qo7AcTMwQAVV-yp0YCuBX0hQV5rCFVCqOWwr0lcMk6t7W87yQFQZAFMCyEiFUyFkPIEGCQB9V+rVicpVUI3ODXerVQfqtucGT6wDZvhWVUDOEDIAZYssUA3LKXiaAOhBI+zQqO41Ax5qxQ9YVyR5VgKlqC1SAPeRn2rUIANMKckNT6vCWLCW1qoJWaQWjkdqvQKC3tV2pUXQhvkPa2NbLm-RZzegZ4UvCmCgCV5o57QNelelEDRy6ke6HRcuhXEGL8azasdfGEjGmLN1kYnzKOtDWqh91gC77BusDCcTt1mZXdWetlycTD1N6rWeoBPUPqfV1uCRM5jSocJMEwwaWc2rjgzZ4A-6mSmbhQxEAABwGHtSBqg0wbUQ8dCIEBtAXDqwmCdeSdCAKQqKVxKiziQtiiDCNXUFcDattWtB+Q9qdymAou2AD2A4lN1Rvm1jr40aJi4E4DSeHByaiKFIwERRxvLLQb3O84PjEOvg2uJiNWo1UBES4JRA2a3sCAueAWggc4NnGiQLZB1DCbnMUSOpNtWobRyeQa6kRbgRU0IZfYbKcWNsAwBoBEaomzjXUizmAQOxucZJM8gfEma6k8WRxoa0XzubfYnmqIE4xgkeV+N9mtSJeMSiNjdAgBXRTpspn6a6kqIBUWivFIgZ+Nf6hYABoiLsa0NIGvZpXUgK2auNJGogBGzTrub4ogms3Nxk1HJbYN-GvLSVtJKFaFR+WmXtG2w3-SZeohbudT1cS+zYQgGB2eHX0mSBYAta60GUvG1R0rACAJAPwDp4mb0tWWCDTfjQaKLbcM25Au5pnr11CtZ468U1pM1RZC8g20BX+gQBlgNKBYdIFsGSC2Eh1IaJtTls412hsNhuVMLgE5gfa2twW57eC2w15Q2thWu0AGA6D11u1zax7UdsoKAZ3tKYCTF9vh0-bodHWksWVpTlqbYA+dfjZjourlbuAiGnkK9vfqUCr8BkHrYA1jmnavaw2zHVNsm3vNztC4ebatqU4pymdxmkLTtrx38b9tJ2w7fxuO2Tpo5TOy7ZWGu23b7tPaqHYLph1w7Pth4pHQDN+2y50NxOnDUDuh2g66Rd1aXbtCe2q6QN6ursCQA+2TBFdpOiHX9uN1o7stsuTHdjr+246FsBAIjvHWS0UzetagfreQGp10MRttkcbQtrS1gaMtK2wrREHoqdaPtggAsOhhUUO6TMJm53YVoQ311+uru+XAgA909bo5mOiSZjtrzvMTNDWgrSZsj0GkY9eYQsHbugW2RHdhu1TaNrNxylOAq9T0KhobHj1l1qId8uPTdILru9tbLKO1U6rdUgCqIdoNGiS2UNc9GO0bRk0L3V5i9Ie8DYBtr08gp9dYGrT-3n316k9OO5vbXvQ1p6qtW+mfd9zpLMFa8g+pdbnMq42E6tf20vf0QSYBtX9WrG4KVmjLLoGaOQxkPHPyHZF+NLWkrf0SBwYB39gOT-QtlMXVZ8gO+v4j1ugI9o994+MhbZCL3pdvsN+lOYus9CFaltmWnnaAoM3wGkt6fPPaNob0C4QNKe-HZVoWxkHroF+1Lc-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-nCElsjfiICXk-qwgCpDY5iA2OKkHRFF6i5seJPLuPpKx-wX6cOPxOwz0ZwKAO5wXFnmwNJ-Hk2fFP2YNLszDBbMex4ydEddEIJaLaTx0Tnu2okmJoyXzZBoGNzhWEl5qEYC36KBRcwI3slpXoVQ08uMjHrFRg9ogpVSqtScToxq4bFTCOEVKyEMvL5wxK5lxQyOxBlMiRjIqX9j7AnYsMVa-PmSZKd60l3JlQxB4xkYY295nYJaDbwFIU2sdAyHFejzZB0oWI5FX0zphWG6sWXNKDiOvQkAcbkKrgBoGoAWdyuSSa5G+SCAVcrkMiLm6glAwvXuBPN1smsBYBb8SZgSUtK9rAXngIqXGMW9WxkTJ8qRpVLYh74RATV+4d1tAEPievVsUy2lFal7SaJMja20bCZjW2B0Dx1ge8LnIGkkK+qadGAhfH3QYy5ZfVAfmkzLffJK3XipVwyxXE7ktyR7lWW+vSHV45367xd8q8vUru7S87jd7K8vdDSB+mbi5tOPsBpc9ln7+98MBiCYVHwVr19yjJADAeHwP0+wkORiEZLoIQCKDOE10BYbRW9Y0fAZUGkpEVxdNPd5m6DdAS3384y97h6zdbJ8P4klBdyIUc2vgxNkUMXpBJUkRmI6fI07W4w8KQKPCkEN2KGYUuIfRM7T96I-ElpPSqccxWAQSfWvQRNsuRZohL0D+vIRPD0+gwHk-wBFPtL3e6B3E-2R7K7Vw4o4vSo6eb8hniWHG4WAmfKqZnwetLD4mqBpPenxyqZ5dz2e+wln+JdZ+lDuenFyb2z5m8HcrAObsHgj5xPSAufIqawT-BZ7NcEfN3b7vqkjRc8+Q+wkXuyImI48MgMZ04hL8jV8+Rfkv7NipGW6-1cfMvFzMcX1T3d2fYvS7h96FSlWYeVXRtpBw14UgriwveX8z4lNa9leAPIwHL0l9eipfVo6Xmrw6wq9RUSwOnor2R+lilfz3sTAGJV7I8leevC379XoiGlreCNi2TN3J8LwaeLqtY-kH64MrlOzz3mNb4iodJ2h6ENTTgAFhIAg69wPmHkLaAUkx828w+yEkzIendMPZ0WbmTAhDlSyLFLLjKSYIiNe0NzEALteiF+--f5TfLT2dzPGkg+38Fi5tQgBQ3gTwf+U1QX7ph9w-XZ7fP7yIwB+mzcm2PgyALMYVNndDsitvjIIfnogwyjgCQK6jd45qEf5PpHxzMB+xZxyXqHMMAG-RPPP07+PzJQy-O+So5zazfpjzjls2E5sG9bWEDz6K-05oPKQe31zngkiHBLpAmfdcTi-oimPtDdT5IOy4YEqxOnkzICyI-Y+Vufn5T8YHo+JfYPlThD4J+9mifbASEiT85AO-efTv0WybK9lo+6XbB1XZb9x9e-8fefKH+OVFDE-7fjvpvC769nIaafWnoRUz477HVWfmgpkDSE1Fc+PeWUNPyH4z-h+NqQvpsyL7F8CypffxGXx2XhL3q0NCv4-K7hAxq-u-CpLX5IM4BMy9fQJSEpfyrem-MxT+mPwnSt9sDISB1vzG9+HCPf5JqkzPPTj9PvfVJWyrPDv6e8feNcBNyK0qF397gCrFvN70f9UkFXVL9jW-3uGNxP2PvwJVf1AHX8fezMH-r-5pIWyjgpuobQ6MQmMGShAQnD1IxOpgP9aHA2QAED6oWkJ8BwBWHH2InQg4kJB6AgAcgEBA2ysB6sISAXAHaueAWgifAsAcgG9Kv4M8YsA-1oAFkBHgOqIEAQnHiiF0UATAEEB2QOGg0qWAdgEoBQYlQEToYYtwHYBFAf1YDQQgcgHauWAFgANAKgDQGbk7AcFK6ABOOwFHAEFIMLgEwmjY4EqJSkgBlKNjs4APSHuBEBESwREQBhoijMESnAXUCwD+O66HaAnAWwABR0BpgDLAgByATGQkAHYFAG4qBTuwELAHYFl7Jw+RiUpQBiRrtAq8bgXAF+YduN4HqueKuAHKEhdK4HOBgroHh24rgcgHqiZAI4ZAusTj4HmcjAWQA9SGQXAHWqknLQHsBfmC4TaMUAUKzy8FQcgE8uHkExymAdGioHWBtfNTJ02tMIHhgqMTs4CtBzgdkAZ04sk-jh039CUHIBB1s4HB4kQdkAOkylJriDB7QdkF2BJ+CQD5+oQQ-LiBwwVyroOOQZGRDB6qL0JZQbATwHYBhgOyIaB9YDY61KmFOvDpoaNP9BIAdUA+D6BRwecGXB-Is4C1SpgDDbU8BwWR5EaT0KiClA7Iu8DnBcAV8ENAzgJXQMAfwaYCw2qwS+JAhd+P9Cgh6QOCEfByAWCHfB2IQEBI2OwQEBlBbCkSGzBzgWCxSSJhDUGxODpG4TLBPAa2L8sfQIKzCsaHkcGUopgMVjgssWBWCFQHQZxhEhHgNUGrQ7gLE7xQ0kEcE4mxxlyG10-OC4T8hbQZCEUmLZApirQtUpHbtBHAV8rIhdoIGxl4T0GhxpmlREKFwBLJnqCmh9AY8bjGA7H67fQmoZCEeAezC7gHB+oc8B6IRoQySTB5weaGWhoQNaEgAaoS0APSSzMgD4h5gYaq6hkmIsi1kLZLixA84Yb6HYhKoTaHzILIKKEOhjoc6FRh+ocaFocN6BmEJhWoQEBJh7QbMFTBDQXAGUhDyCYSLMtQSJT0hSodgGch3IbjhC4-IcyRHBIoZli1BKwMwBkhlYfMEiUzoTZBzAnonMAFyioUcHqim8PmADWEPFAGSE04WAEuOAyO46xOaXKaHqiD0iDYbhS4e0HqiLIAFgryeWIuGDhcAaSARhuGO6HqAVWOnibm7QX5h7Mm8H2yxOeNgQBchJ8EEL9BDIecHBQCAFyHdh0mL+GQhNNvcQIAO5mFzhhiwd6GMhsABjICIrAbDY2QqIT+hPQpgBUhAoRHJPongcgcWHlh2AfATyBPAZeF7MonPCEdAQKBmGPhy6HswPSLIFAHvhn4URz8h2uCBHYB-4bhhZQQEVOHFhHgGBFBgEEUxx+hHgDBEiR-mPBFfu-0EhGGM8EQ4wZ00kZhFfhOEXhGQhBERWHERzYTVhh0sADE6xOdrvaEnUV4S+FZQs4fOEVwsEQEAthnonpEtkm5kZHPhYmKuEWRpoS2EFytkZlyhh-IXRH+qO4ZZEeAbkVPBsOBYZlik4V4fRFZQR4SeGWR5IZUFaUYXBCCOiIDNQAoAc2miAYgIAKRbUAAuEJzaAwqMSD+wtwL+HhoiAR4C1K39IAGxRiURaTJRSgECZ3gaIKICZRWINQDyQj2ArBgAaIEAA)

```html
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
  </head>
  <body>
    <script>
      const cssDiv = `
         top:0;
         position:absolute;
         width:100px;
         height:100px;
   
         background:red`;

      const cssApp = `
         margin:50px;
         position:relative;
         background:blue;
         height:66vh`;

      print(
        "<h1 style='text-align:center'>Use arrows to move the red square</h1>"
      );

      let info = div("");
      info.style.textAlign = "center";

      let app = div("", cssApp);

      selectBase(app);
      const square = div("", cssDiv);
      unselectBase();

      let keydown = false;

      function sleep() {
        return new Promise((r) => {
          setTimeout(r, 0);
        });
      }

      function log() {
        square.innerHTML = "";
        selectBase(square);
        print(`
               <div style='padding:10px;padding-top:25%'>
                 <div>Left : ${square.offsetLeft}</div>
                 <div>Top : ${square.offsetTop}</div>
               </div>
             `);
        unselectBase();
      }

      document.onkeydown = function (e) {
        e.preventDefault();
        if (e.repeat) return;
        keydown = true;
        switch (event.key) {
          case "ArrowLeft":
            move(square, "left", null);
            break;
          case "ArrowRight":
            move(square, "right", null);
            break;
          case "ArrowUp":
            move(square, null, "up");
            break;
          case "ArrowDown":
            move(square, "null", "down");
            break;
        }
      };

      document.onkeyup = function (e) {
        if (e.repeat) return;
        keydown = false;
      };

      function move(el, rl, ud) {
        const RIGHT = 1;
        const LEFT = -1;
        const UP = -1;
        const DOWN = 1;

        // move right or left
        let moveRL = async (dir) => {
          while (keydown) {
            await sleep();
            log();
            el.style.left = `${el.offsetLeft + dir}px`;
          }
        };

        // move up or down
        let moveUD = async (dir) => {
          while (keydown) {
            await sleep();
            log();
            el.style.top = `${el.offsetTop + dir}px`;
          }
        };

        if (rl == "right") moveRL(RIGHT);
        if (rl == "left") moveRL(LEFT);
        if (ud == "up") moveUD(UP);
        if (ud == "down") moveUD(DOWN);
      }

      log();
    </script>
  </body>
</html>

```