Задача: Интерактивно меню

Най-важното: обект, който управлява състоянието на менюто

Създаваме обект, който централизира логиката на менюто – той обработва клик събитията и пази кое меню е избрано. При клик върху елемент, той остава селектиран и визуално се отбелязва със синя лента. Освен това обектът трябва винаги да може да върне броя на елементите в менюто и кой е текущо активният. Това е пример как чрез обект комбинираме events, scope и context в практична задача.

Стъпка по стъпка: как да реализираш задачата

1. Създай JavaScript обект (например menu), който ще управлява менюто.
2. В обекта дефинирай метод за инициализация, който намира всички елементи от менюто в DOM.
3. Закачи click събитие към всеки елемент.
4. При клик:
   
   • премахни селекцията от предишния елемент;
   • добави визуален клас за селекция на текущия;
   • запази референция към избрания елемент в обекта.
5. Добави метод, който връща броя на елементите в менюто.
6. Добави метод, който връща кой е текущо селектираният елемент.

Основни методи и концепции

• addEventListener – закачане на обработчик за събитие click.
• classList.add() / classList.remove() – добавяне и премахване на CSS клас за селекция.
• querySelectorAll() – намиране на всички елементи от менюто.
• this – използва се, за да пазим контекста на обекта и текущото му състояние.

Задача

Реализирай обекта така, че:

• винаги да има само един селектиран елемент;
• да можеш да извикаш метод, който връща броя на всички меню елементи;
• да можеш да извикаш метод, който връща текущо избрания елемент (например „profile“).