ClapsCounter

I am trying to give you a quick overview of the ClapsCounter here.

by Cem Firat

HTML

<h1>ClapsCounter</h1>
<p class="muted">I am trying to give you a quick overview of the ClapsCounter here. The clap clicks are stored in the respective <b>_ClapsCounter.txt</b> file and the vote is stored in the browser <b>localStorage</b> as "applaudiert". By clicking on the counter increase the value for all div's with the class <b>ClapsCounterCount</b>.</p>

<div class="ClapsCounter">
  <h4>View @media (min-width: 960px)</h4>
  <p><span class="ClapsCounterCount">123<!-- '.$count.' --></span> <span>Applause erhalten</span></p>
  <p class="ClapsCounterTxtContainer"></p>
  <button class="ClapsCounterTrigger">Count +1 Button</button>
</div>

<div class="ClapsCounter large">
  <h4>View @media (min-width: 1200px)</h4>
  <p><span class="ClapsCounterCount">123<!-- '.$count.' --></span> <span>Applause erhalten</span></p>
  <p class="ClapsCounterTxtContainer"></p>
  <button class="ClapsCounterTrigger">Count +1 Button</button>
</div>

<!-- to be able to understand it better I show you the php file code here too -->
<!--
// ClapsCounter.php file

	$path = $_SERVER['DOCUMENT_ROOT'].'/'.$_SERVER['REQUEST_URI']; // the path to the file
	$file = '_ClapsCounter.txt'; // the number of claps is saved here
	$file_path = $path.'_ClapsCounter.txt'; // the path to the saved claps
	if (!file_exists($file)) { // if the file does not exist, it will be created
		fopen($file, "w"); } // open file for writing only
	$count = file_get_contents($file_path); // reads entire file into a string
	if ($count == null){$count = 0;} // if the file empty, set count 0
-->
 
<!--
// ClapsCounterReq.php file

  $url = isset( $_POST['url'] ) ? $_POST['url'] : '';
  $origin = $_SERVER['DOCUMENT_ROOT'].parse_url($url,PHP_URL_PATH);
  echo $origin;
  $file = '_ClapsCounter.txt'; // the number of claps is saved here
  $file_path = $origin.'_ClapsCounter.txt'; // the number of claps is saved here
  $count = file_get_contents($file_path);
  if ($count == null){$count = 0; echo $count;
  }
  $count++; //...

CSS

button{
background-color: #4CAF50;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
button:hover, button:active{
background-color: #0e6811;
}

h4{ margin: 0 0 5px; }

.ClapsCounter{
  background: #efefef;
  padding: 15px;
  margin: 15px 0;
}

.large{ background: gold; }
.italic{ text-decoration: italic; }
.muted{ color: gray; }
.succes{ color: green; }
.warning{ color: orange; }

JavaScript

let clicks = document.querySelectorAll('.ClapsCounterTrigger');
//let voted = localStorage.getItem(window.location.pathname); // hidden because of demo
let count = Array.from(document.querySelectorAll('.ClapsCounterCount'));

let txtContainer = Array.from(document.querySelectorAll('.ClapsCounterTxtContainer'));
let beforClick = "<span class=\"muted italic\">Applaudieren Sie diesen Artikel</span>";
let afterClick = "<span class=\"success italic\">Danke für Ihren Applaus!</span>";
let alreadyClick = "<span class=\"warning italic\">Danke, Sie haben schon applaudiert!</span>";

let i;
//let url; // hidden because of demo
//let post; // hidden because of demo
//let xhr; // hidden because of demo

//if (voted == 'applaudiert') { TxtContainer.forEach(i => i.innerHTML = afterClick); }
//else { TxtContainer.forEach(i => i.innerHTML = beforClick); }
txtContainer.forEach(i => i.innerHTML = beforClick); // because if is hidden


for (let i = 0; i < clicks.length; i++) {

  clicks[i].onclick = function () {
  
  //if (voted == 'applaudiert') { TxtContainer.forEach(i => i.innerHTML = alreadyClick); } 
  //else {
    //let url = window.location.href; // hidden because of demo
    //const data = new FormData() // hidden because of demo
    //data.set('url', url); // hidden because of demo
    //let xhr = new XMLHttpRequest(); // hidden because of demo
    //xhr.open('POST', './lib/ClapsCounter/ClapsCounterReq.php', true);

    //xhr.onreadystatechange = function () {

      //if (xhr.readyState != 4 || xhr.status != 200) return;

      // after the click increase the current click number with 1
      count.forEach(element => element.innerHTML = parseInt(element.innerHTML, 10) + 1);
      //count.forEach(i => i.innerHTML = ++plus);
      txtContainer.forEach(i => i.innerHTML = afterClick);
    //};
    //xhr.send(data);
    //localStorage.setItem(window.location.pathname, 'applaudiert');
    //voted = 'applaudiert';
    //}
  }
}