Как добавить счетчик уведомлений в меню уведомлений автоматически

Question

Я хочу отображать количество уведомлений на вкладке уведомлений при получении новых уведомлений. как на этой картинке. пожалуйста, направь меня. Если вы знаете коды html и css, пожалуйста, помогите. Спасибо вам всем. Доброго времени суток.

If I add this code

<span class="badge" style="background-color: #f0ad4e">1</span></a></li>

после навигационной панели это умиротворение. но он отображается каждый раз с новым уведомлением или без него. есть ли способ исправить это?

вот код

<li  class="active" ><a href="/notification"> Notification <span class="badge" style="background-color: #f0ad4e">1</span></a></li>

значок css

    .nav-bottom .nav .dropdown li a .badge {
        position: absolute;
        right: 8px;
        top: 13px;
        padding: 3px 7px;
        font-size: 10px;
    }

Answer 1

Я не знаю, как вы решите обновить счетчик уведомлений, поэтому я только что предоставил вам очень простой c способ обновления уведомлений. Вы можете что-то сделать с помощью простого JavaScript DOM-скрипта, в котором вы можете запустить функцию notificationCounter(). Я также обновил ваш код HTML (см. Ниже). Обязательно включите его в файл .js и загрузите в нижний колонтитул документа HTML.

Javascript:

function notificationCounter() {
    counter += 1;
    document.getElementById("NotificationBadge").innerHTML = counter;
}

const counter = 0;

HTML:

...
<li  class="active" ><a href="/notification"> Notification <span id="NotificationBadge" class="badge" style="background-color: #f0ad4e">1</span></a></li>
...

CSS: оставить как есть.