Keep continuing with Open Source Development

Hello everyone, in this Release 0.3, I am focusing on two primary tasks. The first Pull Request I have chosen to address involves implementing a responsive navigation bar for the Dazzle-and-Delight project.

Project Overview

The Dazzle-and-Delight repository hosts a web-based event management platform. This platform allows users to browse information about both past and upcoming events. The website is built using JavaScript, HTML, and CSS, and contains approximately seven pages that require updates to ensure the navigation bar is fully responsive across various screen sizes.

Work Details

While the project itself is relatively straightforward, the scope of work required for this task was more substantial. Specifically, I needed to implement a responsive navigation bar that adjusts to smaller screen sizes (e.g., mobile phones and tablets).

To address this, I introduced a hamburger menu that, when clicked, reveals a vertical list of navigation sections. This menu is only displayed on screen sizes with a width of 768px or smaller. The implementation involved updating 14 files in total.

For better code organization and ease of debugging, I created a new file, navbar_menu.js, which handles the event listeners for the menu button:

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

My PR: Make the navbar responsive

Implementation Steps for Each HTML File:

Add a section element with the id="section-list" under the <nav> tag. This section is responsible for displaying the vertical navigation when the hamburger menu is clicked.

Include the script <script src="js/navbar_menu.js"></script> at the bottom of each HTML file. This script manages the show/hide functionality of the vertical navigation menu upon user interaction.

Conclusion:

While the project itself is not overly complex, the number of files affected by this change presented a considerable challenge. Compared to previous Pull Requests in this course, this task required more extensive file modifications. Although it may not be the most technically difficult task I've undertaken, the volume of updates made demonstrates progress in my open source contributions.