一緒に過ごした時間カウンター(ソースを直接編集)

Web

概要

このリポジトリは、HTML/CSS/JavaScriptだけで作られた小さな「付き合い/結婚経過時間カウンター」です。作りは非常にシンプルで、開始日(デートや結婚の日)をソースコード内で直接設定すると、その時点からの経過を年・月・週・日・時間・分・秒で計算して画面に表示します。実行にはサーバーやビルドは不要で、ファイルをブラウザで開くだけで動作。軽量で配布しやすく、個人的な記念ページや学習素材として適しています。画面は自動更新され、見た目も簡潔なため導入が容易です。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 2
  • ファイル数: 2
  • メインの言語: HTML

主な特徴

  • ソースコード内の日付を直接編集して開始日を設定するだけで動作するシンプルさ。
  • 年・月・週・日・時間・分・秒をリアルタイムで表示(1秒ごとに更新)。
  • 外部ライブラリ不要、ローカルでそのまま開いて使える軽量構成。
  • ポルトガル語の文脈(Luís & Mayarle向け)で作られたプレゼント・デモ向けのUI。

技術的なポイント

このプロジェクトはクライアントサイドのみで完結する、典型的な小規模ナレッジプロジェクトです。実装のコアはJavaScriptでの経過時間計算とDOM更新にあり、開始日(おそらくISO形式やDate生成子)を定数としてコードに埋め込み、その時刻と現在時刻の差分を計算します。差分の算出方法にはいくつかのアプローチがありますが、本リポジトリでは「年・月・日」を正確に出すためにDateオブジェクトを用いた暦単位の計算(年差、月差を順次調整)や、総秒数を元に時間・分・秒を導出する混合手法が想定されます。1秒ごとの更新にはsetIntervalを用いるのが一般的で、軽量なUI更新であればパフォーマンス上の問題はほとんど起きません。

注意点として、月の日数差(28〜31日)やうるう年、タイムゾーン差の扱いが挙げられます。簡易実装だと「平均30日」で月換算すると誤差が出るため、正確性を求めるならDate同士の比較で月と年を調整するロジック(開始日の月・日を基準に現在日を補正して差を求める)を採るべきです。また、ファイルをローカルで開いた場合のブラウザ制限や、ローカル時間に依存するため受け手が別タイムゾーンにいると表示がずれる可能性があります。改善案としては、ユーザーがUI上で開始日を入力できるようにする、ローカルストレージやクエリパラメータで保存・共有可能にする、さらにPWA化してオフライン配布やデスクトップ風の表示にすることなどが考えられます。視覚面ではCSSアニメーションやレスポンシブ対応を加えると贈り物用途での魅力が増します。

プロジェクトの構成

主要なファイルとディレクトリ:

  • luisemay.html: file
  • readme.md: file

まとめ

シンプルで配布が容易なカップル向け経過時間カウンター、学習・ギフト用途に最適。

リポジトリ情報:

READMEの抜粋:

💞 Nossa História — Luís & Mayarle

Um projeto simples e romântico em HTML, CSS e JavaScript que mostra, em tempo real, o tempo decorrido desde o início do namoro e do casamento de Luís & Mayarle.
O site exibe anos, meses, dias, semanas, horas, minutos e segundos de forma atualizada automaticamente a cada segundo. ❤️


✨ Demonstração

Você pode abrir o arquivo diretamente no navegador após baixá-lo.

![Preview](https://img.shields.io/badge/HTML-JavaScript-CSS-blue?style