ボタンを押したら画面上の数字が増減するだけのアプリを作りました。

作ったアプリ

https://agitated-ptolemy-d15ec6.netlify.app/
「Increase」か「Decrease」ボタンを押すと、画面中央の数字が増減します。
ライブラリやフレームワークは使わずに作成しました（リセットCSSだけ使用）。
こちらのProject No.5を元ネタにさせてもらいました。

特記事項

ボタンを押すとき、レイアウトが崩れる

ボタンを押したときに枠線を太くするために:activeにborderを設定すると周りの要素も影響を受けます。で、これ自体はborderではなく、outlineを設定すれば解決することが出来ます。

.btn:active {
    outline: 3px solid #a9a9a9; /* borderではなくoutline */
}

しかし、この時に.btnにborderの代わりにoutlineを設定すると、ボタンをクリックしたときに枠線が消えます。ボタン以外の場所をクリックすると元に戻ります。

.btn {
    outline: 1px solid #a9a9a9;
}

これを回避するために、.btnにはborderを設定し、.btn:activeにはoutlineを設定するようにしました。

.btn {
    border: 1px solid #a9a9a9;
}

.btn:active {
    outline: 3px solid #a9a9a9; /* borderではなくoutline */
}

ボタンを押したときの動作

最初に数字を表示するdiv要素を取得して、0を設定しています。
「Increase」ボタンが押されると現在の要素の値を取得して、StringからNumberに変換して1を足しています。

index.html

<div class="number"></div>

script.js

const currentNum = document.querySelector('.number')
currentNum.textContent = 0

const increaseBtn = document.getElementById('increase')

increaseBtn.addEventListener('click', () => {
  currentNum.textContent = Number(currentNum.textContent) + 1
})

参考文献・記事

MDN