uuukiiiyooo / myFirstPortfolio.github.io

Deployment repo
MIT License
0 stars 0 forks source link

Peer to peer code review #4

Open uuukiiiyooo opened 1 year ago

uuukiiiyooo commented 1 year ago

Update linters.yml file to be able to work with javascript too.

Metaverse-Nabeel commented 1 year ago

Following changes were required.

Alejandroq12 commented 1 year ago

Hello, Ukiyo.

You can try this code to reduce the size of your JavaScript:

const menuIcon = document.querySelector('.menuIcon'); const menuText = document.querySelector('.menuText'); const menuContainer = document.querySelector('.menuContainer');

menuIcon.addEventListener('click', () => { menuText.classList.add('menuTextToggle'); });

menuContainer.addEventListener('click', (event) => { if (event.target.matches('.menuAnchor') || event.target.matches('#closeMenuButton')) { menuText.classList.remove('menuTextToggle'); } });

-- The first line uses querySelector to select the element with the menuIcon class and stores it in the menuIcon variable.

-- The second line does the same for the menuText element.

-- The third line selects the element with the menuContainer class and stores it in the menuContainer variable.

-- The fourth line adds a click event listener to the menuIcon element using an arrow function. When the menuIcon element is clicked, the menuTextToggle class is added to the menuText element, which toggles the menu's visibility.

-- The seventh line adds a click event listener to the menuContainer element using another arrow function. When a click event occurs inside the menuContainer element, the event object is passed as an argument to the arrow function.

-- Inside the arrow function, an if statement checks if the clicked element matches either a menu anchor or the close button. If a match is found, the menuTextToggle class is removed from the menuText element, hiding the menu.

In summary, this code uses event delegation to add a single event listener to the menu container instead of multiple event listeners to each menu anchor, resulting in more efficient code.