เสร็จแล้ว
✨ นายยุทธนา พงษ์เผือก
<html> <head> <title>Let's Start </title> <style> :root{ --h:0; --l:50%; } body{ background:hsl(var(--h), 100%, calc(1% * var(--l))); } </style> </head> <body> <script type="text/javascript"> var h = 0; var l = 50; document.body.onkeyup = function(e){ console.log(e); // main.dataset.key = e.key switch(e.key){ case 'ArrowUp': document.documentElement.style.setProperty('--l', (l += 10)); break; case 'ArrowDown': document.documentElement.style.setProperty('--l', (l -= 10)); break; case 'ArrowLeft': document.documentElement.style.setProperty('--h', (h += 10)); break; case 'ArrowRight': document.documentElement.style.setProperty('--h', (h -= 10)); break; } } </script> </body> </html>