Morning session: Peer-to-peer code review

[Dachrono]

Hello Manuel 😄
Hi @Luffytaro22! :D, you project looks very like the design provided, great job!💪
We want to share wit you some advises to you can improve 💪🏼
@ITurres @Alibaba2023

• [optional] you could do the identation in your html a little bit more compact, is better because the navigation for the reviewes it easy if you have a clean identation. 👍🏼

• Please be kind and try to use class name more specific, is better if you describe with a one word the intention of the class or the intention 🤙🏼
  

• On the activities.js file on line 96 I thank it would be better to give that child of activities' card a general class and select them in javascript with querySelectorAll and they will store in an array then you can add the display flex with foreach.

• line 96 to 99 where you declare many activities based on their class and child. And then from line 103 to 104 where you add/remove the 'flex/none' properties:values.
  I think, yet not 100% sure, you might get away by query few elements within 1 'document.querySelectorAll', so there isn't much repetition, what I meant by this...
  e.g.

const activitiesToShowHide = document.querySelectorAll(
  '.activities:nth-child(3), .activities:nth-child(4), .activities:nth-child(5), .activities:nth-child(6)'
);

// or like @ali suggested (i think also ali's suggestion is better)
// you can add on the element a e.g. class 'hide-this-element' and just query all of the elements with that class

const activitiesToShowHide = document.querySelectorAll('.hide-this-element');

// and then you can loop through all of them and apply a 'toggle' method to either add or remove the 'flex' property which will make them disappear or show.
// this 'show-activity class will have a property of display and a value of flex'
//e.g.

activitiesToShowHide.forEach((activity) => {
  activity.classList.toggle('show-activity');
});

Again, some test should be run in order to confirm said method.