HTML+CSS+Javascript入門！2回目

本日は、HTML+CSS+Javascript入門！2回目となります！

今回は、javascriptでクリックイベントと、
cssのアニメーションでコードを書いてみました。

動画の方が分かりやすいのですが、、、画像でご勘弁ください！

それでは早速いきましょう！

const　＝　定数となります。
定数の値は、再代入NG、再宣言NGと言うことで、
内容変更されないのは、保守面でもこちらがいいですね。

<script>
    const box = document.getElementById('btn2');

    box.addEventListener( 'click',() => {
        box.classList.add('circle');
    });
</script>

HTML内に定義した「id = 'btn2'」を指定して、
クリックするとイベントが発生します。

ちなみに、「'click',() => {};」はアロー関数といい、現場利用も多いそうなので取り入れてみました。
cssで180°回転する処理をつけてみました！
実際の現場ではこう言う使い方は、あまりしないのかもしれませんが。
また、カーソルを合わせると色も変わります。

.circle {
    transform: rotate(180deg);
}

.btn1:hover {
  background: #ccc;
}

無事、実装できました！
本当に一歩ずつですが、新しい事へのチャレンジはワクワクします。

今回も最後まで読んでいただきありがとうございます！