前回の記事でハートが可愛く回ったかなと思います！！
今回の記事ではそのハートを１００個に増やしたいと思います！(うるさいだけやんw)
ではでは、勧めていきましょう😊
html側で百個も作るとめちゃくちゃ大変なので、JS側で作れるように実装していきましょう👍
CSSのみ残し、bodyタグに書いていきます。
index.html
<body>
<script>
'use strict';
const div = document.createElement('div');
div.classList.add('heart');
div.addEventListener('click', () => {
div .classList.toggle('circle');
});
document.body.appendChild(div);
</script>
</body>
document.createElement('div')として、これを定数を指定して定義します。
ここから、処理を書いていきたいと思います。
div要素にheartというクラスを付けたいので、heartを追加します。
次にクリックしたときのイベントを追加したいので、EventListenerを追加し、ここでまたアロー関数を使用します👍
そして、bodyの子要素として処理するために、document.body.appendChild(div)を追加します。
わざわざ、HTMLで書かなくていいのはめちゃくちゃいいですね😊
ではこの子達を増やして行きたいと思います！！