I have a page with several menu items. With the exception of the Notifications page, if I am on any page and I receive a notification, for example my score is above 70%, the Notifications menu item indicates that I have received a notification by changing the notification text to red letters.
By default, all menu item letters are white.
In php, after the query and calculation, when the score reaches 70%, the notification menu item changes to red. I want when I open the notifications page, the notification menu item to change from red to white.
When the calculation score reaches 80%, the notification menu item should turn red again. And it should be white again when I open the notifications menu.
So it should work on a similar principle to a chat application, when I get a message it should indicate, and when I open it, it should no longer indicate that I have received a message.
My problem is that although the notification menu item turns white when I open it, when I open another page it turns red again.
So, staying with the chat app example, if I open my message and exit or go to another page, it doesn’t indicate that I’ve received a message because I’ve already opened it.
Here is my code:
example.php:
<body>
<nav id="nav">
if ($percentage_result >= 70) {
echo "<a href='notifications.php' class='iconText notofication_display_red' id='notofication_display'><i class='bx bxs-bell menuIcon'></i><span class='menu_group'>Notifications</span></a>";
} else {
echo "<a href='notifications.php' class='iconText class='bx bxs-bell menuIcon'></i><span class='menu_csoport'>Notifications</span></a>";
}
?>
</nav>
<!--=============== script ===============-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../js/notifications.js"></script>
</body>
notifications.js:
window.addEventListener('load', () => {
const activeStite = window.location.pathname;
if (activeStite === "/example/php/notifications.php") {
var indicator = document.getElementById("notofication_display");
indicator.classList.remove("notofication_display_red");
indicator.classList.add("notofication_display_white");
}
});
menu.css:
.notofication_display_red {
color: red;
}
.notofication_display_white {
color: white;
}
How I calculated the 70 or 80 percent, I didn’t write that down because it’s not relevant to my current problem.
I hope I have made myself clear and if I get a reply then thank you very much.