作ったアプリ

https://quizzical-chandrasekhar-d0adff.netlify.app/
画面中央のテキストフィールドに文章を入力してSubmitしたら、画面に入力した文章が表示されます。
新しい文章を入力したら、その前の文章は消えて新しい文章に置き換わります。
ライブラリやフレームワークは使わずに作成しましたが、リセットCSSとbox-shadowの部分だけサンプルコードを流用しました。
こちらのProject No.4を元ネタにさせてもらいました。

特記事項

文章がはみ出る問題

作成中に試しにaaaaaaaaa...と入力してみたら、次のように文章がはみ出てしまいました。

これはCSSのword-breakというプロパティにbreak-allという値を設定すると解決できるようです。

p.output {
    text-align: center;
    word-break: break-all; 
}

ちゃんと改行される。ただし、これをやると英単語の途中でも問答無用で改行されるので、特別な事情がなければ設定しないほうがいいかもしれません。上記のアプリでも最終的に設定するのやめました。

フォームを送信したら文章が一瞬だけ表示されてすぐ消える

語りつくされている問題だと思いますが、e.preventDefault()をちゃんと入れておきます。
フォームを送信したとき、（今回の場合）ページ全体がリロードされるのがデフォルトの動作になりますが、そうすると、入力した文章が表示されてすぐにページがリロードされるので、文章が一瞬だけ表示されてすぐ消えることになります。そこで、イベントハンドラ内でイベントオブジェクトを受け取って、e.preventDefault()でページ全体がリロードされるのを防ぎます。

const displayMessage = e => {
  e.preventDefault()
  const input = document.getElementById('message')
  paraMessage.textContent = input.value
  input.value = ''
  input.focus()
  paraMessage.style.display = 'block'
}

submit.addEventListener('click', displayMessage)

参考にさせていただいたところ

css – ブロックレベルから文字がはみ出してしまう
 JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)
Beautiful CSS box-shadow examples
フォームボックスのbos-shadowはこちらのコードを参考にさせてもらいました（ていうか、コピペしました）。

そして、もちろんMDN