デジタル時計アプリを作りました

作ったアプリ

https://sleepy-thompson-b6f44c.netlify.app/

ただのデジタル時計です。
ライブラリやフレームワークは使わずに作成しました（リセットCSSだけ使用）。
こちらのProject No.7を元ネタにさせてもらいました。

今回学んだこと

背景のグラデーション

背景の左上から日が差している感じのグラデーションはbackgroundプロパティにconic-gradient関数を設定することによって実現しました。

body {
    background: conic-gradient(at 25% 0%, #FE920D 90deg, #FCF52B 180deg, #1EFE52 270deg);
}

conic(=円錐。MDNでは扇形と訳されているようです)の中心を「at X座標 Y座標」で指定し、色とその位置を指定します。

背景は半透明にしたいけど、文字は不透明にしたいとき

時計部分の背景を黒の半透明にしたかったときのこと。opacityでいいだろーと思ったらダメでした。背景と一緒に文字も半透明になって薄く見えます。

.clock {
    color: #ffffff;
    background: #000000;
    opacity: 0.1;
}

これについては記事がたくさんあって、opacityではなく、background-colorにrgba関数を設定すれば出来るようです。

.clock {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.1);
}

Dateオブジェクトをインスタンス化する場所

setIntervalで1秒ごとに現在時刻を取得するように設定しましたが、繰り返し実行するコードは少ないほうがいいだろうと思い、最初はコールバック関数外でDateオブジェクトのインスタンス化を行っていました。

const date = new Date() // 最初に１回だけDateオブジェクトをインスタンス化
const dayList = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
const clock = document.querySelector('.clock')

const checkTime = () => {  
  const day = date.getDay()
  let hour = date.getHours()
  let minute = date.getMinutes()
  let amOrPm = 'AM'
  
  if (hour > 12) {
    hour = hour % 12
    amOrPm = 'PM'
  }
  
  if (hour < 10) {hour = '0' + String(hour)}
  if (minute < 10) {minute = '0' + String(minute)}
  
  clock.textContent = `${dayList[day]} ${hour} : ${minute} : ${amOrPm}`
}

checkTime()
setInterval(checkTime, 1000)

が、この方法ではダメでした。

引数が与えられなかった場合は、新しく生成された Date オブジェクトはインスタンス化された時点で現在の日付と時刻を表します。
Date()コンストラクター - MDN

ということで、コールバック関数内で1秒ごとに実行するようにしています。

const dayList = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
const clock = document.querySelector('.clock')

const checkTime = () => {
  const date = new Date()
  // 省略
}

checkTime()
setInterval(checkTime, 1000)

参考文献・記事

conic-gradient() - MDN
Date()コンストラクター - MDN
背景色(background-color)を透過させて文字色は不透明にする方法とhtml,slim,css,scssでの記述方法