Teruskan dengan Pembangunan Sumber Terbuka

Helo semua, dalam Keluaran 0.3 ini, saya menumpukan pada dua tugasan utama. Permintaan Tarik pertama yang saya pilih untuk ditangani melibatkan pelaksanaan bar navigasi responsif untuk projek Dazzle-and-Delight.

Gambaran Keseluruhan Projek

Repositori Dazzle-and-Delight menganjurkan platform pengurusan acara berasaskan web. Platform ini membolehkan pengguna menyemak imbas maklumat tentang kedua-dua acara yang lalu dan akan datang. Tapak web ini dibina menggunakan JavaScript, HTML dan CSS, dan mengandungi kira-kira tujuh halaman yang memerlukan kemas kini untuk memastikan bar navigasi responsif sepenuhnya merentas pelbagai saiz skrin.

Butiran Kerja

Walaupun projek itu sendiri agak mudah, skop kerja yang diperlukan untuk tugas ini adalah lebih besar. Khususnya, saya perlu melaksanakan bar navigasi responsif yang melaraskan kepada saiz skrin yang lebih kecil (cth., telefon mudah alih dan tablet).

Untuk menangani perkara ini, saya memperkenalkan menu hamburger yang, apabila diklik, mendedahkan senarai menegak bahagian navigasi. Menu ini hanya dipaparkan pada saiz skrin dengan lebar 768px atau lebih kecil. Pelaksanaannya melibatkan pengemaskinian 14 fail secara keseluruhan.

Untuk organisasi kod yang lebih baik dan kemudahan penyahpepijatan, saya mencipta fail baharu, navbar_menu.js, yang mengendalikan pendengar acara untuk butang menu:

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 saya: Jadikan bar navigasi responsif

Langkah-langkah Pelaksanaan untuk Setiap Fail HTML:

Tambah elemen bahagian dengan>

Sertakan skrip di bahagian bawah setiap fail HTML. Skrip ini menguruskan fungsi tunjukkan/sembunyikan menu navigasi menegak semasa interaksi pengguna.

Kesimpulan:

Walaupun projek itu sendiri tidak terlalu rumit, bilangan fail yang terjejas oleh perubahan ini memberikan cabaran yang besar. Berbanding dengan Permintaan Tarik sebelumnya dalam kursus ini, tugas ini memerlukan pengubahsuaian fail yang lebih meluas. Walaupun ia mungkin bukan tugas yang paling sukar dari segi teknikal yang saya lakukan, jumlah kemas kini yang dibuat menunjukkan kemajuan dalam sumbangan sumber terbuka saya.

Atas ialah kandungan terperinci Teruskan dengan Pembangunan Sumber Terbuka. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!