ncCounter v3.0.1

A simple and customizable web counter for Neocities sites.

Seen by some people!
Last updated on Feb 31 1900.

This counter is actually a script that runs on the browser on demand. You can use as many counters as you'd like per page, as long as you specify which one to act upon when you call the function.

You don't need to register, a database, specialized software. Incredibly, you don't need to give the site name! It just works. Neocities exposes a nifty API, with a get-info call that supports calling anonymously, visitors' browsers can fetch the info themselves!

Do note that, for this script to work, a CORS proxy is used. By default, it uses CORS-Anywhere.HerokuApp.com, but can be changed.

Usage

To use ncCounter, you need to have at least one element with the "ncCounter" class. From within that ".ncCounter", there are a few elements with classes that get parsed. Any element with these classes will work:

Classes can take an argument, in the form of an attribute with the same name as the class. For example, getting just the date your site requires class="ncUp" ncUp="Date".

ncCounter provides an option to use localized time and date strings. To activate it, set "ncCounter.localeDate" to true before calling the script.

To call ncCounter, call "ncCounter.LoadData(0)", where the 0 is the numeric index of the counter you wish to update.

Tutorial

Using ncCounter is simple. First, you can either copy it to your site, or you can link directly to my copy (at "/ncCounter.js"). In the HTML file, add a reference to the script.

  [ content ... ]
</body>
<script href="https://hibi.neocities.org/ncCounter.js"></script>

To make a counter, simply make something the "ncCounter" class. To make it count anything, make an element inside the "ncCounter" any of the classes above, like "ncViews" for unique visitors.

<div class="ncCounter"
  style="background: #235; color: #acf; text-align: right; width: 100px"; padding: 5px;>
  <b class="ncViews"></b><br> <small><i>views!</i></small>
</div>

You can now call "ncCounter.LoadData(i)" where i is the index of the counter you want to update and as many times as you want. For most use cases, a simple call to update counter 0 on DOMContentLoaded will suffice.

<script>
  document.addEventListener('DOMContentLoaded', ncCounter.LoadData(0));
</script>

The end result (preview, centered)

5726 views!

Technical Reference

Do note that blank classes are not actual program classes, but rather the HTML classes given some functionality.

Additionally, given how JavaScript is structured, "requiresApiCall" can be left undefined if your class doesn't require a call, as undefined == false.

Changes from v3.0.0

Changes from v2.0.1