作ったアプリ

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