毎日JavaScript日記〜Day2〜

目次

意気込み

毎日続けていけるようにのんびりと進めます！
初日やってみて、目に見える形で成果がでたので楽しめそうです。

お題

• CSS操作による時計の作成(CSS + JS Clock)

学び・経過時間

• 経過時間：0.5h(動画は10min)
• 定数でDOMのClassを取得してCSSを操作することができること
• バッククオート内は変数の値を利用できること

参照用コード(一部抜粋)
【説明】 * はじめの定数でHTML上のクラスを持つ要素を取得
* その後、関数内で下記を実施
1. 現在時刻取得
2. 現在の秒数を取得
3. 現在の秒数に合わせた秒針の角度を計算 (90を足しているのは、デフォルトから90度ずらして0度の位置から回転するように設定したため)
4. 計算結果を要素に設定

    const secondHand = document.querySelector('.second-hand');

    function setDate() {
      const now = new Date();
      const second = now.getSeconds();
      const secondsDegrees = ((second / 60) *360) + 90;
      secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

感想

今回は、前回に比べると比較的簡単で同じような操作を繰り返す形だったため理解を深めることが出来た。 基本的に前回もそうだったが、HTMLとCSSの操作をJSで行うパターンなので、数をこなせばパターンを把握できるようになるのが良い。
また、動画講義中に間違ったコードでエラーを見せてくれることもあり、どのようになるのが正しいのかを理解するのに役立つ。
英語自体は問題にならないので、JSの基本文法を理解して何をしてよいかわからない人にはおすすめしたい。