JS~ハートが可愛く回るよ♥①~

今回は♥が可愛く回るのをJSで再現していきたいと思います！！
また、自分でハートを作るんも大変なので、コピペでやらせて頂いたのを貼っときます😊💕

それでは、早速JS側の実装に入っていきます。

index.html

<div class="herart" id="target"></div>

heart.js

<script>
    'use strict';

    document.getElementById('target').addEventListener('click', () => {
      document.getElementById('target').classList.add('circle')
    });

  </script>

今回cssの実装は上記の記事のソースコードをみてください！！

document.getElementById('target') ▶　HTMLのtarget要素を指定します！
documentはこの文章全体を指し、getElementByIdは文章の中で指定しているid取得してね！って意味になります。またidはこのファイルの中で１度のみの使用になります！！
addEventListener　▶　何かが起きたら何かの処理をしてくださいという意味です。

で、この中にまとめて処理を次々に書いていきます！アロー関数と言います。

この中の処理としてclassList.addを追加します！これは、特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来るプロバティになります！！

#アロー関数とは
通常のfunction関数よりも短く書くことができる関数です。

fun.js

let fruit = function() {
  document.write('フルーツ大好き！！')
}

fruit();

👇 functionでは引数が必要ですが

aro.js

let fruit = () => {
  document.write('フルーツ大好き')
}

fruit();

アロー関数では省略することができます！

現状はクリックで色が変わるようになったかなとおもいます！！