【JavaScript】おみくじアプリの制作

ブラウザ上で動くミニアプリです。
クリックすることで大吉、中吉、吉、凶を表示してくれます。

気に入らなければ、何度でもクリックできます（笑）
このブログで紹介した以下の記事の応用編で作成しました。

【JavaScript】プログラミング初めの一歩

プログラミング教育の初期段階で使えそうな回転して変形するオブジェクトでのネタを紹介します。

muraumusic.com

body内には以下のタグのみ記述します。

<div class="box" id="btn">おみくじ</div>

CSSの記述

CSSは簡単なtransform用の物です。

JavaScriptの記述

今回は、大吉20％、中吉20％、吉30％、凶30％で表示されるようにしました。
addで実装していますが、toggleにして戻したい気もするんですよね。

検討事項

本当はtoggleにしてグルグルっとオブジェクトが回転して四角に戻って「おみくじ」って表記に戻したいんですよね。
今回はちょっとうまくいかず断念しました。
今後の課題ですね。