js4shiny
/
preview


			
				
					
						
						
							
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>keycode info</title>
</head>
<body>
    <div class="container">
        <div class="key-code">42</div>
        <div class="key-name">l</div>
    </div>

    <style>
        body {
            font-family: -system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            padding: 0;
            margin: 0;
        }

        .container {
          display: grid;
          height: 100vh;
          width: 100vw;
          align-content: center;
          justify-content: center;
          grid-auto-columns: 1fr;
          transition: all 0.1s ease-in-out;
        }

        .key-code {
          text-align: center;
          font-size: 33vw;
        }

        .key-name {
          text-align: center;
          font-size: 10vw;
          font-family: monospace;
          color: #666;
        }

        .container.shiny {
          background-color: #75AADB;
        }
        .container.shiny .key-code {
          color: white;
        }
        .container.shiny .key-name {
          color: #ddd;
        }

        .container.javascript {
          background-color: #F0DB4F;
        }
    </style>

    <script>
        const divCont = document.querySelector('.container')
        const divKeyCode = document.querySelector(".key-code")
        const divKeyName = document.querySelector(".key-name")

        document.addEventListener('keydown', e => {
          if (e.keyCode !== 16) {
            divCont.classList.toggle('shiny', e.keyCode === 83)
            divCont.classList.toggle('javascript', e.keyCode === 74)
          }
          divKeyCode.textContent = e.keyCode
          divKeyName.textContent = e.key
        })
    </script>
</body>
</html>