1.まずはコンソールに出力

// キーが離れたときにコンソールに出力
window.addEventListener("keyup",(e) =>{
    console.log(e.key);  
});

キーが離れたとき(keyup)コンソールに出力します。

2.文字を画面に出力

<body>
    <!--ここに文字を出力させる-->
    <div id="output"></div>
    
    <script>
        // 要素取得
        const output = document.querySelector("#output");
        
        window.addEventListener("keyup",(e) =>{ 
            // keyをHTMLで出力       
            output.innerHTML = e.key;
        });
    </script>    
</body>

入力したキーが一文字づつ出力されます。

3.入力した文字列を画面出力（配列）

<body>
    <div id="output"></div>
    
    <script>
        const array =[]; //文字格納用の配列
        const output = document.querySelector("#output");
        window.addEventListener("keyup",(e) =>{
            array.push(e.key); //配列の後ろに追加
            output.innerHTML = array;
        });
    </script>    
</body>

配列にプッシュpush()します。文字がどんどん追加されます。

4.入力した文字列を画面出力

<body>
    <div id="output"></div>
    
    <script>
        const array =[];
        const output = document.querySelector("#output");
        window.addEventListener("keyup",(e) =>{
            array.push(e.key);
            const str = array.join(""); //配列を文字列に変換
            output.innerHTML = str;
        });
    </script>    
</body>

上の例だとa,r,r,a,yみたいに出力されるので、配列の結合にjoin()を使用します。