skip to Main Content

After seeing an interesting function on this site (https://cssbattle.dev/#:~:text=96,Online), I wondered how I could program a live counter that indicates the number of users present on the site WITHOUT using a server or things like that. Does anyone have any idea how one could program something like this using just HTML, CSS or JS?

I know a little about JS, do you have any advice?

2

Answers


  1. It is not possible to count "online users" without a component which keeps track of users which have requested the resource (like your web page). And users/browsers do not talk to "each other", so there is no communication between users/browsers as well (which maybe could be used to "count" online users).

    You need some kind of server component to count online users. It can’t be done with HTML, CSS and JavaScript alone.

    Login or Signup to reply.
  2. Yes it is possible to just do it with js.
    You can use this free ninja api: https://api-ninjas.com/api/counter

    Keep it in mind that if this will last longer than 2 weeks you will have to purchase the premium plan.
    This is a way on how you can achieve it:

    fetch("https://api.api-ninjas.com/v1/counter?id=your_secret_api_&hit=true").then(res=>res.json()).then(data=>document.getElementById("counter").innerHTML = data.value)
    <div id="counter">0</div>

    NOTE: It won’t work unless you pass a key. Also keep in mind that any one can easily access your key by inspecting your webpage.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search