２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
有難いことに、学校設定科目として３年生に情報演習の授業があります。
今年度から、実験的にプログラミング授業を行うことにしました。
その６時間目。続きに記述していくのは、長さ的にしんどくなってきたので、新たなファイルを作ります。。

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。授業案の５時間目。時間を読み込んで、時間に合わせた挨拶を表示させます。

今回の学習成果

今日の運勢

おみくじ

もう一回

   <h1>今日の運勢</h1>
    <div id="btn">おみくじ</div>    
    <a href=""><div class="reset">もう一回</div></a>

href属性のリンクタグについては、初期のHTML学習で触れるべきです。
そして「a」タグについては、displayプロパティがinlineです。
本来ならば、div要素が外にきて、a要素が中に入ります。
この辺りCSSで

display:block;

にしてあげるのが本来かと思いますが、そこを話し始めるとJaveScriptの話から広がりすぎてCSSの講座になってしまいます。
そこで、今回は要素の順番を入れ替えて、displayプロパティがblockのdiv要素をa要素で囲んで、文字ではなくblock要素自体にリンクを貼ることにします。
以前作成したものを、かなり簡略化しています。

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

以前紹介したtransformのオブジェクトを応用しておみくじアプリを制作しました。課題もあるんですよね・・・

CSSの記述

JaveScriptで表示させる挨拶の背景色や位置などのデザインを調整します。

今回は２つのボタンを、それぞれ定義しています。
凝るならば、「opacity」あたりと「hover」を使って、よりボタンらしくできます。
が、今回はパスです。

JavaScriptの記述

これまでに学習してきた条件分岐です。

しれーっと「addEventListener」が入り込んでいます。
これ自体は、ユーザ側の動作を読み取るということで、双方向的な動きを与えるため、興味深いと思います。
なおかつ、しれーっとアロー関数も登場しています。
この辺りは、さらっと「こういう記述なんだー。」ぐらいにしたいです。
これまで変数を定義してきたところを、定数にしています。
ランダムで0～1の小数点以下の数字が選ばれるということを理解する場所です。
割合も含めて、条件分岐の中で何が起こっているかを、じっくりと考えさせたいところです。