Fahren Sie mit der Open-Source-Entwicklung fort

Hallo zusammen, in dieser Version 0.3 konzentriere ich mich auf zwei Hauptaufgaben. Die erste Pull-Anfrage, die ich ansprechen möchte, beinhaltet die Implementierung einer responsiven Navigationsleiste für das Dazzle-and-Delight-Projekt.

Projektübersicht

Das Dazzle-and-Delight-Repository beherbergt eine webbasierte Event-Management-Plattform. Auf dieser Plattform können Benutzer Informationen zu vergangenen und bevorstehenden Veranstaltungen durchsuchen. Die Website wird mit JavaScript, HTML und CSS erstellt und enthält etwa sieben Seiten, die aktualisiert werden müssen, um sicherzustellen, dass die Navigationsleiste auf verschiedenen Bildschirmgrößen vollständig reagiert.

Arbeitsdetails

Während das Projekt selbst relativ unkompliziert ist, war der für diese Aufgabe erforderliche Arbeitsumfang umfangreicher. Insbesondere musste ich eine reaktionsfähige Navigationsleiste implementieren, die sich an kleinere Bildschirmgrößen anpasst (z. B. Mobiltelefone und Tablets).

Um dieses Problem zu beheben, habe ich ein Hamburger-Menü eingeführt, das beim Klicken eine vertikale Liste von Navigationsabschnitten anzeigt. Dieses Menü wird nur auf Bildschirmgrößen mit einer Breite von 768 Pixel oder kleiner angezeigt. Die Implementierung umfasste die Aktualisierung von insgesamt 14 Dateien.

Zur besseren Codeorganisation und einfacherem Debuggen habe ich eine neue Datei, navbar_menu.js, erstellt, die die Ereignis-Listener für die Menüschaltfläche verwaltet:

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';
});

Meine PR: Machen Sie die Navigationsleiste reaktionsfähig

Implementierungsschritte für jede HTML-Datei:

Fügen Sie ein Abschnittselement mit dem> hinzu

Fügen Sie das Skript ein. am Ende jeder HTML-Datei. Dieses Skript verwaltet die Ein-/Ausblendfunktion des vertikalen Navigationsmenüs bei Benutzerinteraktion.

Abschluss:

Obwohl das Projekt selbst nicht übermäßig komplex ist, stellte die Anzahl der von dieser Änderung betroffenen Dateien eine erhebliche Herausforderung dar. Im Vergleich zu früheren Pull Requests in diesem Kurs erforderte diese Aufgabe umfangreichere Dateiänderungen. Auch wenn es vielleicht nicht die technisch schwierigste Aufgabe ist, die ich je gemacht habe, zeigt die Menge der vorgenommenen Updates den Fortschritt meiner Open-Source-Beiträge.

Das obige ist der detaillierte Inhalt vonFahren Sie mit der Open-Source-Entwicklung fort. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!