JavaScriptを学ぶ②（クリックで画像の形やアニメーションをつけよう♪）

クリックして色が変わるアニメーションです
動画もqiitaに貼る方法が成功しました！嬉しい(^^)

<script>
  `use strict`;

  document.getElementById(`target`).addEventListener(`click`,function(){
    document.getElementById(`target`).style.background = `pink`;
    document.getElementById(`target`).style.borderRadius = `50%`;
  })
</script>

※①のときに、

document.getElementById(`target`).style.borderRadius = `50%`;

を追加しただけかと思いきや、思わぬ発見が！！！

##CSSとScriptでの表記の違い！（ハイフンは不要？）

border-radiusを
borderRadiusとＲを使って表記しているということは、

background-imageも
backgroundImageと大文字でＩを表示すれば、、、、背景画像を変えられるのでは！？

早速、試してみると、、、

<script>
  `use strict`;

  document.getElementById(`target`).addEventListener(`click`,function(){
    document.getElementById(`target`).style.backgroundImage = `url(imge/btn_3.png)`;
    document.getElementById(`target`).style.borderRadius = `50%`;
  })
</script>

いけました～～( ;∀;)♪
こういうアレンジでの疑問点の解消は嬉しいですね(^^)

そして、ここで重大なことにさらに気づいてしまいました(´;ω;｀)
###シングルクォーテーションとバッククォートの違い…
私のコード、、、シングルクォーテーションで囲むところを、
バッククォートで囲ってしまっていました…。
処理上、何も問題はなかったですが、これ以降のコードは書き換えて掲載します！！
はずかしい

###classList.add('〇〇') ※Ｌは大文字

<script>
  'use strict';

  document.getElementById('target').addEventListener('click',function(){
    // document.getElementById(`target`).style.background = `pink`;
    // document.getElementById(`target`).style.borderRadius = `50%`;
     document.getElementById('target').classList.add('circle')
  })
</script>

※コメント部分をすっきりさせるために、
①document.getElementById('target').classList.add('circle')の追加。
②.circleのクラス追加。
これで、おそらく意味は、
「target要素」を取得・呼び出しをして、
そこに、クリックしたら、「ＣＳＳでcircleクラスを追加するよ～」という意味になるのでしょう！

.box{
  width:100px;
  height:100px;
  background:skyblue;
  cursor:pointer;
  transition:0.8s;
}
.circle{
  background:pink;
  border-radius:50%;
  transform:rotate(360deg);
}

※追加したのは、.circleの部分すべて♪
※.classの、transitionです。
※transform:rotate(360deg);の部分は、動画では何も解説なし
調べてみたところ、以下のブログがすご～く分かりやすかったです(^^)
【初心者必見】要素をくるっと回転！transform:rotate()の全て

では、ここから、アレンジを考えてみましょう(^^)♪

.box{
  width:100px;
  height:100px;
  background:rgba(125, 233, 132, 0.69);
  cursor:pointer;
  transition:2.0s;
  margin-left:200px;
  margin-top:100px;
}
.circle{
  width:200px;
  height:200px;
  background:rgba(90, 215, 5, 0.7);
  border-radius:50%;
  transform:rotate(-720deg);
}

変えた部分は、width,height,background,transitionの時間,
rotateを反時計周り２周です(^^)

いい感じに仕上がったので、今回はこのへんで