rim
2025.5.20
01:43:14 PM
PST
[widget] custom hit counter using nekoweb API
i don't know how to write intros, so i'm gonna get into this directly.
credit to maxpixels for the original code, the nekoweb stats counter! this is a modified version of it, specifically made to work as a hit counter. my dad also guided me through this when i originally wanted to use this on my index. went to him for help cause he's extremely experienced with web development so i owe a bunch to him. credits and acknowledgements out of the way, now onto the actual stuff
the code is below, but everything under it explains how it does what it does.
(async () => {
try {
const request = await fetch(`https://nekoweb.org/api/site/info/yoursite`,);
const json = await request.json();
if (document.getElementById("hitcounter")) {
const views = document.getElementById("hitcounter");
let originalString = `${json.views}`;
let newString = originalString.replace(/(\d)/g, (digit) => {
return `<img src="https://yoursite.org/pathtoimage/orcounterimagefolder/${digit}.png"/>`;
});
views.innerHTML = newString;
}
} catch (error) {
}
})();
try {
const request = await fetch(`https://nekoweb.org/api/site/info/yoursite`,);
const json = await request.json();
if (document.getElementById("hitcounter")) {
const views = document.getElementById("hitcounter");
let originalString = `${json.views}`;
let newString = originalString.replace(/(\d)/g, (digit) => {
return `<img src="https://yoursite.org/pathtoimage/orcounterimagefolder/${digit}.png"/>`;
});
views.innerHTML = newString;
}
} catch (error) {
}
})();
okay so i'll explain the important parts. they are as follows
the 'const request' basically gets the info from the nekoweb api from your site. (kept from max's code)
then the stuff with "hitcounter" just gets the element you have for the hit counter (also kept from max's code but renamed the element to not interfere with the already existing "visitors" element in his code)
and now the main part from "let newString" to "views.innerHTML = newString;" basically just replaces strictly the digits 0 to 9 with an image that is titled in the format of "(digit).png". obviously if you want you can make it jpgs, but pngs are lossless and i prefer that personally which is why i have that over here. so basically if you have a "3" in the viewcount in the api, it would be changed to an image representing the digit, the actual file name would be something like "3.png".
basically, you can use WHATEVER images you want for whatever digits, it's all up to you.
recommendations:
have all digit images be the same height for best look. or if you like, you could just fix it up with css.to see this in use, take a look at my index!