経過日数を取得して「NEW」をコントロールしてみた

javascriptって楽しいですね!
新着情報などでよく見る「NEW」マークの表示、非表示を自動で管理したくなりました。

動作が確認出来たバージョンはこちら:GitHub

方法というか、やり方だけはパッと浮かびました。
「本日の日付」と「新着情報をアップロードした日付」を比較して、その差が一定日数経っていると「NEW」のclassを削除すればいい。と。
普段javascriptを組むことは無く、引き出しの数も当然少なく、思った、考える方をコードを表現することは困難でした。 なので、1つずつ順を追って考える事にしました。

アップロードした日付を取得する
htmlのソース内にdata-を用いてアップロードした日付を任意で設定する事にしました。
(試行錯誤の結果)

 
リリース情報を追加!

現在の日付を取得
現在の日付を取得する方法としては、new Date()を使用しました。
このnew Date()ですが、うるう年も把握しており、オリンピックの年にだけ2月29日を認識するみたいです。

new Date()に関する記事はこちら
意外と知られていないJavaScriptのnew Date()の使用方法

後は「本日の日付」から「アップロードされた日付」を引くことで経過日数を取得し、任意の日数と比較することでソースコードを変更する。という流れの完成です。

正直ここまでの道のりは長かったです。「あれ。JSってどやって書くんだっけ!?」と、一瞬頭が真っ白になる場面もありました。動作が確認出来てからはソースコードの見直しを行い、いろんな書き方を知ることができました。まだまだ、修正を加えたりすることもあるかもしれません!
その為にも日頃から書くことを心がけないとダメですねー。