I'm experimenting with changing the eye color based on visitor count. It works perfectly fine on static posts in my Blogger, but it fails to update the eye color properly on my homepage according to the set numeric values. Instead of displaying different colors based on the value, it only shows one color regardless of the number, and it changes every time I click on "load more articles" at the bottom of the homepage.
What could be causing this issue? I'm not very proficient in coding; I simply found code online and combined it by following tutorials.
My website is .
Here's the code snippet I'm working on:
Please pay attention to the // coloring eye section.
I'm looking for an easy solution to fix this problem. I need help synchronizing the eye icon color on both the blogger homepage elements and static post elements based on their respective view counts.
Here are the approaches I have tried along with images.
1st Attempt:
I used this code:
// coloring eye
let eye = document.getElementById("matamata");
if (count < 300) {eye.style.color = "grey";}
else if (count >= 300 && count < 600) {eye.style.color = "yellow";}
else if (count >= 600 && count < 1000) {eye.style.color = "orange";}
else {eye.style.color = "red";}
Result from this attempt on homepage and post views:
Homepage view: https://i.stack.imgur.com/7IDek.jpg
Post view
https://i.stack.imgur.com/EZSBy.jpg
2nd Attempt:
I used this code:
// coloring eye
$.fn.colorize = function () {
return this.each(function() {
var $this = $(this);
$this.css({color: count < 200 ? "grey"
: count < 500 ? "yellow"
: "red"});
});
};
$("i.far.fa-eye").colorize();
The result of this attempt:
Homepage view: https://i.stack.imgur.com/Y4E9S.jpg
Post view: https://i.stack.imgur.com/j1FOJ.jpg
I prefer the second attempt, but it displays the whole code instead of individual article eye colors on the homepage view. Both codes work well when viewed from the post perspective.