Question 275017 in Html Question posted in
Some basic documentation can be found here.

Html – How to do more cleaner code than adding class active and hidden to every element

Full code: https://codepen.io/vvaciej/pen/abPdEBN

Program rely on 8 food areas and there is 3 buttons that segregate them: breakfast, lunch and button all.

I did it by adding class active and hidden to every element

like there:

allButton.addEventListener('click', function () {
    firstFoodElement.classList.add('active');
    firstFoodElement.classList.remove('hidden');

    secondFoodElement.classList.add('active');
    secondFoodElement.classList.remove('hidden');

    thirdFoodElement.classList.add('active');
    thirdFoodElement.classList.remove('hidden');

    fourthFoodElement.classList.add('active');
    fourthFoodElement.classList.remove('hidden');

    fifthFoodElement.classList.add('active');
    fifthFoodElement.classList.remove('hidden');

    sixthFoodElement.classList.add('active');
    sixthFoodElement.classList.remove('hidden');

    seventhFoodElement.classList.add('active');
    seventhFoodElement.classList.remove('hidden');

    eightthFoodElement.classList.add('active');
    eightthFoodElement.classList.remove('hidden');
});

Code works like it should, but I know I would be punished as junior programmer so I want to do the same but more cleaner
Counting on your help

Tags:

2

Answers


  1. 0

    I would recommend rewriting the code to categorize ‘food’, ‘breakfast’, ‘lunch’, and ‘drink’ as classes. So, instead of using <div class="first-food-display active">, you could use something like <div class="food-display lunch-display active">. This implies that this element would be displayed only when either the "all" or "lunch" buttons are selected.

    Following that, I’d suggest modifying the JavaScript in the following manner. I tested it on your codepen and it works.

    const foodElements = document.querySelectorAll('.food-display');
const breakfastElements = document.querySelectorAll('.breakfast-display');
const lunchElements = document.querySelectorAll('.lunch-display');
const drinkElements = document.querySelectorAll('.drink-display');

const displayElements = (elements) => {
  elements.forEach(element => {
    element.classList.add('active');
    element.classList.remove('hidden');
  });
}

const hideElements = (elements) => {
  elements.forEach(element => {
    element.classList.add('hidden');
    element.classList.remove('active');
  });
}

allButton.addEventListener('click', () => {
  displayElements(foodElements);
});

breakfastButton.addEventListener('click', () => {
  hideElements(foodElements);
  displayElements(breakfastElements);
});

lunchButton.addEventListener('click', () => {
  hideElements(foodElements);
  displayElements(lunchElements);
});

drinksButton.addEventListener('click', () => {
  hideElements(foodElements);
  displayElements(drinkElements);
});
    Login or Signup to reply.
  2. 0

    Add some parameters to the buttons and to the div that will be filtered. For example data-filter. And then use them.
    I would do something like this (this is just an example and I’m sure you can improve it):

    document.querySelectorAll('.filter-buttons button').forEach(button => {
  button.addEventListener('click', function() {
    document.querySelectorAll('.filter-buttons button').forEach(el => el.classList.remove('active'));
    this.classList.add('active');
    const { filter } = button.dataset;
    if (filter === 'all') {
      document.querySelectorAll('.filter>div').forEach(el => el.classList.add('active'));
      return;
    }
    document.querySelectorAll('.filter>div').forEach(el => {
      const filterProps = el.dataset.filter.split(',');
      el.classList.toggle('active', filterProps.includes(filter));
    });
  })
})
    .filter-buttons {
  display: flex;
}
.filter-buttons button.active {
  border-color: red;
}

.filter>div:not(.active) {
  display: none;
}
    <div class="filter-buttons">
  <button class="active" data-filter="all">all</button>
  <button data-filter="breakfast">breakfast</button>
  <button data-filter="lunch">lunch</button>
  <button data-filter="drinks">drinks</button>
</div>
<div class="filter">
  <div class="active" data-filter="breakfast">breakfast</div>
  <div class="active" data-filter="breakfast">breakfast</div>
  <div class="active" data-filter="drinks">drinks</div>
  <div class="active" data-filter="lunch">lunch</div>
  <div class="active" data-filter="drinks">drinks</div>
  <div class="active" data-filter="breakfast,lunch">breakfast, lunch</div>
</div>

    P.S. The example also takes into account the situation when it can be both breakfast and lunch 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search