Click Counter (No DB, No Cookies)

This click counter tracks clicks per page load (session-only). No database, no cookies, no tracking — it just counts clicks while the page is open and can display the count anywhere. Great for testing buttons, layouts, or simple engagement.

Newbie setup: paste the code once, then add data-click to anything you want counted. Put <span data-click-count>0</span> anywhere to show the live count.

<!--
Lightweight Click Counter (No DB, No Cookies)
- Counts clicks while the page is open (resets on refresh)
- Add data-click to any element you want to count
- Add data-click-count anywhere to display the count
- Optional: show per-element counts too

SETUP:
1) Paste everything below once (footer recommended).
2) Add data-click to elements you want to count.
3) Add <span data-click-count></span> where you want the count displayed.
-->

<!-- Display (optional) -->
<div class="vs-clickbox">
  Total clicks this session: <span data-click-count>0</span>
</div>

<!-- Example buttons (optional) -->
<p style="margin:10px 0;display:flex;gap:8px;flex-wrap:wrap">
  <button type="button" data-click="primary">Click me</button>
  <button type="button" data-click="secondary">Click me too</button>
</p>

<style>
/* Scoped to avoid layout conflicts */
.vs-clickbox{
  display:inline-block;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(30,40,80,.14);
  background:#fff;
  box-shadow:0 10px 30px rgba(20,24,70,.08);
  font:800 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0c0f14;
}
.vs-clickbox [data-click-count]{
  font-weight:900;
}
</style>

<script>
(function(){
  "use strict";

  // Total clicks (session-only: resets on refresh)
  var total = 0;

  // Optional per-key counts: data-click="like", data-click="share", etc.
  var byKey = Object.create(null);

  function updateDisplays(){
    var nodes = document.querySelectorAll("[data-click-count]");
    for (var i=0; i<nodes.length; i++){
      nodes[i].textContent = String(total);
    }

    // Optional: per-key displays, e.g. <span data-click-count-for="primary"></span>
    var keyed = document.querySelectorAll("[data-click-count-for]");
    for (var j=0; j<keyed.length; j++){
      var key = keyed[j].getAttribute("data-click-count-for") || "";
      keyed[j].textContent = String(byKey[key] || 0);
    }
  }

  function inc(key){
    total++;
    if (key){
      byKey[key] = (byKey[key] || 0) + 1;
    }
    updateDisplays();
  }

  // Capture clicks on any element with data-click (even nested clicks)
  document.addEventListener("click", function(e){
    var el = e.target.closest ? e.target.closest("[data-click]") : null;
    if (!el) return;

    var key = (el.getAttribute("data-click") || "").trim();
    // If data-click is present but empty, still count it
    inc(key);
  }, true);

  // Init
  updateDisplays();

  // Optional debug access:
  // window.vsClickCounter = { getTotal: function(){return total;}, getByKey: function(){return byKey;} };
})();
</script>

<!-- Optional per-element display example:
<p>
  Primary clicks: <span data-click-count-for="primary">0</span>
</p>
-->