オープンソース開発を継続し続ける

皆さん、こんにちは。このリリース 0.3 では、2 つの主要なタスクに焦点を当てています。私が取り組むことを選択した最初のプル リクエストには、Dazzle-and-Delight プロジェクトの応答性の高いナビゲーション バーの実装が含まれます。

プロジェクト概要

Dazzle-and-Delight リポジトリは、Web ベースのイベント管理プラットフォームをホストします。このプラットフォームを使用すると、ユーザーは過去および今後のイベントに関する情報を閲覧できます。この Web サイトは JavaScript、HTML、CSS を使用して構築されており、ナビゲーション バーがさまざまな画面サイズで完全に応答するように更新する必要がある約 7 ページが含まれています。

仕事内容

プロジェクト自体は比較的単純ですが、このタスクに必要な作業範囲はさらに膨大でした。具体的には、小さな画面サイズ (携帯電話やタブレットなど) に適応する応答性の高いナビゲーション バーを実装する必要がありました。

これに対処するために、クリックするとナビゲーション セクションの垂直リストが表示されるハンバーガー メニューを導入しました。このメニューは、幅768px以下の画面サイズでのみ表示されます。この実装には、合計 14 個のファイルの更新が含まれていました。

コードの構成を改善し、デバッグを容易にするために、メニュー ボタンのイベント リスナーを処理する新しいファイル navbar_menu.js を作成しました。

document.getElementById('menu-bar').addEventListener('click', function () {
  console.log('click');
  document.getElementById('section-list').style.display =
    document.getElementById('section-list').style.display === 'none'
      ? 'block'
      : 'none';
});

document.getElementById('close-menu-btn').addEventListener('click', function () {
  document.getElementById('section-list').style.display = 'none';
});

自己PR: ナビゲーションバーの応答性を向上させます

各 HTML ファイルの実装手順:

セクション要素を追加します>

スクリプトを含めます 各 HTML ファイルの下部にあります。このスクリプトは、ユーザー操作時の垂直ナビゲーション メニューの表示/非表示機能を管理します。

結論：

プロジェクト自体はそれほど複雑ではありませんが、この変更によって影響を受けるファイルの数がかなりの課題となりました。このコースの以前のプル リクエストと比較して、このタスクではより大規模なファイル変更が必要でした。これは私が取り組んだ中で技術的に最も難しいタスクではないかもしれませんが、行われた更新の量は、私のオープンソースへの貢献の進歩を示しています。

以上がオープンソース開発を継続し続けるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。